您的位置:1010cc时时彩经典版 > 1010cc时时彩客户端 > 您所不驾驭的javascript操作DOM的内幕知识点,Ele

您所不驾驭的javascript操作DOM的内幕知识点,Ele

发布时间:2019-11-01 21:42编辑:1010cc时时彩客户端浏览(183)

    DOM Element节点类型详解

    2015/09/21 · HTML5 · DOM

    本文作者: 伯乐在线 - 韩子迟 。未经作者许可,禁止转载!
    欢迎加入伯乐在线 专栏作者。

    上文中我们讲解了 DOM 中最重要的节点类型之一的 Document 节点类型,本文我们继续深入,谈谈另一个重要的节点类型 Element 。

    一:Node类型

    1.dom对象的innerText和innerHTML有什么区别?

    • innerText:文本格式插入
    • innerHTML:支持HTML插入,解析HTML标签

    DOM元素的attribute和property很容易混倄在一起,分不清楚,两者是不同的东西,但是两者又联系紧密。很多新手朋友,也包括以前的我,经常会搞不清楚。

    1、概况


    Element 类型用于表现 HTML 或 XML 元素,提供了对元素标签名、子节点及特性的访问。 Element 节点具有以下特征:

    1. nodeType 的值为 1
    2. nodeName 的值为元素的标签名
    3. nodeValue 的值为null
    4. parentNode 可能是 Document 或者 Element
    5. 其子节点可能是 ElementTextCommentProcessingInstructionCDATASection 或者 EntityReference

    要访问元素的标签名,可以用 nodeName 属性,也可以用 tagName 属性;这两个属性会返回相同的值。在 HTML 中,标签名始终都以全部大写表示,而在 XML(有时候也包括 XHTML)中,标签名始终和源代码中保持一致。假如你不确定自己的脚本将会在 HTML 还是 XML 文档中执行,最好还是在比较之前将标签名转换成相同的大小写形式:

    JavaScript

    var myDiv = document.querySelector('div'); console.log(myDiv.tagName); // DIV console.log(myDiv.nodeName); // DIV if (myDiv.tagName.toLowerCase() === 'div') { // 这样最好,适用于任何文档 // ... }

    1
    2
    3
    4
    5
    6
    7
    var myDiv = document.querySelector('div');
    console.log(myDiv.tagName);  // DIV
    console.log(myDiv.nodeName);  // DIV
     
    if (myDiv.tagName.toLowerCase() === 'div') { // 这样最好,适用于任何文档
      // ...
    }

    DOM1级定义了一个Node接口,该接口是由DOM中的所有节点类型实现。每个节点都有一个nodeType属性,用于表明节点的类型,节点类型在Node类型中有以下几种:

    2.elem.children和elem.childNodes的区别?

    • element.children 获取的是当前元素的所有子节点元素(不包括文本元素),children返回的是HTMLCollection类型
    • element.childNodes 获取的是当前元素的有所子元素(节点元素和文本元素),childNodes返回的是NodeList类型

    attribute翻译成中文术语为“特性”,property翻译成中文术语为“属性”,从中文的字面意思来看,确实是有点区别了,先来说说attribute。

    2、HTML 元素


    所有 HTML 元素都由 HTMLElement 类型表示,不是直接通过这个类型,也是通过它的子类型来表示。 HTMLElement 类型直接继承自 Element 并添加了一些属性。每个 HTML 元素中都存在下列标准属性:

    1. id 元素在文档中的唯一标识符
    2. title 有关元素的附加说明信息,一般通过工具提示条显示出来
    3. lang 元素内容的语言代码,很少使用
    4. dir 语言的方向,值为 ltr 或者 rtl,也很少使用
    5. className 与元素的 class 特性对应

    Node.ELEMENT_NODE(1); 元素节点
    Node.ATTRIBUTE_NODE(2); 属性节点
    Node.TEXT_NODE(3); 文本节点
    Node.DOCUMENT_NODE(9); 文档节点

    3.查询元素有几种常见的方法?ES5的元素选择方法是什么?

    attribute是一个特性节点,每个DOM元素都有一个对应的attributes属性来存放所有的attribute节点,attributes是一个类数组的容器,说得准确点就是NameNodeMap,总之就是一个类似数组但又和数组不太一样的容器。attributes的每个数字索引以名值对(name=”value”)的形式存放了一个attribute节点。

    3、特性的获取和设置


    每个元素都有一个或多个特性,这些特性的用途是给出相应元素或其内容的附加信息。操作特性的 DOM 方法主要有三个,分别是getAttribute() setAttribute() removeAttribute()

    注意,传递给 getAttribute() 的特性名与实际的特性名相同,因此要想得到 class 特性值,应该传入 class 而不是 className,后者只有在通过对象属性(property)访问特性时才用。如果给定名称的特性不存在,getAttribute() 返回 null。

    <div id='myDiv' title='hanzichi'> </div> <script> var myDiv = document.querySelector('div'); // attribute console.log(myDiv.getAttribute('id')); // myDiv console.log(myDiv.getAttribute('class')); // null console.log(myDiv.getAttribute('title')); // hanzichi console.log(myDiv.getAttribute('lang')); // null console.log(myDiv.getAttribute('dir')); // null // property console.log(myDiv.id); // myDiv console.log(myDiv.className); // '' console.log(myDiv.title); // hanzichi console.log(myDiv.lang); // '' console.log(myDiv.dir); // '' </script>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <div id='myDiv' title='hanzichi'> </div>
    <script>
      var myDiv = document.querySelector('div');
     
      // attribute
      console.log(myDiv.getAttribute('id')); // myDiv
      console.log(myDiv.getAttribute('class')); // null
      console.log(myDiv.getAttribute('title')); // hanzichi
      console.log(myDiv.getAttribute('lang')); // null
      console.log(myDiv.getAttribute('dir')); // null
     
      // property
      console.log(myDiv.id); // myDiv
      console.log(myDiv.className); // ''
      console.log(myDiv.title); // hanzichi
      console.log(myDiv.lang); // ''
      console.log(myDiv.dir); // ''
    </script>

    通过 getAttribute() 方法也可以取得自定义特性。

    在实际开发中,开发人员不常用 getAttribute(),而是只使用对象的属性(property)。只有在取得自定义特性值的情况下,才使用getAttribute() 方法。为什么呢?比如说 style,在通过 getAttribute() 访问时,返回的 style 特性值包含的是 css 文本,而通过属性来访问会返回一个对象。再比如 onclick 这样的事件处理程序,当在元素上使用时,onclick 特性包含的是 Javascript 代码,如果通过 getAttribute() 访问,将会返回相应代码的字符串,而在访问 onclick 属性时,则会返回 Javascript 函数。

    与 getAttribute() 对应的是 setAttribute(),这个方法接受两个参数:要设置的特性名和值。如果特性已经存在,setAttribute()会以指定的值替换现有的值;如果特性不存在,setAttribute() 则创建该属性并设置相应的值。

    而 removeAttitude() 方法用于彻底删除元素的特性。调用这个方法不仅会清除特性的值,而且也会从元素中完全删除特性。

    JavaScript

    div.setAttribute('id', 'someOtherId'); div.setAttribute('title', 'some other text'); div.removeAttribute('class')

    1
    2
    3
    4
    div.setAttribute('id', 'someOtherId');
    div.setAttribute('title', 'some other text');
     
    div.removeAttribute('class')

    其实还有很多种,但是那些都不是很常用,所以就来理解这其中4种就可以了,我们先来看看节点类型,比如如下代码:

    document方法:

    • document.getElementById()
      getElementById方法返回匹配指定id属性的元素节点。如果没有发现匹配的节点,则返回null。
      这个方法只能在document对象上使用,不能在其他元素节点上使用。
    • document.getElementsByTagName()
      document.getElementsByTagName方法返回所有指定HTML标签的元素,返回值是一个类似数组的HTMLCollection对象,可以实时反映HTML文档的变化。如果没有任何匹配的元素,就返回一个空集。不仅可以在document对象上调用,也可以在任何元素节点上调用。
    • docuemnt.getElementsByClassName()
      document.getElementsByClassName方法返回一个类似数组的对象(HTMLCollection实例对象),包括了所有class名字符合指定条件的元素,元素的变化实时反映在返回结果中。不仅可以在document对象上调用,也可以在任何元素节点上调用。
    • document.getElementsByName()
      document.getElementsByName方法用于选择拥有name属性的HTML元素(比如<form>、<radio>、<img>、<frame>、<embed>和<object>等),返回一个类似数组的的对象(NodeList对象的实例),因为name属性相同的元素可能不止一个。
    • document.elementFromPoint
      document.elementFromPoint方法返回位于页面指定位置最上层的Element子节点。

    复制代码 代码如下:

    4、attributes 属性


    Element 类型是使用 attributes 属性的唯一一个 DOM 节点类型。 attributes 属性中包含一个 NamedNodeMap,与 NodeList 类似,也是一个“动态”的集合。元素的每一个特性都由一个 Attr 节点表示,每个节点都保存在 NamedNodeMap 对象中。NamedNodeMap 对象拥有下列方法:

    1. getNamedItem(name): 返回 nodeName 属性等于 name 的节点
    2. removeNamedItem(name): 从列表移除 nodeName 属性等于 name 的节点
    3. setNamedItem(node): 向列表中添加节点,以节点的 nodeName 属性为索引
    4. item(pos): 返回位于数字 pos 位置处的节点

    attributes 属性中包含一系列的节点,每个节点的 nodeName 就是特性的名称,而节点的 nodeValue 就是特性的值。

    JavaScript

    // 取得元素的特性值 var id = element.attributes.getNamedItem('id').nodeValue; var id = element.attributes['id'].nodeValue; // getAttribute() 也能实现一样功能 var id = element.getAttribute('id'); // 与removeAttribute() 方法相比,唯一的区别是能返回表示被删除特性的节点 var oldAttr = element.attributes.removeNamedItem('id'); // 添加新特性 // 需要传入一个特性节点 element.attributes.setNamedItem(newAttr);

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    // 取得元素的特性值
    var id = element.attributes.getNamedItem('id').nodeValue;
    var id = element.attributes['id'].nodeValue;
     
    // getAttribute() 也能实现一样功能
    var id = element.getAttribute('id');
     
    // 与removeAttribute() 方法相比,唯一的区别是能返回表示被删除特性的节点
    var oldAttr = element.attributes.removeNamedItem('id');
     
    // 添加新特性
    // 需要传入一个特性节点
    element.attributes.setNamedItem(newAttr);

    一般来说,由于前面介绍的 attributes 方法不够方便,因此开发人员更多的会使用 getAttribute() removeAttribute() 以及setAttribute() 方法。

    不过如果想要遍历元素的特性,attributes 属性倒是可以派上用场:

    <div id='myDiv' title='hanzichi' class='fish'> </div> <script> var myDiv = document.querySelector('div'); for (var i = 0, len = myDiv.attributes.length; i < len; i ) { var attrName = myDiv.attributes[i].nodeName , attrValue = myDiv.attributes[i].nodeValue; console.log(attrName, attrValue); } // id myDiv // title hanzichi // class fish </script>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <div id='myDiv' title='hanzichi' class='fish'> </div>
    <script>
      var myDiv = document.querySelector('div');
      for (var i = 0, len = myDiv.attributes.length; i < len; i ) {
        var attrName = myDiv.attributes[i].nodeName
          , attrValue = myDiv.attributes[i].nodeValue;
     
        console.log(attrName, attrValue);
      }
     
      // id myDiv
      // title hanzichi
      // class fish
    </script>

    HTML代码如下:

    ES5的方法:

    • document.querySelector()
      document.querySelector方法接受一个CSS选择器作为参数,返回匹配该选择器的元素节点。如果有多个节点满足匹配条件,则返回第一个匹配的节点。如果没有发现匹配的节点,则返回null
    • document.querySelectorAll()
      document.querySelectorAll方法与querySelector用法类似,区别是返回一个NodeList对象,包含所有匹配给定选择器的节点。

    <div class="box" id="box" gameid="880">hello</div>

    5、元素的子节点


    <ul id='myUl'> <li> Item 1 </li> <li> Item 2 </li> <li> Item 3 </li> </ul> <script> var myUl = document.getElementById('myUl'); console.log(myUl.childNodes.length); // IE: 3 其他浏览器: 7 </script>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <ul id='myUl'>
      <li> Item 1 </li>
      <li> Item 2 </li>
      <li> Item 3 </li>
    </ul>
     
    <script>
      var myUl = document.getElementById('myUl');
      console.log(myUl.childNodes.length); // IE: 3   其他浏览器: 7
    </script>

    以上代码,如果是 IE 来解析,那么 <ul> 元素会有 3 个子节点,分别是 3 个 <li> 元素;而如果是其他浏览器解析,则会有 7 个子节点,包括 3 个 <li> 元素 和 4 个文本节点。

    如果像下面这样将元素之间的空白符删除,那么所有浏览器都会返回相同数目的子节点:

    <ul id='myUl'><li> Item 1 </li><li> Item 2 </li><li> Item 3 </li></ul> <script> var myUl = document.getElementById('myUl'); console.log(myUl.childNodes.length); // 所有浏览器: 3 </script>

    1
    2
    3
    4
    5
    6
    <ul id='myUl'><li> Item 1 </li><li> Item 2 </li><li> Item 3 </li></ul>
     
    <script>
      var myUl = document.getElementById('myUl');
      console.log(myUl.childNodes.length); // 所有浏览器: 3
    </script>

     

    打赏支持我写出更多好文章,谢谢!

    打赏作者

    <div id="test">
     <p>aaaaaa</p>
     <p>bbbbbb</p>
     <p>cccccc</p>
    </div>
    

    4.如何创建一个元素?如何给元素设置属性?如何删除属性

    • document.createElement()
      document.createElement方法用来生成网页元素节点。
    var newDiv = document.createElement('div');```
    createElement方法的参数为元素的标签名,即元素节点的tagName属性,对于 HTML 网页大小写不敏感,即参数为div或DIV返回的是同一种节点。如果参数里面包含尖括号(即<和>)会报错。
    

    <body>
    <div id="div1" class='test'>ss</div>
    <script charset="utf-8">
    var body = document.getElementsByTagName('body')//获取节点
    var newDiv = document.createElement('div')//创建元素
    newDiv.setAttribute('id','xxx')//设置属性
    var newContent = document.createTextNode('hello world') //创建文本节点
    body[0].appendChild(newDiv)//插入节点
    newDiv.appendChild(newContent) //插入文本节点
    document.getElementById('div1').removeAttribute('class')//删除属性
    </script>
    </body>```

    上面的div元素的HTML代码中有class、id还有自定义的gameid,这些特性都存放在attributes中,类似下面的形式:

    打赏支持我写出更多好文章,谢谢!

    图片 1

    1 赞 1 收藏 评论

    JS如下:

    5.如何给页面元素添加子元素?如何删除页面元素下的子元素?

    <body>
          <div id="div1" class='test'>div1</div>
          <div id="div2">div2</div>
          <div id="div3">div3</div>
          <div id="div4">div4</div>
          <div id="div5">div5</div>
          <script charset="utf-8">
            var body = document.getElementsByTagName('body')
            var newDiv = document.createElement('div')
            newDiv.setAttribute('id','xxx')
            var newContent = document.createTextNode('hello world') 
            body[0].appendChild(newDiv)//页面元素添加子元素
            newDiv.appendChild(newContent)     
            document.getElementById('div1').removeAttribute('id')
            body[0].removeChild(document.getElementById('div4'))//删除页面元素下的子元素
            document.getElementById('div2').remove()//删除元素本身
          </script>
        </body>```
    # 6.element.classList有哪些方法?如何判断一个元素的 class 列表中是包含某个 class?如何添加一个class?如何删除一个class?
    - className属性用来读写当前元素节点的class属性。它的值是一个字符串,每个class之间用空格分割。
    - classList属性则返回一个类似数组的对象,当前元素节点的每个class就是这个对象的一个成员。
    #### classList对象有下列方法。
    
    >add():增加一个class。
    remove():移除一个class。
    contains():检查当前元素是否包含某个class。
    toggle():将某个class移入或移出当前元素。
    item():返回指定索引位置的class。
    toString():将class的列表转为字符串。
    

    myDiv.classList.add('myCssClass');//添加一个class
    myDiv.classList.add('foo', 'bar');//添加两个class
    myDiv.classList.remove('myCssClass');//删除一个class
    myDiv.classList.toggle('myCssClass'); // 如果myCssClass不存在就加入,存在就移除
    myDiv.classList.contains('myCssClass'); // 返回 true 或者 false
    myDiv.classList.item(0); // 返回第一个Class
    myDiv.classList.toString();//将classList对象转换为字符串与.className效果相同

    # 7.如何选中如下代码所有的li元素? 如何选中btn元素?
    

    <div class="mod-tabs">
    <ul>
    <li>list1</li>
    <li>list2</li>
    <li>list3</li>
    </ul>
    <button class="btn">点我</button>
    </div>
    <script>
    var liAll = document.getElementsByTagName('li')//选中所有li元素生产类数组对象
    var btn = document.getElementsByClassName('btn')//选中btn元素
    </script>

    复制代码 代码如下:

    关于作者:韩子迟

    图片 2

    a JavaScript beginner 个人主页 · 我的文章 · 9 ·    

    图片 3

    var test = document.getElementById("test");
    if(test.nodeType === Node.ELEMENT_NODE) {
     alert(1)
    }
    

    [ class="box", id="box", gameid="880" ]

    如上代码在IE8及以下下是不行的,会报错,如下:

    可以这样来访问attribute节点:

    图片 4

    复制代码 代码如下:

    因为IE没有公开Node类型的构造函数,因此在IE8-下会有错误,但是我们可以通过数值来比较,比如上面的要比较元素节点的话,我们可以使用1来比较,同理属性节点是2,文本节点是3;如下代码:

    var elem = document.getElementById( 'box' );
    console.log( elem.attributes[0].name ); // class
    console.log( elem.attributes[0].value ); // box

    var test = document.getElementById("test");
    // 下面的所有的浏览器都支持
    if(test.nodeType == 1) { 
      alert(1)
    }
    

    但是IE6-7将很多东西都存放在attributes中,上面的访问方法和标准浏览器的返回结果又不同。通常要获取一个attribute节点直接用getAttribute方法:

    理解nodeName与nodeValue

    复制代码 代码如下:

    nodeName保存的是元素的标签名,而nodeValue一般都是null;我们可以看如下代码,没有特殊的说明,HTML代码都是上面的,因此这边就不贴代码了;如下JS代码测试:

    console.log( elem.getAttribute('gameid') ); // 880

    var test = document.getElementById("test");
    if(test.nodeType == 1) {
     console.log(test.nodeName); // 打印DIV
     console.log(test.nodeValue); // 打印null
    }
    

    要设置一个attribute节点使用setAttribute方法,要删除就用removeAttribute:

    理解节点关系

    复制代码 代码如下:

    <!doctype html>
    <html lang="en">
     <head>
     <meta charset="UTF-8">
     <title>Document</title>
     </head>
     <body>
    </body>
    </html>
    

    elem.setAttribute('testAttr', 'testVal');
    console.log( elem.removeAttribute('gameid') ); // undefined

    如上代码,我们可以把head和body是html的子元素,同理html是他们的父级元素,那么head和body就是兄弟元素了,那么head及body里面的就是子元素了,我们需要明白的是每个节点都有一个childNodes属性,其保存的是类似数组的元素,其也有length属性,但是他不是数组Array的实例,比如我们可以看看如下测试代码即可:

    attributes是会随着添加或删除attribute节点动态更新的。
    property就是一个属性,如果把DOM元素看成是一个普通的Object对象,那么property就是一个以名值对(name=”value”)的形式存放在Object中的属性。要添加和删除property也简单多了,和普通的对象没啥分别:

    <div id="test">
     <p>aaaaaa</p>
     <p>bbbbbb</p>
     <p>cccccc</p>
    </div>
    

    复制代码 代码如下:

    JS代码如下:

    elem.gameid = 880; // 添加
    console.log( elem.gameid ) // 获取
    delete elem.gameid // 删除

    var test = document.getElementById("test");
    if(test.nodeType == 1) {
     console.log(test.childNodes);
     console.log(test.childNodes.length);
    }
    

    之所以attribute和property容易混倄在一起的原因是,很多attribute节点还有一个相对应的property属性,比如上面的div元素的id和class既是attribute,也有对应的property,不管使用哪种方法都可以访问和修改。

    如上代码,在标准浏览器下及IE9 下 第一行打印如下:

    复制代码 代码如下:

    [text, p, text, p, text, p, text, item: function]

    console.log( elem.getAttribute('id') ); // box
    console.log( elem.id ); // box
    elem.id = 'hello';
    console.log( elem.getAttribute('id') ); // hello

    第二行打印7 长度为7,因为他们把文本节点那个空格也包括进去了,但是在IE8及以下,长度为3,他们不包括文本空格的节点,因此想要统一的话,我们可以编写HTML代码去掉空格,如下HTML代码即可;

    但是对于自定义的attribute节点,或者自定义property,两者就没有关系了。

    <div id="test"><p>aaaaaa</p><p>bbbbbb</p><p>cccccc</p></div>

    复制代码 代码如下:

    这个问题稍后在仔细考虑,我们现在来看看如何取得子元素,我们可以使用2种方法,第一种是使用中括号[index]索引,第二种是使用item[index]索引,如下代码:

    console.log( elem.getAttribute('gameid') ); // 880
    console.log( elem.gameid ); // undefined
    elem.areaid = '900';
    console.log( elem.getAttribute('areaid') ) // null

    console.log(test.childNodes[1]); // <p>bbbbbb</p>
    console.log(test.childNodes.item(1)); // <p>bbbbbb</p>

    对于IE6-7来说,没有区分attribute和property:

    但是他们并不是数组,我们可以测试下代码即可,如下代码:

    复制代码 代码如下:

    console.log(Object.prototype.toString.call(test.childNodes) === "[object Array]");
    // false但是我们使其转换为数组,如下代码:

    console.log( elem.getAttribute('gameid') ); // 880
    console.log( elem.gameid ); // 880
    elem.areaid = '900';
    console.log( elem.getAttribute('areaid') ) // 900

    //在IE8 及之前版本中无效
    var arrayOfNodes = Array.prototype.slice.call(test.childNodes,0);
    console.log(arrayOfNodes instanceof Array);

    很多新手朋友估计都很容易掉进这个坑中。
    DOM元素一些默认常见的attribute节点都有与之对应的property属性,比较特殊的是一些值为Boolean类型的property,如一些表单元素:

    // true不过在IE8及之前不生效;由于IE8及更早版本将NodeList实现为一个COM对象,而我们不能像使用JScript对象那样使用对象,要想在IE低版本中转换为Array的形式,我们可以像下面一样封装一个方法即可;

    复制代码 代码如下:

    function convertToArray(nodes){
     var array = null;
     try {
      array = Array.prototype.slice.call(nodes, 0); //针对非IE 浏览器
     } catch (ex) {
      array = new Array();
      for (var i=0, len=nodes.length; i < len; i  ){
       array.push(nodes[i]);
      }
     }
     return array;
    }
    var test = document.getElementById("test");
    var testArray = convertToArray(test.childNodes);
    console.log(testArray instanceof Array); // true
    

    <input type="radio" checked="checked" id="raido">
    var radio = document.getElementById( 'radio' );
    console.log( radio.getAttribute('checked') ); // checked
    console.log( radio.checked ); // true

    理解parentNode(父节点),previousSibling(上一个兄弟节点),nextSibling(下一个兄弟节点);

    对于这些特殊的attribute节点,只有存在该节点,对应的property的值就为true,如:

    每个节点都有一个parentNode属性,该属性指向文档中父节点,previousSibling是指当前节点的上一个同胞节点,nextSibling是指当前节点的下一个同胞节点,比如如下代码:

    复制代码 代码如下:

    <div id="test"><p>aaaaaa</p><p>bbbbbb</p><p>cccccc</p></div>
    var test = document.getElementById("test");
    if(test.nodeType == 1) {
     var secodeChild = test.childNodes[1];
     console.log(secodeChild); // <p>bbbbbb</p>
     console.log(secodeChild.previousSibling); // <p>aaaaaa</p>
     console.log(secodeChild.nextSibling); // <p>cccccc</p>
    }
    

    <input type="radio" checked="anything" id="raido">
    var radio = document.getElementById( 'radio' );
    console.log( radio.getAttribute('checked') ); // anything
    console.log( radio.checked ); // true

    如果该节点列表中只有一个节点的话,那么该节点的previousSibling和nextSibling都为null;父节点的firstChild指向了父节点中第一个节点;如下代码:

    最后为了更好的区分attribute和property,基本可以总结为attribute节点都是在HTML代码中可见的,而property只是一个普通的名值对属性。

    <div id="test"><p class="a">aaaaaa</p><p class="b">bbbbbb</p><p class="c">cccccc</p></div>

    复制代码 代码如下:

    JS如下:

    // gameid和id都是attribute节点
    // id同时又可以通过property来访问和修改
    <div gameid="880" id="box">hello</div>
    // areaid仅仅是property
    elem.areaid = 900;

    var test = document.getElementById("test");
    if(test.nodeType == 1) { 
     console.log(test.firstChild); // <p class="a">aaaaaa</p>
     console.log(test.lastChild); // <p class="c">cccccc</p>
    }
    

    ...

    父节点的firstChild始终等于父节点的.childNodes[0],父节点的lastChild始终等于父节点的.childNodes[父节点的.childNodes.length

    • 1]; 如下代码:
    console.log(test.firstChild === test.childNodes[0]); // true
    console.log(test.lastChild === test.childNodes[test.childNodes.length - 1]); // true
    

    如果没有子节点的话,那么firstChild和lastChild都指向为空null;

    hasChildNodes():如果需要判断该父节点有没有子节点的话,可以使用该方法判断,返回的是一个布尔型,有返回true,没有返回false,如下代码:

    <div id="test"><p class="a">aaaaaa</p><p class="b">bbbbbb</p><p class="c">cccccc</p></div>

    JS代码如下:

    var test = document.getElementById("test");
    console.log(test.hasChildNodes());

    // true如果是如下的 就返回false;如下代码:

    <div id="test"></div>
    var test = document.getElementById("test");
    console.log(test.hasChildNodes()); // false

    ownerDocument: 所有节点都有最后一个属性是ownerDocument,该属性指向表示整个文档的文档节点,这种关系表示的任何节点都属于它所在的文档,任何节点都不能同时存在两个或更多文档中,通过这个属性,我们可以不必在节点层次中通过层层回溯到达顶端,而是可以直接访问文档节点;如下测试代码:

    <div id="test">
     <p class="a">11</p>
    </div>
    var test = document.getElementById("test");
    console.log(test.ownerDocument); // document
    var p = test.ownerDocument.getElementsByTagName("p");
    console.log(p); // <p class="a">11</p>
    

    appendChild(): 用于向childNodes列表的末尾添加一个节点;返回的是新增加的节点;如下代码:

    <div id="test">
    <p class="a">11</p>
    </div>

    JS代码如下:

    var test = document.getElementById("test");
    var newNode = document.createElement("p");
    var returnNode = test.appendChild(newNode);
    console.log(returnNode); // <p></p>
    console.log(returnNode === newNode); // true
    console.log(test.lastChild === newNode); // true
    

    insertBefore(): 该方法是将新节点插入到指定的节点的前面去,该方法接收2个参数,要插入的节点和作为参照的节点;插入节点后,被插入的节点会变成参照节点的前一个同胞节点,同时被方法返回,如下代码:

    <div id="test">
    <p class="a">11</p>
    </div>

    JS代码如下:

    var test = document.getElementById("test");
    var newNode = document.createElement("div");
    var returnNode = test.insertBefore(newNode,test.childNodes[0]);
    console.log(returnNode); // <div></div>
    console.log(returnNode === newNode); // true
    

    插入节点后,结构变成如下:

    复制代码 代码如下:

    <div id="test">
    <div></div>
    <p class="a">11</p>
    </div>

    但是如果参照节点为null的话,那么就会把新节点插入到最后面去了,如下代码:

    复制代码 代码如下:

    var test = document.getElementById("test");
    var newNode = document.createElement("div");
    var returnNode = test.insertBefore(newNode,null);

    插入后HTML结构如下:

    复制代码 代码如下:

    <div id="test">
        <p class="a">11</p>
        <div></div>
    </div>

    我们还可以更深入的看下如下测试代码:

    var test = document.getElementById("test");
    var newNode = document.createElement("div");
    // 插入后成为最后一个节点
    var returnNode = test.insertBefore(newNode,null);
    console.log(returnNode === test.lastChild); // true 
    // 插入后成为第一个节点
    var returnNode = test.insertBefore(newNode,test.firstChild);
    console.log(returnNode === newNode); // true
    console.log(newNode === test.firstChild); // true
    // 插入到最后一个子节点的前面
    var returnNode = test.insertBefore(newNode,test.lastChild);
    console.log(returnNode === test.childNodes[test.childNodes.length - 2]); // true
    

    replaceChild(); 该方法接收2个参数,要插入的节点和要替换的节点,要替换的节点将由这个方法返回并从文档树中被移除,同时由插入的节点占据其位置,如下代码:

    <div id="test"><p class="a">11</p><p class="b">22</p></div>

    JS代码如下:

    var test = document.getElementById("test");
    var newNode = document.createElement("div");
    // 替换第一个节点
    var returnNode = test.replaceChild(newNode,test.firstChild);
    console.log(returnNode); // <p class="a">11</p>
    

    替换后html代码结构变为如下:

    <div id="test"><div></div><p class="b">22</p></div>

    替换最后一个节点代码如下:

    var test = document.getElementById("test");
    var newNode = document.createElement("div");
    // 替换最后一个节点
    var returnNode = test.replaceChild(newNode,test.lastChild);
    console.log(returnNode); // <p class="b">22</p>
    

    替换后的代码如下:

    <div id="test"><p class="a">11</p><div></div></div>removeChild():移除节点,该方法接收一个参数,即要移除的节点;

    被移除的节点将成为返回值,如下代码:

    本文由1010cc时时彩经典版发布于1010cc时时彩客户端,转载请注明出处:您所不驾驭的javascript操作DOM的内幕知识点,Ele

    关键词: