在dom中可用于创建一个节点

js dom中如何插入一个节点

2021-02-14 10:05:12

参考 MDN 《JS DOM 编程艺术》 ...referenceNode：它同样是这个父节点下的一个子节点，用于给新子节点插入定位用的，因为如果一个父节点下面有很多子节点，新子节点具体插入的位置需要这个参考子节点来做定位

参考
MDN

《JS DOM 编程艺术》
语法
var insertedNode = parentNode.insertBefore(newNode, referenceNode);

参数解析：

parentNode：将要新的子节点属于哪个父节点，也就是说，这个新的子节点要插到哪个父节点下面
newNode：这个要被插入的新子节点
referenceNode：它同样是这个父节点下的一个子节点，用于给新子节点插入定位用的，因为如果一个父节点下面有很多子节点，新子节点具体插入的位置需要这个参考子节点来做定位用
insertedNode：insertBefore 的返回值，返回的是被插入的节点

【注】referenceNdoe，不是必须的，但是你必须要传入一个 Node 或者 null，如果传入 null，则表明此次插入过程没有设置参考点，那么新节点将被插入到父节点内部的最后面，换句话说假设此时父节点内部有其他子节点（但并未设置它们中的任何一个为参考子节点，即 referenceNode，那么新节点将被插入到这些子节点的最后面，这是一个意思。
实例-在前面插入
    <div id="parentElement">
        <p id="OldChildElement">原来的子节点，且被当作参考节点</p>
        <p>没有被当作参考节点</p>
    </div>

// 创建要插入的节点
        var newNode = document.createElement("p");
        // 给新插入的节点添加文本内容
        newNode.innerText = "新插入节点的文本\n";

        // 获得父节点的引用
        var parentDiv = document.getElementById("OldChildElement").parentNode;

        //实验一：referenceNode 存在 --> 正确返回
        var OldChildElement = document.getElementById("OldChildElement");
        // 在父节点内插入一个新节点，该新节点被插入到 OldChildElement 这个子节点前面
        parentDiv.insertBefore(newNode, OldChildElement);
        //实验一结束


        //实验二：referenceNode 为 undefined
        var OldChildElement = undefined; // Not exist a node of id "childElement"
        // 由于此时用于参考插入位置的子节点是 undefined，所以新节点将被插入到父节点内部的尾部
        // 换句话说如果此时父节点内部有其他子节点（但这些子节点并不是参考子节点），新的子节点
        // 将被插入到这些子节点的最后面
        parentDiv.insertBefore(newNode, OldChildElement); 
        //实验二结束


实例-在后面插入
dom 操作中没有提供如何在一个节点后面插入新节点，但我们可以通过 inserteBefore 来模拟这个结果
parentDiv.insertBefore(sp1, sp2.nextSibling);

在这里，参考节点是 sp2.nextSibling ，也就是 sp2 的下一个兄弟节点，如果兄弟节点存在，则插入新节点在这个兄弟节点前面，如果兄弟节点不存在，也就是第二个参数为 null，也将插入到最后面
我们对上面的代码进行修改
        parentDiv.insertBefore(newNode,OldChildElement.nextSibling);

收起

展开全文

javascript

DOM 动态创建节点

2018-11-17 15:11:38

1、创建一个节点 createElement(“标签名”): 按照给定的标签名创建一个新的元素节点. 方法只有一个参数：被创建的元素节点的名字, 是一个字符串. 方法的返回值：是一个指向新建节点的引用指针. 返回值是一个元素...

1、创建一个节点

createElement(“标签名”): 按照给定的标签名创建一个新的元素节点. 方法只有一个参数：被创建的元素节点的名字, 是一个字符串.   方法的返回值：是一个指向新建节点的引用指针. 返回值是一个元素节点, 所以它的 nodeType 属性值等于 1，新元素节点不会自动添加到文档里, 它只是一个存在于 JavaScript 上下文的对象。

//1.创建一个li元素节点 	var book = document.createElement("li");

2、创建文本节点

createTextNode(“文本值”): 创建一个包含着给定文本的新文本节点. 这个方法的返回值是一个指向新建文本节点引用指针，它是一个文本节点, 所以它的 nodeType 属性等于 3，方法只有一个参数：新建文本节点所包含的文本字符串. 新元素节点不会自动添加到文档里

//2.创建文本节点 	var bookNode = document.createTextNode("《西游记》");

> //3.把文本节点添加到元素节点中
>       	book.appendChild(bookNode);

3、为元素添加子节点

appendChild(): var reference = element.appendChild(newChild):

给定子节点 newChild 将成为给定元素节点 element 的最后一个子节点， 方法的返回值是一个指向新增子节点的引用指针，appendChild把子节点添加到父节点中，不能指定插入的位置，默认插入到最后一个子元素后面
		//appendChild把子节点添加到父节点中，不能指定插入的位			  		置，默认插入到最后一个子元素后面
		//var books = document.getElementById("books");   父节点
		//books.appendChild(book);

4、插入节点

insertBefore(): 把一个给定节点插入到一个给定元素节点的给定子节点的前面var reference =  element.insertBefore(newNode（新节点）,targetNode（目标节点的位置）);节点 newNode 将被插入到元素节点 element 中并出现在节点 targetNode 的前面. 节点 targetNode 必须是  element 元素的一个子节点。
		 //4.1获取插入位置
      	var old = document.getElementById("book2");
      	//4.2插入
      	old.parentElement.insertBefore(book,old);

5、删除节点

从一个给定元素里删除一个子节点格式：var reference = element.removeChild(node);返回值：返回值是一个指向已被删除的子节点的引用指针。

