DOM节点、自定义节点、操作元素节点属性、类名。操作元素节点的样式、通过接点关系获取节点

DOM节点

我们的页面是由节点组成的，每一个组成部分都是一个节点。

节点的分类：

元素节点 html标签 img body input div

文本节点文字部分

属性节点标签内的属性

注释节点

1.document
页面中最大的节点，有且只有一个。不属于元素节点，是页面中所有节点的容器。根节点。

2.html
页面中最大的元素节点。根元素节点。

3.元素节点
html标签

4.文本节点
每一段文本内容都是一个文本节点
包含换行和空格
一般来说作为元素节点的子节点存在。

5.属性节点：
属性节点不能单独存在，必须依赖于元素节点。

6.注释节点
页面中的注释，作为说明文本使用户。

自定义节点获取方法

 <script>
        /**
        node 表示传入的节点，获取该节点的元素节点。
        classStr 表示传入的classname ，通过classname匹配元素节点
        */
        function elementsByClassName(node,classStr){
    
    
            // 1.获取node这个节点下面的所有子节点。
            var nodes = node.getElementsByTagName("*");
            // 2.存放符合条件的节点
            var arr = [];
            //3.遍历所有的子节点
            for (var i = 0; i < node.length; i++) {
    
    
                //4.判断子节点的class是否与传入的classStr相等
               if(nodes[i].className === classStr){
    
    
                   //5.若相等，则将其放入数组中。
                   arr.push(nodes[i]);
               }
            }
            return arr;
        }
    </script>

操作元素节点的属性

标签上的属性分类：

1.原生属性

2.自定义属性

3.H5 自定义属性

1.原生属性

语法：元素.属性名

修改/新增：

元素.属性名 = “值”

在这里插入图片描述

获取：

元素.属性名

【注意】class属性是例外，不能直接通过属性名获取，而是用className

在这里插入图片描述

2.自定义属性

不能直接使用元素. 这个语法来获取。
三个方法去操作：

1、获取
getAttribute(“属性名”);
返回值：字符串

<body>
    <div class="box" id="box2" data-name="BOXNAME" abc="box3">我是div标签</div>
</body>

在这里插入图片描述

2、设置
setAttribute(“属性名”,“属性值”）

<body>
    <div class="box" id="box2" data-name="BOXNAME" abc="box3">我是div标签</div>
</body>

在这里插入图片描述

3、删除
removeAttribute(“属性名”)

<body>
    <div class="box" id="box2" data-name="BOXNAME" abc="box3">我是div标签</div>
</body>

在这里插入图片描述

【注意】这三个方法也可以操作原生属性

3.H5 自定义属性

每一个元素节点上都有一个属性：dataSet

里面包含了所有的H5自定义属性。

键值对结构：例子;data-id =“idBox”
key：data-XXX xxx的内容。
value:属性值

获取：
元素.dataset.key

<body>
    <div class="box" id="box2" abc="box3">我是div标签</div>
</body>

在这里插入图片描述

设置：
元素.dataset.key = “值”

<body>
    <div class="box" id="box2" abc="box3">我是div标签</div>
</body>

在这里插入图片描述

删除
delete 元素.dataset.key
在这里插入图片描述

操作元素的类名

1。按照原生属性的方式来操作

获取：

元素.className

在这里插入图片描述

设置：
元素.className = “值”
在这里插入图片描述

追加：
元素.className += " 值";
在这里插入图片描述

【注意】追加时，值的前面要加一个空格。

删除：
1.重新设置一遍。
2.
2.1 获取classname属性值、
2.2 按照空格去分割字符串
2.3 遍历数组，将要删除的字符串删除
2.4 数组的join方法

2.H5标准给我们一个API

元素节点都有一个属性叫做：classList
里面包含了所有的class值。

获取：
元素.classList 获取class值的集合。
想要获取单个，使用下标。
在这里插入图片描述

新增：
元素.classList.add(“新增的类名”)
在这里插入图片描述

删除：
元素.classList.remove(“删除的类名”)
在这里插入图片描述

替换：

元素.classList.replace(“旧类名”,“新类名”) ;
在这里插入图片描述

toggle() 切换
语法：元素.classList.toggle(“类名”)
当元素拥有这个类名时，将类名删除
在这里插入图片描述

当元素没有这个类名时，将类名添加

在这里插入图片描述

全选框

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
     
     
            margin: 0;
            padding: 0;
        }
        
        .box {
     
     
            width: 160px;
            padding: 5px;
            border: 1px solid #333;
            margin: 100px auto 0px;
        }
        
        .box>div {
     
     
            padding: 15px;
        }
    </style>
    <!-- 
        需求分析：
            1.点击全选时，让所有的按钮都选中  若全选已经选中，则是全不选
            2.点击单个的复选框时，判断，若全部都已选中，全选则应该选中，否则不选中。
        
     -->
    <script>
        window.onload = function() {
     
     

            //1.获取全选和选项
            var allBtn = document.querySelector(".all>input");
            var itemBtns = document.querySelectorAll(".items>input");
            // console.log(allBtn.checked);   
            allBtn.onclick = function() {
     
     
                    // 2.获取all本身的选中状态,遍历item,将值赋值给所有的item
                    for (var i = 0; i < itemBtns.length; i++) {
     
     
                        itemBtns[i].checked = allBtn.checked;
                    }
                }
                // 3.给itemBtn 添加点击事件，每次点击时判断是否已经全部选中
            for (var i = 0; i < itemBtns.length; i++) {
     
     
                itemBtns[i].onclick = function() {
     
     
                    //    4.定义一个变量，假设所有的item都已经选中
                    var flag = true;
                    for (var j = 0; j < itemBtns.length; j++) {
     
     
                        // 5.当item未选中时
                        if (!itemBtns[j].checked) {
     
     
                            flag = false;
                            break;
                        }
                    }
                    allBtn.checked = flag;
                }
            }
        }
    </script>
