• DOM节点


    childNodes表示的就是孩子的意思,其中需要注意的几点是:

    1.table和ul的区别

    <!DOCTYPE HTML>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>无标题文档</title>
    </head>
    <body>
    <div>
        <table border='1'>
            <tr><td>111</td><td>111</td></tr>
            <tr><td>222</td><td>222</td></tr>
            <tr><td>333</td><td>333</td></tr>
        </table>
    
        <ul>
            <li>1111</li>
            <li>2222</li>
            <li>3333</li>
        </ul>
    
        <div id="a">
            <p></p>
            <a></a>
        </div>
        
    </div>
    <script type="text/javascript">
        window.onload = function(){
            var table = document.getElementsByTagName("table")[0].childNodes;
            console.log(table[0].nodeName);//#text
            console.log(table[1].nodeName);//TBODY
            console.log(table[2].nodeName);//报错,因为已经超出界限了
            console.log(table.length);//2
    
            var ul = document.getElementsByTagName("ul")[0].childNodes;
            console.log(ul[0].nodeName);//#text
            console.log(ul[1].nodeName);//LI
            console.log(ul[2].nodeName);//#text
            console.log(ul[3].nodeName);//LI
            console.log(ul.length);//7
    
    
            var a = document.getElementById("a").childNodes;
            console.log(a[1].nodeName);//#text
            console.log(a[1].nodeName);//P
            console.log(a[2].nodeName);//A
            console.log(a[3].nodeName);//超出界限
        }
        //从上面的实例我们可以看出,table和ul是不一样的,table其实就相当于<table><tbody></tbody></table>,
        // 所以table[0]是文本,table[0].nodeName为#text;table[1]就是tbody,table[1].nodeName为TBODY;
        // 而ul就不一样,ul[0]为文本,ul[1]为li,ul[2]为文本,ul[3]为li
    
    
    </script>
    </body>
    </html>
    View Code

    2.节点属性

    在文档对象模型 (DOM) 中,每个节点都是一个对象。DOM 节点有三个重要的属性 :

    1. nodeName : 节点的名称

    2. nodeValue :节点的值

    3. nodeType :节点的类型

    一、nodeName 属性: 节点的名称,是只读的。

    1. 元素节点的 nodeName 与标签名相同
    2. 属性节点的 nodeName 是属性的名称
    3. 文本节点的 nodeName 永远是 #text
    4. 文档节点的 nodeName 永远是 #document

    二、nodeValue 属性:节点的值

    1. 元素节点的 nodeValue 是 undefined 或 null
    2. 文本节点的 nodeValue 是文本自身
    3. 属性节点的 nodeValue 是属性的值

    三、nodeType 属性: 节点的类型,是只读的。以下常用的几种结点类型:

    元素类型    节点类型
      元素          1
      属性          2
      文本          3
      注释          8
      文档          9

  • 相关阅读:
    [汇编] 基础知识
    最长回文子串(1)
    整数分解为2的幂
    位数阶乘
    change log
    SEO简介
    http请求过程
    ES6新增特性——Promise
    rem在移动端的应用
    js截取字符串操作slice、substring 、substr
  • 原文地址:https://www.cnblogs.com/fireporsche/p/6305694.html
Copyright © 2020-2023  润新知