注意：某个节点被 removeChild() 方法删除时，这个节点所包含的所有子节点将同时被删除。
> //1.获取要删除节点的父元素   	var stars = document.getElementById("stars");  
> 	//2.获取要删的子节点   	
var fanbingbing =
> document.getElementById("fanbingbing");   	
//3.从子节点中把要删除的子节点删除  
> 	stars.removeChild(fanbingbing);

收起

展开全文

JS DOM创建节点

2020-05-27 09:58:53

一、JS DOM创建节点 document.write() 可以向文档中添加节点但是有个致命问题，会把文档原有的节点全部清空因此不推荐使用

document.write() 可以向文档中添加节点

但是有个致命问题，会把文档原有的节点全部清空

因此不推荐使用

1、create系列方法：

document.createElement  创建元素节点

document.createTextNode 创建文本节点

document.createComment 创建注释节点

document.createDocumentFragment 创建文档片段节点

.appendChild() 追加子元素

document.body.insertBefore(要插入的节点，插入的位置);  在指定位置前插入节点

.firstChild  第一个子元素节点

 <ul id="list"></ul>

 <script>        
    myReady(function(){
      var comment=document.createComment("这是注释呀");
      var ul=document.getElementById("list");
      var li=null;
      var fragment=document.createDocumentFragment();
      for(var i=0;i<3;i++){
        li=document.createElement("li");
        li.appendChild(document.createTextNode("item"+(i+1)));
        fragment.appendChild(li);
      }
      ul.appendChild(fragment);
      document.body.insertBefore(comment,ul);
    });
</script>

2、在IE6-8中，createElement可以用来创建文档中本不存在的元素

可以用来做html5shiv，用于低版本IE兼容html标签元素

document.createElement()创建的HTML5标签是可以兼容IE8以下的浏览器，并在页面中正常显示该标签所设置的样式

<head>
  <style>
     article{color:orange;}
  </style>
</head>
<body>
  <article>直接添加html5元素在IE8以下无法识别</article>
  <script>
    var article=document.createElement("article");
    article.innerHTML="这是document.createElement创建的HTML5元素";
    document.body.appendChild(article);
  </script>
</body>



3、.split() 字符串转数组

IE条件编译语句 /*@cc_on  @*/   里面的内容只有IE会执行，其余浏览器会按照注释来处理，不会执行，可以用于区别是否是IE浏览器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
        article{
            font-size:14px;
            color:orange;
        }
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){
            (function(){
                if(!/*@cc_on!@*/0) return;
                //所有html5新增元素
                var elements="abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(", ");
                //获取长度
                var len=elements.length;
                //循环添加这些元素
                while(len--){
                    document.createElement(elements[i]);
                }
            })();//匿名函数自执行，可以避免污染全局

        });
    </script>
</head>
<body>
    
<article>这是html5元素</article>

</body>
</html>

 以上是错误的，html5shiv代码不能写在domReady中，因为创建元素需要在dom树加载之前完成

以下是正确写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
        article{
            font-size:14px;
            color:orange;
        }
    </style>
    <script src="DomReady.js"></script>
    <script>
        (function(){
            if(!/*@cc_on!@*/0) return;
            //所有html5新增元素
            var elements="abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(", ");
            //获取长度
            var len=elements.length;
            //循环添加这些元素
            while(len--){
                document.createElement(elements[len]);
            }
        })();//匿名函数自执行，可以避免污染全局

    </script>
</head>
<body>
    
<article>这是html5元素</article>

</body>
</html>



 4、高效创建节点的方法

innerHTML

outerHTML

innerText

outerText

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script src="DomReady.js"></script>
</head>
<body>
    
    <ul id="list"></ul>
    <script>
        var ul=document.getElementById("list");
        var str="<li>item1</li>"+
                "<li>item2</li>"+
                "<li>item3</li>";
        ul.innerHTML=str;

    </script>
</body>
</html>



使用innerHTML的限制：

IE6~8中，要求字符串的最左边不能出现空格，否则会被移除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
        div{
            border:2px solid pink;
            background:#abcdef;
        }
    </style>
    <script src="DomReady.js"></script>
</head>
<body>
    
    <div id="box"></div>
    <script>
        var box=document.getElementById("box");
        var str="  这是一句话哦~";
        box.innerHTML=str;

    </script>
</body>
</html>



大多数浏览器来说，使用该方法添加的script脚本是无效的，不会执行

script属于无作用域元素，使用innerHTML添加时会被要求删除

因此要求script必须在有作用域的元素之后，首选<input type="hidden">

并且需要给script添加defer属性

这种做法在IE6-8是有效的，在IE高版本以及其他浏览器中依旧无效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
        div{
            border:2px solid pink;
            background:#abcdef;
        }
    </style>
    <script src="DomReady.js"></script>
</head>
<body>
    
    <div id="box"></div>
    <script>
        var box=document.getElementById("box");
        var str="<input type='hidden'><script defer>alert('hello~');<\/script>";
        box.innerHTML=str;

    </script>
</body>
</html>

 

 

不能单独创建style  meta  link等元素

除非也是放置在有作用域的元素之后，如<input type="hidden">

并且只在IE6-8中有效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script src="DomReady.js"></script>
</head>
<body>
    <div id="box"></div>
    <script>
        var box=document.getElementById("box");
        var str="<input type='hidden'><style>body{background:#abcdef;}<\/style>";
        box.innerHTML=str;

    </script>
</body>
</html>



 innerHTML和outerHTML的区别：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script src="DomReady.js"></script>
</head>
<body>
    <div id="box"><b>喵喵喵</b></div>
    <script>
        console.log(box.innerHTML);//<b>喵喵喵</b>
        console.log(box.outerHTML);//<div id="box"><b>喵喵喵</b></div>

    </script>
</body>
</html>

innerText  提取元素中所有的文本节点

