通过易入门JavaScript28-节点cha询

什么叫易 · 发表于 2020-2-16 08:21:47

在线观看

节点属性

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

nodeName : 节点的名称
nodeValue ：节点的值
nodeType ：节点的类型

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

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

二、nodeValue 属性：节点的值

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

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

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

查找节点方法

document.getElementById(id);//通过id查找元素
document.getElementsByClassName();//通过类名查找元素集合
document.getElementsByTagName();//通过标签名查找集合
document.getElementsByName();//通过name属性查找集合

//以下属性带有Element的不兼容IE8及以下。
innerHTML//当前节点内的HTML代码
innerText//当前节点内的文本节点
//-------子节点
childNodes;//当前节点的所有子节点
children;//当前节点的所有子元素节点
firstChild;//当前节点的第一个子节点
firstElementChild;//当前节点的第一个子元素节点
lastChild;//当前节点的最后一个子节点
lastElementChild;//当前节点的最后一个子元素节点
//-------父节点
parentNode   
parentElement//以上两个属性都是获取父节点。这里没什么区别，因为父节点不会是空白。
//-------兄弟节点
previousSibling//上一个兄弟节点
previousElementSibling//上一个兄弟元素
nextSibling//下一个兄弟节点
nextElementSibling//下一个兄弟元素节点

任务1

找这个列表的第一个子元素

任务2

找这个列表的第二个子元素

任务3

找这个列表的第二个子元素的后两个子元素

网页代码：

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #list {
            margin-top: 10px;
            margin-left: 10px;
            width: 400px;
            height: 700px;
            border: 1px solid black;
            overflow: auto;
            user-select: none;
        }

        .items {
            display: flex;
            margin: 5px;
            border: 1px solid black;
        }

        .items img {
            width: 120px;

        }

        #btn_add {
            position: absolute;
            top: 10px;
            left: 450px;
        }
    </style>

</head>

<body>
    <ul id="list">
        <li class="items">
            <img src="touxiang.jpg" alt="">
            <div class="right">
                <h2>项目标题</h2>
                <p>详情信息详情信息详情信息详情信息详情信息详情信息</p>
            </div>
        </li>
        <li class="items">
            <img src="touxiang.jpg" alt="">
            <div class="right">
                <h2>项目标题</h2>
                <p>详情信息详情信息详情信息详情信息详情信息详情信息</p>
            </div>
        </li>
        <li class="items">
            <img src="touxiang.jpg" alt="">
            <div class="right">
                <h2>项目标题</h2>
                <p>详情信息详情信息详情信息详情信息详情信息详情信息</p>
            </div>
        </li>
        <li class="items">
            <img src="touxiang.jpg" alt="">
            <div class="right">
                <h2>项目标题</h2>
                <p>详情信息详情信息详情信息详情信息详情信息详情信息</p>
            </div>
        </li>
    </ul>
    <script>
        var ul = document.getElementById("list");
        // 任务1
        // 找这个列表的第一个子元素
        // console.log(ul.firstChild);
        // console.log(ul.firstElementChild);
        // 任务2
        // 找这个列表的第二个子元素
        // var x = 3;//表示获取第几个
        // console.log(ul.childNodes[x*2-1]);

        // 任务3
        // 找这个列表的第二个子元素的下下个子元素
        // var li2 = ul.children[1]
        // console.log(li2.nextElementSibling.nextElementSibling);

    </script>
</body>

</html>

847950462 · 发表于 2020-2-27 21:57:28

感谢分享

xuxuand · 发表于 2020-2-26 15:25:44

666666666777

l6161922 · 发表于 2020-2-16 21:23:46

学习一下学习一下

		自动登录	找回密码
密码			注册

[转载教程] 通过易入门JavaScript28-节点cha询

在线观看

节点属性

查找节点方法