</head>

<body>
    <div class="box">
        <div class="all">
            全选：<input type="checkbox">
        </div>
        <hr>
        <div class="items">
            选项一：<input type="checkbox"><br> 选项一：
            <input type="checkbox"><br> 选项一：
            <input type="checkbox"><br> 选项一：
            <input type="checkbox"><br>
        </div>
    </div>
</body>

</html>

在这里插入图片描述

操作元素节点的样式

元素节点的样式：

样式分为：

行内

内嵌

外链

行内样式：

原生属性的方式获取

元素.style.样式的属性名
在这里插入图片描述

【注意】如果属性名是多个单词，第二个单词首字母大写，删除中划线。

该方法只能获取行内。

获取元素的有效样式

标准浏览器：

getComputedStyle(要获取样式的元素)

IE低版本：（IE8以下）

元素.currentStyle.样式属性名 box.currentStyle.width

设置样式

语法：元素.style.样式名 = “值”;

 <style>
        #box {
     
     
            width: 200px;
        }
    </style>
    <script>
        window.onload = function() {
     
     
                var box = document.getElementById("box");
                //console.log(box.style.width); //原声元素获取方式

                // console.log(getComputedStyle(box).width); // 标准浏览器获取样式

                // console.log(box.currentStyle["width"]); //  IE低版本获取样式

                // console.log(getStyle(box, "width")); //获取元素的宽度


                //点击变色按钮时，背景图颜色改变
                btn.onclick = function() {
     
     
                    box.style.backgroundColor = "blue";
                }
            }
            //  node 要获取样式的元素节点  cssStyle 要获取样式的属性名
        function getStyle(node, cssStyle) {
     
     
            return node.currentStyle ? node.currentStyle[cssStyle] : getComputedStyle(node)[cssStyle];
        }
    </script>
</head>

<body>
    <button id="btn">变色</button>
    <div id="box" style="height: 100px;background-color: hotpink;"></div>
</body>

属性节点

属性节点：

获取元素节点的属性节点

元素.attributes

在这里插入图片描述

单个属性节点：

元素.attributes.getNamedItem(“属性名”)；
在这里插入图片描述

通过节点关系获取节点

DOM节点不是孤立存在，我们可以通过节点之间的关系去获取他们。
节点的关系，是以属性的方式存在的。

获取父节点。

节点.parentNode
在这里插入图片描述

获取兄弟节点

1.下一个节点

node.nextSibling
在这里插入图片描述

对于标准浏览器，标签，空文档，换行都属于节点。

IE低版本：指下一个元素节点。

2.下一个元素节点

node.nextElementSibling
在这里插入图片描述

下一个兄弟节点 = 节点.nextElementSibling||节点.nextSibling

3.上一个节点
node.previousSibling

4.上一个元素节点
node.previousElementSibling

获取单个子节点

1.第一个子节点

node.firstChild

2.获取第一个元素节点

node.firstElementChild

3.获取最后一个子节点

node.lastChild

4.获取最后一个元素节点

node.lastElementChild

获取所有子节点

1.获取所有子节点

语法：node.childNodes

返回的是子节点的伪数组（元素节点，文本节点，注释节点）

2.获取所有的元素子节点

语法：node.children

返回元素节点。使用最多的方法。
在这里插入图片描述

节点的属性

属性：事物的特征

nodeName: 节点名称

注释节点： #comment

文本节点： #text

元素节点：大写的标签名

属性节点：属性名

nodeType：节点类型

注释节点：8

文本节点：3

元素节点：1

属性节点：2

nodeValue：节点的值
注释节点：注释内容
文本节点：文本内容
元素节点：null
属性节点：属性值
在这里插入图片描述

 <script>
        window.onload = function() {
     
     
            // var box = document.getElementById("box");

            // console.log(box.parentNode);//获取父节点

            // console.log(box.nextSibling); 
            // console.log(box.nextElementSibling);
            // console.log(box.previousSibling);
            // console.log(box.previousElementSibling);
            // console.log(document.body.firstElementChild);


            // console.log(document.body.childNodes); //获取页面中所有的元素节点
            var firstChild = document.body.firstChild;
            var sec = firstChild.nextSibling;
            var h1 = document.body.firstElementChild;
            var title = h1.attributes.getNamedItem("id");


            // console.log("注释节点：nodeName=" + firstChild.nodeName);
            console.log("注释节点：nodeType=" + firstChild.nodeType);
            // console.log("注释节点：nodeValue=" + firstChild.nodeValue);
            // console.log("文本节点：nodeName=" + sec.nodeName);
            console.log("文本节点：nodeType=" + sec.nodeType);
            // console.log("文本节点：nodeValue=" + sec.nodeValue);
            // console.log("元素节点：nodeName="+h1.nodeName);
            console.log("元素节点：nodeType=" + h1.nodeType);
            // console.log("元素节点：nodeValue="+h1.nodeValue);

            // console.log("属性节点：nodeName="+title.nodeName);
            console.log("属性节点：nodeType=" + title.nodeType);
            // console.log("属性节点：nodeValue="+title.nodeValue);
        }
    </script>
</head>

<body>
    <!-- 我是注释 -->三是规模
    <h1 id="title">我是一级标题</h1>
    <div id="box"></div>
    <p>我是p标签</p>
</body>