文档树

2019-05-10 本文已影响0人椋椋夜色
<!DOCTYPE html>
<html lang="zh-CN">
</head>
<body>
文档：document，网页中的所有内容其实都是在document里面

所有内容都是document开枝散叶而来，这种关系像树一样，所以我们把它称之为文档树

如果我要给body里面再加一个a标签，其实只是相当于在body这个分支下面再挂一个分支a

节点：网页中的所有内容都叫节点。 标签、属性、文本、注释都叫内容，这些内容都称之为节点
元素：其实就是标签


节点有三大属性（三大特征）
nodeType：节点类型
nodeName：节点名字
nodeValue：节点值

元素节点的特征
nodeType：1
以后如果我拿到一个节点，我不知道它是什么，就可以判断它的nodeType是否为1，如果为1，就代表是标签

nodeName：大写的标签名
以后我拿到一个节点，我确定它是一个标签，但是不知道是哪个标签，就可以通过nodeName来判断

nodeValue：null 


<div class="box">我是div1</div>

<div id="box" class="boxcc">我是div2</div>

<ul>
    我是文字
    <!-- 我是注释 -->
    <li>隔壁老王1</li>
    <li>隔壁老王2</li>
    <li>隔壁老王3</li>
    <li>隔壁老王4</li>
    <li>隔壁老王5</li>
</ul>

<script>
    // 元素节点
    var box = document.getElementsByClassName('box')[0];
    /*
           元素节点的特征
             nodeType：1
             以后如果我拿到一个节点，我不知道它是什么，就可以判断它的nodeType是否为1，如果为1，就代表是标签

             nodeName：大写的标签名
             以后我拿到一个节点，我确定它是一个标签，但是不知道是哪个标签，就可以通过nodeName来判断

             nodeValue：null
     */
    console.log(box.nodeType); //1
    console.log(box.nodeName); //DIV
    console.log(box.nodeValue); //null



    // 属性节点
    var box = document.getElementById('box');
    // 这个仅仅只是拿到属性值
    // console.log(box.id);


    /*        属性节点的节点特征：
              nodeType: 2
              nodeName：属性名
              nodeValue：属性值
     */

    // 拿属性需要用 attibutes
    console.log(box.attributes[0].nodeType); //2
    console.log(box.attributes[0].nodeName); //属性名 id (小写)
    console.log(box.attributes[0].nodeValue); //属性值 box


    //文本节点  //找到ul
    var ul = document.getElementsByTagName('ul')[0];

    // 拿文本节点不能直接拿到， 只通过它所在的父元素拿到
    // childNodes： 拿到子节点

    // 文本特征：
    // nodeType: 3
    // nodeName: #text
    // nodeValue: 文本内容

    console.log(ul.childNodes[0].nodeType); //3
    console.log(ul.childNodes[0].nodeName); //#text
    console.log(ul.childNodes[0].nodeValue); //文本的内容


    // 注释节点 ,找到ul
    var ul = document.getElementsByTagName('ul')[0];
    console.log(ul.childNodes);

    // 注释特征：
    // nodeType: 8
    // nodeName: #comment
    // nodeValue:注释的内容

    console.log(ul.childNodes[1].nodeType); //8
    console.log(ul.childNodes[1].nodeName); //#comment
    console.log(ul.childNodes[1].nodeValue); //注释的内容

    // 找特殊元素
    // document.documentElement 找html
    // document.body 找body
    // document.head 找head

    // document：就是文档

    // 节点特征：
    // nodeType:9
    // nodeName:#document
    // nodeValue:null

    // 找特殊元素
    console.log(document.body.nodeType); //1
    console.log(document.body.nodeName); //BODY
    console.log(document.body.nodeValue); //null


    //document.documentElement拿到html
    console.log(document.documentElement.nodeType); //1
    console.log(document.documentElement.nodeName); //HTML
    console.log(document.documentElement.nodeValue); //null

    //document.head找head
    console.log(document.head.nodeType); //1
    console.log(document.head.nodeName); //HEAD
    console.log(document.head.nodeValue); //null

    // document
    console.log(document.nodeType); //9
    console.log(document.nodeName); //#document
    console.log(document.nodeValue); //null
</script>
</body>
</html>
文档树

猜你喜欢

热点阅读
