JS基础入门篇（二十四）—DOM（上）

时间 2019-11-11

原文原文链接

1.经常使用的节点类型，nodeType，attributes，childNodes。

1.元素节点 - 1
2.属性节点 - 2
3.文本节点 - 3
4.注释节点 - 8
5.文档节点 - 9

查看节点类型
    node.nodeType(返回的是数字)

属性节点
    元素.attributes(获取的是集合)
    元素.attributes[0]

经过元素.childNodes获取子节点
    childNodes 获取到的是一个集合
        集合中 包含了 元素的 全部子节点
            其中有 元素 子节点 ,注释,文本节点...

举例说明，如下是所有代码：html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 100px;
            height: 100px;
            background: red;
        }

    </style>
</head>
<body>
    <div id="box" class="content">
        <div id="inner">inner</div>
        一句话
        <!--这里是注释-->
    </div>
    <script>
        var box=document.getElementById("box");
        console.log(box.nodeType);//1
//--------------------------------------------
        console.log(box.attributes);
        console.log(box.attributes[0]);//id="box"
        console.log(box.attributes[1]);//class="content"
        console.log(box.attributes[0].nodeType);//2
//--------------------------------------------
        console.log(box.childNodes);
        console.log(box.childNodes[0]);//#text 这里指的是box所指的div和inner所指的div换行之间的内容，就是不少个空格，计算机认定为文本。
        console.log(box.childNodes[0].nodeType);// 3
        console.log(box.childNodes[3].nodeType);// 8
    </script>
</body>
</html>

2.nodeName

<body>
    <div id="box" class="content">
        <div id="inner">inner</div>
        <p>一句话</p>
        <!--这里是注释-->
    </div>
    <script>
        var box = document.getElementById("box");
        var p=document.getElementsByTagName("p")[0];
        console.log(box.nodeName);//DIV
        console.log(p.nodeName);//P
//----------------------------------------------------
        console.log(box.childNodes[0].nodeName);//#text
        console.log(box.childNodes[5].nodeName);//#comment
//----------------------------------------------------
        console.log(document.nodeName);//#document
    </script>
</body>

3.parentNode,children,childNodes

node.parentNode：找到node的父节点
children：获取节点的一级的元素子节点，只获取元素，返回的是HTMLCollection集合。
childNodes：获取节点的一级子节点，可能获取到元素节点，文本节点，注释节点等，返回的是Nodelist集合.node

举例说明，能够把代码粘贴，本身运行看看：code

<body>
<!--
    node.parentNode 父节点
    children 获取节点的一级的元素子节点，返回的是集合
    childNodes 获取节点的子节点，可能获取到元素节点，文本节点，注释节点，返回的是集合
-->
<div id="wrap">
    <div id="content">
        <div id="inner"></div>
    </div>
    <p>p</p>
    一句话
</div>
<script>
    var content=document.getElementById("content");
    console.log(content.parentNode);
    console.log(content.parentNode.parentNode);
    console.log(content.parentNode.parentNode.parentNode);
    console.log(content.parentNode.parentNode.parentNode.parentNode);
//-----------------------------------------------------------------------
    console.log(content.childNodes);//NodeList(3) [text, div#inner, text]    
    console.log(content.children);//HTMLCollection [div#inner]
</script>
</body>

4.node.previousElementSibling和node.nextElementSibling

兄弟关系htm

node.previousElementSibling 上一个元素兄弟节点
    node.nextElementSibling 下一个元素兄弟节点

举例说明，能够把代码粘贴，本身运行看看：ip

<body>
<ul id="list">
    <li>1</li>
    <li id="item">2</li>
    <li>3</li>
    <li>4</li>
</ul>
<script>
    var list = document.getElementById("list");
    var item = document.getElementById("item");
    console.log(list.previousElementSibling);//null 由于是嵌套关系，因此没有上一个兄弟节点
    console.log(item.previousElementSibling);//<li>1</li>
    console.log(item.nextElementSibling);//<li>3</li>
    console.log(item.nextElementSibling.nextElementSibling);//<li>4</li>
</script>
</body>

5.node.firstElementChild和node.lastElementChild

嵌套关系文档

node.previousElementSibling 第一个子级
    node.nextElementSibling 最后一个子级

举例说明，能够把代码粘贴，本身运行看看：get

<body>
<div id="wrap">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>
<script>
    var wrap = document.getElementById("wrap");
    console.log( wrap.firstElementChild );//<div>1</div>
    console.log( wrap.lastElementChild );//<div>4</div>
</script>
</body>