childNodes节点解释

  • 作者:村长
  • 发布时间:2020-05-08 13:37
  • 分类:JavaScript
  • 标签: 热门推荐

DOM中节点的类型


DOM中一共有12中类型。但是我们常用的只有几种。

首先我们了解下DOM中一般常见的节点类型有哪些?

1、元素节点

DOM中的原子都是元素节点,比如<body><table><div>等等。

如果把Web上的文档比作一座大厦,则元素就是构成这块大厦的砖石。一个文档是由N个元素组成的。元素可包含其他元素。

2、文本节点

任意的文字、空格、换行、空白行都算是文本节点。

3、属性节点

属性节点,故名思议就是其他节点的属性。例如所有的元素都有title属性,在title='title1'就是一个属性节点。

4、注释节点

就是注释了。


由childNodes属性返回的数组中包含着所有类型的节点,所有的属性节点和文本节点也包含在其中。

文档里几乎每一样东西都是一个节点,甚至连空格和换行符都会被解释成节点。而且都包含在childNodes属性所返回的数组中。

 

chidNoeds返回的事node的集合,

每个node都包含有nodeType属性。

nodeType取值:

元素节点:1

属性节点:2

文本节点:3

注释节点:8

 

如果要获取子元素的节点,需要使用 对象.nodeType==1判断是元素节点再获取该元素。

使用方法:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>节点的使用</title>
</head>
<body>
    <div id="box">
        <ul>
            <li>哈哈</li>
            <li>2222</li>
        </ul>
    </div>
    <input type="button" value="父节点添加样式" onclick="addParent()">
    <input type="button" value="子节点添加样式" onclick="addChild()">
    <script>
        var box = document.getElementById("box");
        function addParent()
        {
            box.parentNode.style.background = "tomato";
        }
        function addChild()
        {
            var length = box.childNodes.length;
            var lis = box.childNodes;
            for(var i=0;i<length;i++)
            {
                if(lis[i].nodeType == 1)
                {
                    lis[i].style.color = "red";
                }
            }
        }
    </script>
</body>
</html>


  • php程序员面试笔试宝典
琉忆编程库
加载中...
TOP