只有文本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script src="DomReady.js"></script>
</head>
<body>
    <div id="box">开始~<b>喵喵喵~</b>结束~</div>
    <br>
    <div id="new1"></div>
    <div id="new2"></div>
    <script>
        console.log(box.innerText);//开始~喵喵喵~结束~
        console.log(box.innerHTML);//开始~<b>喵喵喵~</b>结束~

        var new1=document.getElementById("new1");
        new1.innerHTML="<b>通过innerHTML添加的</b>";
        var new2=document.getElementById("new2");
        new2.innerText="<b>通过innerText添加的</b>";
    </script>
</body>
</html>

低版本firefox不支持innerText

使用：textContent 兼容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script src="DomReady.js"></script>
</head>
<body>
    <div id="box">开始~<b>喵喵喵~</b>结束~</div>
    
    <script>
        //获取innerText
        function getInnerText(ele){
            return (typeof ele.textContent=="string")?ele.textContent:ele.innerText;
        }
        //设置innerText
        function setInnerText(ele,text){
            if(typeof ele.textContent=="string"){
                ele.textContent=text;
            }else{
                ele.innerText=text;
            }
        }
        
        console.log(getInnerText(box));
        setInnerText(box,"这是通过setInnerText设置的文本哦")
    </script>
</body>
</html>

outerText在获取时和innerText相同

在设置时会替换掉本身的元素，因此不建议使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script src="DomReady.js"></script>
</head>
<body>
    <div id="box">开始~<b>喵喵喵~</b>结束~</div>
    
    <script>    
        console.log(box.outerText);
        box.outerText="这是通过outerText设置的文本哦";
    </script>
</body>
</html>

收起

展开全文

javascript

JS 进阶(5) DOM操作：dom加载完毕执行js、创建节点、遍历节点、查找节点、删除节点

千次阅读 2018-11-02 10:06:37

dom可以看成一个树形结构，dom的加载顺序就是从上到下，我们一再强调将js文件放在尾部，就是因为如果js脚本在dom文档构造之前执行，这样js就无法访问dom文档对象模型。 1.1 jquery 等待页面dom树加载完毕，再...


文章目录
一、dom加载完毕执行js
1.1 jquery
1.2 js
二、创建节点
2.1 document.createElement
2.5 innerHTML
2.6 outerHTML
2.7 innerText
firefox哪个版本都不支持innerText属性
2.8 outerText
不建议使用
三、遍历节点
3.1 节点树
**遍历dom数需要判断当前节点是否问元素**
遍历节点树
3.2 元素树（推荐使用）
3.3 类数组对象 NodeList（节点集合）
3.4 类数组对象 HTMLCollection（HTML元素集合）
nameItem() 方法
3.5 类数组对象 NameNodeMap （元素属性集合）
四、查找节点
4.1 getElementById()的bug
4.2 getElementsByTagName()
4.3 getElementsByClassName()
兼容IE8以及以前的浏览器和现在主流浏览器
4.4 querySelector() 和 querySelectorAll()
querySelector() 返回一个元素，如果有多个返回第一个。
querySelectorAll() 返回元素集合
querySelectorAll()返回的是一个静态的NodeList对象，而getElementsByClassName()和getElementByTagName()返回的是动态NodeList对象。
五、插入节点
5.1 appendChild()
5.2 insertBefore()
5.3 replaceChild()
5.3 cloneNode()
5.4 norrmalize()
5.5 SplitText()
六、删除节点

一、dom加载完毕执行js
dom可以看成一个树形结构，dom的加载顺序就是从上到下，我们一再强调将js文件放在尾部，就是因为如果js脚本在dom文档构造之前执行，这样js就无法访问dom文档对象模型。
1.1 jquery

等待页面dom树加载完毕，再执行代码

写法一：标准写法
$(document).ready(function(){
	...
});

写法二：简写
$(function(){
	....
})
两种写法是等价的


等待页面所有资源（包括css样式表、dom树、图片、第三方框架）加载完毕，再执行代码

$(window).load(function(){
	...
});

总结：也就是说$(function(){...})会比$(window).load(function(){...})先执行


1.2 js

onload事件：等待页面所有资源（包括dom树、图片、第三方框架）加载完毕，再执行代码

window.onload = function(){
	...
}




DOMContentLoaded 事件：等待页面dom树加载完毕，再执行代码

jquery中使用的$(document).ready(function(){});实际上监听的就是 DOMContentLoaded 事件。

function domReady(fn){
    //对于现代浏览器，对DOMContentLoaded事件的处理采用标准的事件绑定方式
    if ( document.addEventListener ) {
        document.addEventListener("DOMContentLoaded", fn, false);
    } else {
        IEContentLoaded(fn);
    }
    //IE模拟DOMContentLoaded
    function IEContentLoaded (fn) {
        var d = window.document;
        var done = false;
        //只执行一次用户的回调函数init()
        var init = function () {
            if (!done) {
                done = true;
                fn();
            }
        };

        (function () {
            try {
                // DOM树未创建完之前调用doScroll会抛出错误
                d.documentElement.doScroll('left');
            } catch (e) {
                //延迟再试一次~
                setTimeout(arguments.callee, 50);
                return;
            }
            // 没有错误就表示DOM树创建完毕，然后立马执行用户回调
            init();
        })();

        //监听document的加载状态
        d.onreadystatechange = function() {
            // 如果用户是在domReady之后绑定的函数，就立马执行
            if (d.readyState == 'complete') {
                d.onreadystatechange = null;
                init();
            }
        }
    }
}



二、创建节点


普通创建节点

创建新的元素节点：document.createElement(‘元素名’)
创建新的文本节点：document.createTextNode(‘文本内容’)
创建新的片段节点：document.createDocumentFragment()
创建新的注释节点：document.createComment(‘注释’)



