JS基础入门篇(二十四)—DOM(上)

1.常用的节点类型,nodeType,attributes,childNodes。

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

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

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

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

举例说明,以下是全部代码:

<!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集合.

举例说明,可以把代码粘贴,自己运行看看:

<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

兄弟关系

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

举例说明,可以把代码粘贴,自己运行看看:

<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 最后一个子级

举例说明,可以把代码粘贴,自己运行看看:

<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>
    原文作者:梁志芳
    原文地址: https://segmentfault.com/a/1190000015277584
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