精华内容
下载资源
问答
  • 参考 MDN 《JS DOM 编程艺术》 ...referenceNode:它同样是这个父节点下的一个节点用于给新子节点插入定位用的,因为如果一个节点下面有很多子节点,新子节点具体插入的位置需要这个参考子节点来做定位

    参考

    MDN
    《JS DOM 编程艺术》

    语法

    var insertedNode = parentNode.insertBefore(newNode, referenceNode);
    

    参数解析:

    1. parentNode:将要新的子节点属于哪个父节点,也就是说,这个新的子节点要插到哪个父节点下面
    2. newNode:这个要被插入的新子节点
    3. referenceNode:它同样是这个父节点下的一个子节点,用于给新子节点插入定位用的,因为如果一个父节点下面有很多子节点,新子节点具体插入的位置需要这个参考子节点来做定位用
    4. 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);
    

    在这里插入图片描述

    展开全文
  • 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>

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

    一、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();
                }
            }
        }
    }
    

    二、创建节点

    • 普通创建节点

      1. 创建新的元素节点:document.createElement(‘元素名’)
      2. 创建新的文本节点:document.createTextNode(‘文本内容’)
      3. 创建新的片段节点:document.createDocumentFragment()
      4. 创建新的注释节点:document.createComment(‘注释’)
    • 高效创建节点

      1. innerHTML
      2. outerHTML
      3. innerText
      4. 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:将值设置为空,就可以删除调用元素下面的子元素。

    展开全文
  • 获取上一个节点: previousElementSibling 获取下一个节点: nextElementSibling 获取父节点: parentElement 获取子节点: children JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】 节点:根据 W3C 的 ...
  • DOM含义:DOM是文档对象模型(Document Object Model,是基于浏览器编程的一套API接口,是W3C出台的推荐标准。其赋予了JS操作节点的...1、整个文档时一个文档节点。 2、每个HTML元素是元素节点。 3、HTML元素内的文本是
  • Javascript和Jquery对DOM节点的文本创建、获取及操 javascript和jquery获取,添加,删除等操作DOM节点,文本及属性 如:JS:atteibutes/firstChild/appendChild()/getAttribute() JQ: attr()/next()/siblings()/...
  • 此方法返回一个 Element 对象。 语法: document.createElement(tagName) 参数: tagName:字符串值,这个字符串用来指明创建元素的类型。 注意:要与appendChild() 或 insertBefore()方法联合使用,将元素...
  • 创建节点:createDocumentFragment() //创建一个DOM片段createElement() //创建一个具体的元素createTextNode() //创建一个文本节点 var mP = createElement("p");//创建一个p标签 var ptext = createTextNode("这...
  • 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
  • createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 createTextNode() //创建一个文本节点 (2)添加、移除、替换、插入 appendChild() removeChild() replac
  • JS中DOM节点的CRUD

    万次阅读 2021-05-13 21:42:40
    添加到#city下 myClick("btn01",function(){ //创建广州节点 广州 //创建li元素节点 /* * document.createElement() * 可以用于创建一个元素节点对象, * 它需要一个标签名作为参数,将会根据该...
  • 【JavaScript】DOM)基本概念和节点

    千次阅读 热门讨论 2016-12-09 11:13:38
    前言 还记不记得,前面【JavaScript】基础知识初步认识一文提到的针对XML、经过扩展用于HTML的应用程序编程接口——DOM。现在,是时候和它面对面了。...DOM描绘了一个层次化的节点树,运行开发人员...
  • DOM 将 XML 文档作为一个树形结构,而树叶被定义为节点。 XML DOM 简介 XML DOM 定义了访问和处理 XML 文档的标准方法。 XML DOM 是 XML Document Object Model 的缩写,即 XML 文档对象模型...
  • javascript中创建节点可以通过create***方法进行创建,也可以用cloneNode方法。 create***方法: 1.、createElement()方法用于HTML创建新的元素。...2.、createTextNode()方法用于创建一个文本节点。 3、
  • 5大节点: HTML文档的每个成分都是一个节点. (1)整个文档是一个文档节点 (2)每个HTML标签是一个标签...HTML文档的所有节点组成了一个文档树模型,HTML文档的每个标签,属性,文本等都是树的一...
  • Document(文档):当用浏览器打开一个页面文档时,这个文档就会被转成document对象,然后就可以调用了。后面会提到该对象的用法。 Object(对象):DOM中的每个节点都是对象,通过对象的属性和方法就能够操作节点。 ...
  • JQuery (DOM节点创建)

    千次阅读 2019-02-05 15:03:54
    @*querySelector() 方法返回文档匹配指定 CSS 选择器的一个元素*@ var body = document.querySelector('body');//查找body元素 @*addEventListener() 方法用于向指定元素添加事件句柄*@ document....
  • 创建DOM元素 document.createElement ( );...创建一个碎片容器,主要用于直接给body放入多个。 document.createTextNode ( );创建文本节点。 img 和 canvas 元素可以使用 new 来创建,例如: var img = new Ima...
  • DOM节点解析

    千次阅读 2017-06-16 21:50:59
    目录(?)[+] ...DOM是解析XML文件的官方标准,它与平台和语言无关。DOM解析将整个XML文件载入并组装成一棵DOM节点树,然后通过...由于DOM解析把所有节点都载入到内存,因而它比较耗资源,而且它需要把整棵节点
  • 通过 HTML DOM访问 JavaScript HTML 文档的所有元素。 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。 通过 JavaScript,您可以重构整个 HTML 文档。您可以添加、移除、改变或...
  • 1.创建节点 document.createElement(“div”);//创建一个div元素,参数需要是标签名; document.createTextNode(“233”);//创建一个文本节点内容是“233”; 2.添加节点 var myli = document.createElement...
  • 1、prepend():指定元素的前面插入...2、prependTo():与prepend类似,也用于动态添加DOM节点。 $('插入的新内容!!!!').prependTo("#rood"); 无标题文档 $(function(){ //$("#rood").prepend('插入
  • 《JavaScript学习笔记》:DOM_添加节点、删除节点、文档碎片在上篇博文,主要介绍了关于DOM中获取子节点的相关知识点,除了获取子节点DOM还有创建一个节点、加入节点、删除节点等知识点,本篇博文进行介绍。...
  • (1) javax.xml.parsers 包中的DocumentBuilderFactory用于创建DOM模式的解析器对象 , DocumentBuilderFactory是一个抽象工厂类,它不能直接实例化,但该类提供了一个newInstance方法 ,这个方法会根据本地平台默认...
  • MicrosoftJavaScript引入了用于创建ActiveX对象的ActiveXObject类,通过该类可以创建XML DOM对象的实例,代码如下: var xmldoc = new ActiveXObject("Microsoft.XMLDOM"); 2、载入XML Microsoft的XML DOM有...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 66,987
精华内容 26,794
关键字:

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