高效创建节点

innerHTML
outerHTML
innerText
outerText







方法名
说明




document.createElement(‘元素名’)
创建新的元素节点 



document.createTextNode(‘文本内容’)
创建新的文本节点


document.createComment(‘注释’)
创建新的注释节点


document.createDocumentFragment()
创建新的片段节点


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .li{list-style:none;height:50px;line-height:50px;width:100px;background-color:lightblue;text-align:center;}
  </style>
</head>
<body>
    <script>
    (function(){
    	var ulEle = document.createElement('ul');
    	for(var i=0; i<3 ; i++){
			var liEle = document.createElement('li');
    		liEle.className = 'li';    		
    		liEle.innerHTML = '第'+i+'个li';
    		ulEle.appendChild(liEle);
    	}
    	document.body.appendChild(ulEle);
    })();
    </script>
</body>
</html>


高效创建节点

当要创建的大批量的节点，使用createElement这类的方法创建节点就非常麻烦。





方法
说明




innerHTML
用来设置或获取当前标签的起始和结束里面的内容，在读模式下返回与调用元素的所有节点包括元素节点、注释节点、和文本节点对应的HTML标记；而在写模式下innerHTML会根据指定的值创建新的DOM树，然后用这个DOM树安全替换调用元素原先的所有子节点。


outerHTML
返回调用它的元素及所有子节点的HTML标签


在写模式下会根据指定的HTML字符串创建新的outer指数，然后用outer指数完全替换调用的元素


2.1 document.createElement
该方法创建的 HTML5标签 是可以兼容IE8以下的浏览器，并在页面中正常显示该标签所设置的样式；参数可以是大小也可以是小写，但是多数情况下建议使用小写。
	var ulEle = document.createElement('ul');
    var liEle = document.createElement('li');	

解决HTML5新元素不被IE6-8识别
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <style>
      /*html5*/
      article {
        font-size: 40px;
        color: red;
      }
    </style>
    <script> 
      (function() {
        if (! 
        /*@cc_on!@*/
        0) return;
        var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', ');
        var i = e.length;
        while (i--){
          document.createElement(e[i]);
        }
      })();
    </script>
  </head>
  <body>
    <article>
      You are my sunshine.
    </article>
  </body>
</html>



2.5 innerHTML
用来设置或获取当前元素里面的所有子节点。

innerHTML有两种模式


读模式：

在读模式下返回调用元素下的所有节点包括元素节点、注释节点、和文本节点对应的HTML标记；

    <div id="content">
    	苟利国家生死以
    	<p>This is a <strong>paragraph</strong> with a list following it.</p>
    	<ul>
    		<li>Item1</li>
    		<li>Item2</li>
    		<li>Item3</li>
    	</ul>
    </div>
    <script type="text/javascript">
    	var content = document.getElementById("content");
    	console.log(content.innerHTML);
    </script>



写模式：

写模式下innerHTML会根据指定的值创建新的DOM树，然后用这个DOM树 完全替换 调用元素原先的 所有 子节点。

   <div id="content">
   		<p>苟利国家生死以</p>
   </div>
   <script>
       var content = document.getElementById("content");
       var str = "<p>This is a <strong>paragraph</strong> with a list following it.</p>"
                   + "<ul>"
                   + "<li>Item 1</li>"
                   + "<li>Item 2</li>"
                   + "<li>Item 3</li>"
                   + "</ul>";
       content.innerHTML = str;
   </script>




2.6 outerHTML
用来设置或获取调用它的元素及所有子节点。

两种模式


读模式：

读取包括调用元素以及调用元素下的所有子节点。

    <div id="content">
    	苟利国家生死以
    	<p>This is a <strong>paragraph</strong> with a list following it.</p>
    	<ul>
    		<li>Item1</li>
    		<li>Item2</li>
    		<li>Item3</li>
    	</ul>
    </div>
    <script type="text/javascript">
    	var content = document.getElementById("content");
    	console.log(content.outerHTML);
    </script>



写模式：

用新的dom树，完全替换 包括调用元素以及调用元素下的所有节点。

    <div id="content">
    </div>
    <script>
        var content = document.getElementById("content");
        var str = "<p>This is a <strong>paragraph</strong> with a list following it.</p>"
                    + "<ul>"
                    + "<li>Item 1</li>"
                    + "<li>Item 2</li>"
                    + "<li>Item 3</li>"
                    + "</ul>";
        content.outerHTML = str;
    </script>




2.7 innerText
读取元素中的所有子节点中的文本或者用文本内容替换所有子节点。

读模式

只读取文本，去掉所有HTML标签。

    <div id="content">
      <p>This is a <strong>paragraph</strong> with a list following it.</p>
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </div>
    <script>
        var content = document.getElementById("content");
        console.log(content.innerText);
    </script>



写模式

使用文本替换调用元素下的所有子节点。

    <div id="content">
      <p>This is a <strong>paragraph</strong> with a list following it.</p>
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </div>
    <script>
        var content = document.getElementById("content");
        content.innerText = "<p>This is a paragraph.</p>";
    </script>


firefox哪个版本都不支持innerText属性
解决办法在火狐浏览器下使用textContent代替innerText
兼容firefox和chrome的写法

    var content = document.getElementById("content");
    function getInnerText(element){
      return (typeof element.textContent == "string") ? element.textContent : element.innerText;
    }
    function setInnerText(element, text){
      if (typeof element.textContent == "string"){
        element.textContent = text;
      } else {
        element.innerText = text;
      }
    }
    
    setInnerText(content, "Hello world!");
    console.log(getInnerText(content));



2.8 outerText
功能与outerText类似，只不过内容变成了文本。
不建议使用



三、遍历节点

遍历节点浏览器提供了API



documentElement 返回文档HTML这个·节点




节点树（节点包括：html元素，文本，注释等）


元素树： 仅包含元素节点的树结构




3.1 节点树




该方法遍历有一个问题，标签直接的空格也算是一个节点。



遍历dom数需要判断当前节点是否问元素
语法： node.nodeType 属性返回节点的类型。

兼容：所有主流浏览器都支持。




节点类型
描述
返回值




element
元素
1


attr
属性
2


text
文本
3


comment
注释
8


document
代表整个文档（dom树的根节点）
9


遍历节点树
      var str = '';
      function travel(space, node){
        if(node.nodeType == 1){		需要判断当前节点是否为元素
          str += space + node.tagName +"<br/>";
        }
        for(var i=0, len=node.childNodes.length; i<len ; i++){
          arguments.callee(space+'|-', node.childNodes[i]);
        }
      }

      travel('',document);
      document.write(str);



3.2 元素树（推荐使用）

      var str = '';
      function travel(space, node){
        str += space + node.tagName + '<br/>';
        for(var i=0, len=node.childElementCount ; i<len ; i++){
          arguments.callee(space+'|-', node.children[i]);
        }
      }

      travel('',document);
      document.write(str);



3.3 类数组对象 NodeList（节点集合）

NodeList对象是节点的集合。

在节点树中通过childNodes获取到的就是是一个类数组对象NodeList

NodeList用于保存一组有序的节点
可以通过方括号来访问NodeList的值，有item方法和length属性
不是Array实例，没有数组对象的方法

如果要进行操作，可以将NodeList先转换为数组。
案例：将类数组对象转换为数组
    <ul id="box">  
      <li>节点一</li>
      <li>节点二</li>
      <li>节点三</li>  
    </ul>
    
    <script>
        var box = document.getElementById("box");
        var nodes = box.childNodes;

        function makeArray(nodeList){
          var arr = null;
          try {	
            return Array.prototype.slice.call(nodeList);	IE不支持该方法。
          }catch (e){
            arr = new Array();
            for(var i = 0, len = nodeList.length; i < len; i++){
              arr.push(nodeList[i]);
            }
          }
          return arr;
        }

        var newNodeList = makeArray(nodes);
        newNodeList.push("<li>节点四</li>");
        console.log(newNodeList);
        
    </script>



3.4 类数组对象 HTMLCollection（HTML元素集合）

以下操作会返回HTMLCollection类数组对象


Ele.getElementsByTagName()
document.scripts
document.links
document.images
document.forms
select.options

  <div id="div">
    <p>
      <span>
        <a href="">1</a>
        <a href="">2</a>
        <a href="">3</a>
      </span>
      <span>
        <a href="">4</a>
        <a href="">5</a>
        <a href="">6</a>
      </span>
      <span>
        <a href="">7</a>
        <a href="">8</a>
        <a href="">9</a>
      </span>
    </p>
  </div>
    <script>
      var spanEle = document.getElementsByTagName('span');
      console.log(spanEle);
    </script>


nameItem() 方法
HTMLCollection对象的namedItem()方法，返回集合中具有指定name属性或id属性的第一个元素。


3.5 类数组对象 NameNodeMap （元素属性集合）

ele.attributes

     var div = document.getElementById('div');
     console.log(div.attributes);




四、查找节点
IE6~IE8和最新浏览器都可以使用：

getElementById()			必须通过document调用，只返回单个对象
getElementsByName()	必须通过document调用
getElementsByTagName()

最新浏览器可以使用：

getElementsByClassName()
querySelector()
querySelectorAll()



4.1 getElementById()的bug
在低版本IE浏览器中document.getElementById()会获取到指定name属性的值。
	<span name="target">错误的</span>
	<div id="target">正确的</div>
	<script>
		var divEle = document.getElementById('target'); 
		获取到的是<span name="target">错误的</span>
	</script>

修复bug
var getElementById = function(id) {
   var el = document.getElementById(id);
   if(!+"\v1") {		
     if(el && el.id === id) {
       return el;
     } else {
       var els = document.all[id],
           n = els.length;
       for (var i = 0; i < n; i++) {
         if (els[i].id === id) {
           return els[i];
         }
       }
     }
   }
   return el;
 };

!+"\v1"：通过各个浏览器对转义字符不同的处理来判断是否为ie浏览器。
( !+"\v1" ) IE中：\v无转义，识别为v，+"\v1"转换数字失败，得到NaN，!表示非，最后解析为true。

其他浏览器，\v转义，类似空格，转换数字后得到1，转非解析为false，不执行后面的代码。


4.2 getElementsByTagName()

通过getElementsByTagName()获取到的是类数组对象
document.getElementsByTagName()或者element.getElementsByTagName()都可以。
document.getElementsByTagName('*')可以获得文档中所有的元素。
document.getElementsByTagName('!')可以获得文档中所有的注释。



4.3 getElementsByClassName()
该方法返回的是一个类数组对象HTMLCollection。

getElementsByClassName可以传入多个类名，类名之间用空格隔开。
    <ul id="myUl">
      <li class="light">1</li>
      <li class="dark light">2</li>
      <li class="light">3</li>
    </ul>
    <script>
        var ul = document.getElementById('myUl');

        var lis1 = ul.getElementsByClassName('light');
        var lis2 = ul.getElementsByClassName('light dark');
        var lis3 = ul.getElementsByClassName('dark light');
        console.log(lis1);
        console.log(lis2);
        console.log(lis3);
    </script>


兼容IE8以及以前的浏览器和现在主流浏览器
var getElementsByClassName = function(opts) {
	var searchClass = opts.searchClass; // 存储要查找的类名
	var node = opts.node || document;  // 存储要出查找的范围
	var tag = opts.tag || '*'; // 存储一定范围内要查找的标签
	var result = [];
		// 判断浏览器支不支持getElementsByClassName方法
	if (document.getElementsByClassName) { // 如果浏览器支持
		var nodes = node.getElementsByClassName(searchClass);
		if (tag !== "*") {
			for (var i = 0; node = nodes[i++];) {
				if (node.tagName === tag.toUpperCase()) {
					result.push(node);
				}
			}
		} else { 
			result = nodes;
		}
		return result;
	} else { // 使用IE8以下的浏览器能够支持该属性
		var els = node.getElementsByTagName(tag);
		var elsLen = els.length;
		var i, j;
		var pattern = new RegExp("(^|\\s)" + searchClass + "(\\s|$)");
		//或者利用单词边界 var pattern = new RegExp("\\b" + searchClass + "\\b");
		for (i = 0, j = 0; i < elsLen; i++) {
			if (pattern.test(els[i].className)) { // 检测正则表达式
				result[j] = els[i];
				j++;
			}
		}
		return result;
	}
}



4.4 querySelector() 和 querySelectorAll()

主流浏览器都支持，IE8是率先支持的。。。
传入的选择器值要符合CSS规则。
可以通过document调用，也可以通过element调用。
querySelector()找不到元素返回null。
querySelectorAll() 找不到元素返回空的集合

querySelector() 返回一个元素，如果有多个返回第一个。
    <input type="text" class="foo:bar" value="请输入内容" />
    <div id="myDiv">
      You are my sunshine.
      <ul id="myUl">
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
      <script type="text/javascript">
        var divEle = document.querySelector('#myDiv');
        console.log(divEle);

        var liEle = divEle.querySelector('ul#myUl>li');
        console.log(liEle);
      </script>


querySelectorAll() 返回元素集合
    <div id="myDiv">
      You are my sunshine.
      <ul id="myUl">
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
    </div>
      <script type="text/javascript">
        var liEle = document.querySelectorAll('ul#myUl>li');
        console.log(liEle);
      </script>



querySelectorAll()返回的是一个静态的NodeList对象，而getElementsByClassName()和getElementByTagName()返回的是动态NodeList对象。
静态NodeList
  <body>
    <div></div>
    <div></div>
    <div></div>
  </body>
  <script>
      var divs = document.querySelectorAll("div");
      var i = 0;
      while(i < divs.length){
        document.body.appendChild(document.createElement("div"));
        i++;
      }
  </script>

正常执行，循环3次插入元素就结束。


动态NodeList
  <body>
    <div></div>
    <div></div>
    <div></div>
  </body>
  <script>
      var divs = document.getElementsByTagName("div");
      var i = 0;
      while(i < divs.length){
        document.body.appendChild(document.createElement("div"));
        i++;
      }
  </script>

会陷入死循环，divs.length的值会一直增长。


五、插入节点

appendChild()
insertBefore()
replaceChild()
cloneNode()
norrmalize()
SplitText()



5.1 appendChild()
在调用元素的最后一个子节点（节点包括文本）后添加节点，该方法返回新的节点。
    <div id="wrap">
      <ul id="myUl">
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
    </div>
      <script type="text/javascript">
        var myUl = document.querySelector('#myUl');
        var txt = document.createTextNode('4');
        var newLi = document.createElement('li');
        newLi.appendChild(txt);
        
        myUl.appendChild(newLi);
      </script>


5.2 insertBefore()
在调用元素的指定已有的子节点之前插入新节点。
   <ul id="myUl">
     <li>1</li>
     <li>2</li>
     <li>3</li>
   </ul>
   <script>
     var myUl = document.querySelector('#myUl');
     var txt = document.createTextNode('4');
     var newLi = document.createElement('li');
     newLi.appendChild(txt);

     var li2 = myUl.children[1];

     myUl.insertBefore(newLi,li2);
   </script>


将新的节点插入到子节点最后：模拟appendChild()
   myUl.insertBefore(newLi,null);

将新的节点插入到开头
	myUl.insertBefore(newLi,myUl.firstElementChild);


5.3 replaceChild()
该方法用新节点替换某个子节点。

语法：replaceChild（要插入的节点，被替换的节点）

返回被替换的节点，被替换的节点会被从dom树移除。
5.3 cloneNode()
创建节点的拷贝，并返回该副本
拷贝的节点要有父节点，如果没有父节点，要通过appendChild()、insertBefore()、replaceChild()等方法进行添加。
接收一个参数默认是false，如果为true即深度复制。深度复制会复制子节点。


5.4 norrmalize()

移除空的文本节点，并连接相邻的文本节点



5.5 SplitText()
splitText(offset) 方法按照指定的 offset 把文本节点分割为两个节点
返回新的文本节点


六、删除节点
removeChild()：删除某个节点中指定的子节点，一定要有参数
removeNode()：IE的私有
将目标节点从文档中删除，返回目标节点

参数布尔值，默认false（true深度删除）

removeChild和removeNode()方法
innerHTML：将值设置为空，就可以删除调用元素下面的子元素。

方法名	说明
document.createElement(‘元素名’)	创建新的元素节点
document.createTextNode(‘文本内容’)	创建新的文本节点
document.createComment(‘注释’)	创建新的注释节点
document.createDocumentFragment()	创建新的片段节点

方法	说明
innerHTML	用来设置或获取当前标签的起始和结束里面的内容，在读模式下返回与调用元素的所有节点包括元素节点、注释节点、和文本节点对应的HTML标记；而在写模式下innerHTML会根据指定的值创建新的DOM树，然后用这个DOM树安全替换调用元素原先的所有子节点。
outerHTML	返回调用它的元素及所有子节点的HTML标签

节点类型	描述	返回值
element	元素	1
attr	属性	2
text	文本	3
comment	注释	8
document	代表整个文档（dom树的根节点）	9

收起

展开全文

JS常见DOM节点操作示例【创建，插入，删除，复制，查找】
千次阅读 2018-12-14 17:12:56
获取上一个节点： previousElementSibling 获取下一个节点： nextElementSibling 获取父节点： parentElement 获取子节点： children JS常见DOM节点操作示例【创建，插入，删除，复制，查找】节点：根据 W3C 的 ...
收起
js的DOM节点操作：创建，插入，删除，复制，查找节点
万次阅读 2017-01-12 11:50:45
DOM含义：DOM是文档对象模型(Document Object Model，是基于浏览器编程的一套API接口，是W3C出台的推荐标准。其赋予了JS操作节点的...1、整个文档时一个文档节点。 2、每个HTML元素是元素节点。 3、HTML元素内的文本是
收起
Javascript和Jquery对DOM节点的文本创建、获取及操作
千次阅读 2018-03-18 09:59:28
Javascript和Jquery对DOM节点的文本创建、获取及操 javascript和jquery获取，添加，删除等操作DOM节点，文本及属性如：JS:atteibutes/firstChild/appendChild()/getAttribute() JQ: attr()/next()/siblings()/...
收起
javascript jquery
js之DOM操作（创建元素节点createElement）
千次阅读 2015-09-21 18:05:22
此方法可返回一个 Element 对象。语法： document.createElement(tagName) 参数: tagName：字符串值，这个字符串用来指明创建元素的类型。注意：要与appendChild() 或 insertBefore()方法联合使用，将元素...
收起
javascript 操作
DOM--如何添加、移除、移动、复制、创建和查找节点等。
千次阅读 2017-08-06 08:31:14
创建新节点:createDocumentFragment() //创建一个DOM片段createElement() //创建一个具体的元素createTextNode() //创建一个文本节点 var mP = createElement("p");//创建一个p标签 var ptext = createTextNode("这...
收起
DOM操作如何添加、移除、移动、复制、创建和查找节点等
千次阅读 2016-10-08 10:21:32
DOM操作--- 如何添加、移除、移动、... createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 createTextNode() //创建一个文本节点（2）添加、移除、替换、插入
收起
DOM节点操作：创建，增加，克隆
千次阅读 2015-07-28 15:01:25
创建新的元素节点 createElement_x_x() 方法创建新的元素节点： xmlDoc=loadXMLDoc("books.xml"); newel=xmlDoc.createElement_x_x("edition"); x=xmlDoc.getEl
收起
html javascript
DOM操作——怎样添加、移除、移动、复制、创建和查找节点
千次阅读 2017-08-26 11:41:57
createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 createTextNode() //创建一个文本节点（2）添加、移除、替换、插入 appendChild() removeChild() replac
收起
JS中DOM节点的CRUD
万次阅读 2021-05-13 21:42:40
添加到#city下 myClick("btn01",function(){ //创建广州节点广州 //创建li元素节点 /* * document.createElement() * 可以用于创建一个元素节点对象， * 它需要一个标签名作为参数，将会根据该...
收起
js javascript
【JavaScript】DOM（一）基本概念和节点
千次阅读 热门讨论 2016-12-09 11:13:38
前言还记不记得，在前面【JavaScript】基础知识初步认识一文中提到的针对XML、经过扩展用于HTML的应用程序编程接口——DOM。现在，是时候和它面对面了。...DOM描绘了一个层次化的节点树，运行开发人员...
收起
javascript
XML DOM完全参考手册（一）DOM与节点
2016-07-26 16:33:17
DOM 将 XML 文档作为一个树形结构，而树叶被定义为节点。 XML DOM 简介 XML DOM 定义了访问和处理 XML 文档的标准方法。 XML DOM 是 XML Document Object Model 的缩写，即 XML 文档对象模型...
收起
javascript中创建节点修改节点删除节点
千次阅读 2011-10-16 12:32:54
javascript中创建节点可以通过create***方法进行创建，也可以用cloneNode方法。 create***方法： 1.、createElement()方法用于在HTML中创建新的元素。...2.、createTextNode()方法用于创建一个文本节点。 3、
收起
javascript div xhtml button html
通过DOM关系获取元素节点和操作节点的基本方法
2018-08-04 18:37:22
５大节点： HTML文档中的每个成分都是一个节点．（１）整个文档是一个文档节点（２）每个HTML标签是一个标签...HTML文档中的所有节点组成了一个文档树模型，HTML文档中的每个标签，属性，文本等都是树中的一...
收起
[Javascript]：DOM概念、DOM操作元素、属性、文本节点详解
千次阅读 2017-09-19 00:58:55
Document(文档)：当用浏览器打开一个页面文档时，这个文档就会被转成document对象，然后就可以调用了。后面会提到该对象的用法。 Object(对象)：DOM中的每个节点都是对象，通过对象的属性和方法就能够操作节点。 ...
收起
JQuery (DOM节点的创建)
千次阅读 2019-02-05 15:03:54
@*querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素*@ var body = document.querySelector('body');//查找body元素 @*addEventListener() 方法用于向指定元素添加事件句柄*@ document....
收起
jQuery
js DOM节点的创建/插入/复制/删除/替换
2020-01-04 15:59:53
创建DOM元素 document.createElement ( );...创建一个碎片容器，主要用于直接给body放入多个。 document.createTextNode ( );创建文本节点。 img 和 canvas 元素可以使用 new 来创建，例如： var img = new Ima...
收起
javascript
DOM树节点解析
千次阅读 2017-06-16 21:50:59
目录(?)[+] ...DOM是解析XML文件的官方标准，它与平台和语言无关。DOM解析将整个XML文件载入并组装成一棵DOM节点树，然后通过...由于DOM解析中把所有节点都载入到内存中，因而它比较耗资源，而且它需要把整棵节点
收起
JavaScript基础（DOM）-Document对象、Element 对象、Attribute 对象、动态的创建删除添加节点
千次阅读 2017-11-25 03:17:14
通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。通过 JavaScript，您可以重构整个 HTML 文档。您可以添加、移除、改变或...
收起
Document对象 js属性
js操作dom节点，创建,复制,删除,添加,查找等操作总结
2017-09-28 20:44:40
1.创建节点 document.createElement(“div”);//创建一个div元素，参数需要是标签名； document.createTextNode(“233”);//创建一个文本节点内容是“233”； 2.添加节点 var myli = document.createElement...
收起
javascript
创建DOM节点prepend()、prependTo()
2015-09-11 01:23:52
1、prepend()：在指定元素的前面插入...2、prependTo()：与prepend类似，也用于动态添加DOM节点。 $('插入的新内容！！！！').prependTo("#rood"); 无标题文档 $(function(){ //$("#rood").prepend('插入
收起
《JavaScript学习笔记》：DOM_添加节点、删除节点、文档碎片
千次阅读 2016-05-31 19:56:04
《JavaScript学习笔记》：DOM_添加节点、删除节点、文档碎片在上篇博文中，主要介绍了关于DOM中获取子节点的相关知识点，除了获取子节点，DOM还有创建一个节点、加入节点、删除节点等知识点，本篇博文进行介绍。...
收起
javascript html 文档碎片
DocumentBuilderFactory用于创建DOM模式的解析器对象
2018-09-21 11:44:09
(1) javax.xml.parsers 包中的DocumentBuilderFactory用于创建DOM模式的解析器对象， DocumentBuilderFactory是一个抽象工厂类，它不能直接实例化，但该类提供了一个newInstance方法，这个方法会根据本地平台默认...
收起
在IE中创建DOM并载入XML
2017-04-12 10:47:34
Microsoft在JavaScript中引入了用于创建ActiveX对象的ActiveXObject类，通过该类可以创建XML DOM对象的实例，代码如下： var xmldoc = new ActiveXObject("Microsoft.XMLDOM"); 2、载入XML Microsoft的XML DOM有...
收起

js dom中如何插入一个节点

参考

语法

实例-在前面插入

实例-在后面插入

DOM 动态创建节点

JS DOM创建节点

JS 进阶(5) DOM操作：dom加载完毕执行js、创建节点、遍历节点、查找节点、删除节点

文章目录

一、dom加载完毕执行js

1.1 jquery

1.2 js

二、创建节点

2.1 document.createElement

2.5 innerHTML

2.6 outerHTML

2.7 innerText

firefox哪个版本都不支持innerText属性

2.8 outerText

不建议使用

三、遍历节点

3.1 节点树

遍历dom数需要判断当前节点是否问元素

遍历节点树

3.2 元素树（推荐使用）

3.3 类数组对象 NodeList（节点集合）

3.4 类数组对象 HTMLCollection（HTML元素集合）

nameItem() 方法

3.5 类数组对象 NameNodeMap （元素属性集合）

四、查找节点

4.1 getElementById()的bug

4.2 getElementsByTagName()

4.3 getElementsByClassName()

兼容IE8以及以前的浏览器和现在主流浏览器

4.4 querySelector() 和 querySelectorAll()

querySelector() 返回一个元素，如果有多个返回第一个。

querySelectorAll() 返回元素集合

querySelectorAll()返回的是一个静态的NodeList对象，而getElementsByClassName()和getElementByTagName()返回的是动态NodeList对象。

五、插入节点

5.1 appendChild()

5.2 insertBefore()

5.3 replaceChild()

5.3 cloneNode()

5.4 norrmalize()

5.5 SplitText()

六、删除节点

JS常见DOM节点操作示例【创建 ，插入，删除，复制，查找】

js的DOM节点操作：创建 ，插入，删除，复制，查找节点

Javascript和Jquery对DOM节点的文本创建、获取及操作

js之DOM操作（创建元素节点createElement）

DOM--如何添加、移除、移动、复制、创建和查找节点等。

DOM操作 如何添加、移除、移动、复制、创建和查找节点等

DOM节点操作：创建，增加，克隆

DOM操作——怎样添加、移除、移动、复制、创建和查找节点

JS中DOM节点的CRUD

【JavaScript】DOM（一）基本概念和节点

XML DOM完全参考手册（一）DOM与节点

javascript中创建节点修改节点删除节点

通过DOM关系获取元素节点和操作节点的基本方法

[Javascript]：DOM概念、DOM操作元素、属性、文本节点详解

JQuery (DOM节点的创建)

js DOM节点的创建/插入/复制/删除/替换

DOM树节点解析

JavaScript基础（DOM）-Document对象、Element 对象、Attribute 对象、动态的创建 删除 添加节点

js操作dom节点，创建,复制,删除,添加,查找等操作总结

创建DOM节点prepend()、prependTo()

《JavaScript学习笔记》：DOM_添加节点、删除节点、文档碎片

DocumentBuilderFactory用于创建DOM模式的解析器对象

在IE中创建DOM并载入XML

在dom中可用于创建一个节点

JS常见DOM节点操作示例【创建，插入，删除，复制，查找】

js的DOM节点操作：创建，插入，删除，复制，查找节点

DOM操作如何添加、移除、移动、复制、创建和查找节点等

JavaScript基础（DOM）-Document对象、Element 对象、Attribute 对象、动态的创建删除添加节点