2021-01-11DOM节点操作

最新推荐文章于 2022-10-06 15:56:57 发布

棉花一朵

最新推荐文章于 2022-10-06 15:56:57 发布

阅读量196

点赞数 1

文章标签： js dom

本文链接：https://blog.csdn.net/weixin_53125679/article/details/112476359

版权

文章目录

一、DOM节点
二、自定义获取元素节点
三、操作元素节点的属性
四、操作元素的类名
五、操作元素节点中的内容
六、选项卡
- - 函数的执行
  - this:
七、全选
八、操作元素节点的样式
九、属性节点
十、通过节点关系获取节点
十一、点名器作业
- - Enter实现
十二、节点操作

一、DOM节点

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

节点的分类：
元素节点 html标签 img body input div
文本节点文字部分
属性节点标签内的属性
注释节点
1.document
页面中最大的节点，有且只有一个。不属于元素节点，是页面中所有节点的容器。根节点。
2.html
页面中最大的元素节点。根元素节点。
3.元素节点
html标签
4.文本节点
每一段文本内容都是一个文本节点
包含换行和空格
一般来说作为元素节点的子节点存在。
5.属性节点：
属性节点不能单独存在，必须依赖于元素节点。
6.注释节点
页面中的注释，作为说明文本使用户。

二、自定义获取元素节点

<!-- node 表示传入的节点，获取该节点的元素节点。
        classStr 表示传入的classname ，通过classname匹配元素节点    -->
    <script>
        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(node[i]);
                }
            }
            return arr;
        }
    </script>

三、操作元素节点的属性

操作元素节点的属性
标签上的属性分类：
1.原生属性
2.自定义属性
3.H5 自定义属性

1.原生属性
语法：元素.属性名
修改/新增：
元素.属性名 = “值”
获取：
元素.属性名
【注意】class属性是例外，不能直接通过属性名获取，而是用className

HTML：

 <div class="container" index="index1" data-id="idBox">我是div标签</div>

js：

var oDiv = document.getElementsByTagName("div")[0];
        // 修改，会在html直接修改
        oDiv.className = "container1";
        // 新增，会在html直接添加
        oDiv.id = "box";

结果：
在这里插入图片描述

//获取
// console.log(oDiv.id);
console.log(oDiv.className);

结果：
在这里插入图片描述

2.自定义属性
不能直接使用元素.属性名这个语法来获取。
三个方法去操作：
获取
getAttribute(“属性名”);
返回值：字符串
设置
setAttribute(“属性名”,“属性值”)
删除
removeAttribute(“属性名”)

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

<div class="container" index="index1" data-id="idBox" id="box">我是div标签</div>

js：

//获取
console.log(oDiv.getAttribute("index")); //index1

//设置，会在html直接修改
oDiv.setAttribute("id", "box1");

结果：
在这里插入图片描述

//删除，会在html直接删除
oDiv.removeAttribute("id");
console.log(oDiv);

结果：
在这里插入图片描述

3.H5 自定义属性
每一个元素节点上都有一个属性：dataSet
里面包含了所有的H5自定义属性。
键值对结构：例子;data-id =“idBox”
key：data-XXX xxx的内容。
value:属性值
获取：
元素.dataset.key
设置：
元素.dataset.key = “值”
删除
delete 元素.dataset.key
HTML：

<img id="img1" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3363295869,2467511306&fm=26&gp=0.jpg" alt="" ab="123">
<button id="btn">切换图片</button>

js：

//点击切换图片会变成此图片
btn.onclick = function() {
                var oDiv = document.getElementById("img1");
                img1.src = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fs9.sinaimg.cn%2Fbmiddle%2F5ceba31bg5d6503750788&refer=http%3A%2F%2Fs9.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1612919618&t=80fd6a614e44a6cdc2944fa18ad68352"
            }

原图片：
在这里插入图片描述
修改之后的图片：

HTML：

<div class="container" index="index1" data-id="idBox" id="box">我是div标签</div>

js：

//获取
console.log(oDiv.dataset.id);

结果：
在这里插入图片描述

//增加
oDiv.dataset.name = "BOXNAME";
//删除，删除的是data-id
delete oDiv.dataset.id;

结果：
在这里插入图片描述

四、操作元素的类名

1.按照原生属性的方式来操作
获取：
元素.className
设置：
元素.className = “值”
追加：
元素.className += " 值";
【注意】追加时，值的前面要加一个空格。
删除：
1.重新设置一遍。
2.
2.1 获取classname属性值、
2.2 按照空格去分割字符串
2.3 遍历数组，将要删除的字符串删除
2.4 数组的join方法
html：

<div class="box container  b c"></div>

js：

 var bDiv = document.getElementsByTagName("div")[0];
 获取
 console.log(bDiv.className);

结果：
在这里插入图片描述

设置
bDiv.className = "a";

在这里插入图片描述

追加 需加一个空格
bDiv.className += " d";

结果：
在这里插入图片描述

2.H5标准给我们一个API
元素节点都有一个属性叫做：classList
里面包含了所有的class值。
获取：
元素.classList 获取class值的集合。
想要获取单个，使用下标。
新增：
元素.classList.add(“新增的类名”)
删除：
元素.classList.remove(“删除的类名”)
替换：
元素.classList.replace(“旧类名”,“新类名”) ;
toggle() 切换
语法：元素.classList.toggle(“类名”)
当元素拥有这个类名时，将类名删除
当元素没有这个类名时，将类名添加

获取
console.log(bDiv.classList);

在这里插入图片描述

替换
bDiv.classList.replace("b", "bb");

在这里插入图片描述

添加
bDiv.classList.toggle("box1");
删除
bDiv.classList.toggle("b");

在这里插入图片描述

五、操作元素节点中的内容

1.innerHTMl
获取元素节点中除了本身的标签外，所有的HTML代码。
获取：
元素.innerHTML
设置：
元素.innerHTMl = “新的内容”
【注意】 innerHTML 会覆盖原有的内容，而且会解析其中的标签。

// box.innerHTML = "我是新的innerHTML";
box.innerHTML = "<h1>我是新的innerHTML</h1>";

在这里插入图片描述

2.innerText
获取元素节点中的文本内容,会覆盖原有的内容，不会解析内容中的标签。
获取：
元素.innerText
设置：
元素.innerText = “新的内容”;

//不会解析内容中的标签
box.innerText = "<h1>我是新的innerText</h1>";
console.log(typeof box.innerText);

在这里插入图片描述

3.value
主要使用在表单元素中。
操作表单元素节点的value属性。
获取：
表单元素节点.value
设置：
表单元素节点.value = “值”

六、选项卡

需求分析：
1.给每一个按钮添加点击事件
2. （1）先让其他的按钮中的active类名都移除
（2）给当前按钮添加一个active类名
（3）对应的div显示出来
先让所有的div中的active类名都移除
给对应的div添加一个actvie类名。
第一次 for循环 i=0
第二次 for循环 i=1
第三次 for循环 i=2
第四次 for循环（没有执行其中的代码） i=3

<style>
        #box{
            margin: 100px auto 0;
            width: 600px;
        }
        #box .btnGrop{
            display: flex;
            height: 30px;
            justify-content: space-between;
            /* background-color: #27ae60; */
        }
        button{
            width: 100px;
            height: 30px;
            background-color: #1abc9c;
            color: #fff;
            font-size: 16px;
        }
        #box div{
            width: 600px;
            height: 600px;
            background-color: #e74c3c;
            border: 1px solid;
            display: none;
        }
        .btnGrop>.active{
            background-color: #f39c12;
            color: #2c3e50;
        }
        #box>.active{
            display: block;
        }
    </style>
     <script>
         window.onload = function(){
            //  1.获取所有的按钮
            var btns = document.getElementsByTagName("button");
            //6.获取所有的内容div标签
            var boxs = document.getElementsByClassName("contentBox");
            //  2.遍历按钮
            for (var i = 0; i < btns.length; i++) {
                // 9.将下标设置为自定义属性。
                btns[i].dataset.index = i;
                // 3.为按钮添加点击事件。
               btns[i].onclick = function(){
                   //4.将所有的按钮的active类名都清除
                   for (var j = 0; j < btns.length; j++) {
                        btns[j].className = "";
                        // 7.移除active类名
                        boxs[j].classList.remove("active");
                   }  
                   // 5.为当前的按钮添加上active类名
                   this.className = "active";
                   // 8.为对应的div标签添加active类名。
                   // 10.获取自定义属性。
                   boxs[this.dataset.index].classList.add("active");
               }
            }
         }
     </script>
</head>
<body>
    <div id="box">
        <div class="btnGrop">
            <button class="active">前端工程师</button>
            <button>后端工程师</button>
            <button>UI设计师</button>
        </div>
        <div class="contentBox active">前端工程师是互联网时代软件产品研发中不可缺少的一种专业研发角色。从狭义上讲，前端工程师使用 HTML、CSS、JavaScript 等专业技能和工具将产品UI设计稿实现成网站产品，涵盖用户PC端、移动端网页，处理视觉和交互问题。从广义上来讲，所有用户终端产品与视觉和交互有关的部分，都是前端工程师的专业领域。</div>
        <div class="contentBox">后端工程师隶属于软件研发工程师，是从事软件开发相关工作人员，其主要职责是平台设计、接口设计和功能实现。</div>
        <div class="contentBox">“UI”的本义是用户界面，是英文User和interface的缩写。UI设计师简称UID（User Interface Designer），指从事对软件的人机交互、操作逻辑、界面美观的整体设计工作的人。<br>
            UI设计师的涉及范围包括高级网页设计、移动应用界面设计，是目前中国信息产业中最为抢手的人才之一。</div>
    </div>
</body>

在这里插入图片描述

函数的执行

里面若涉及到了变量
在定义的时候不解析变量，而是按照变量名保存，
只有在函数调用时，才会解析变量

this:

在函数中，this保存的是函数调用者的地址信息。
谁调用了当前的函数，this就表示谁。

<script>
        var num = 20;
        function func(){
            console.log(num);
        }
        num = 40;
        func();
    </script>

在这里插入图片描述

七、全选

需求分析：
1.点击全选时，让所有的按钮都选中若全选已经选中，则是全不选
2.点击单个的复选框时，判断，若全部都已选中，全选则应该选中，否则不选中。

<style>
        *{
            margin: 0;
            padding:0;
        }
        .box{
            width: 160px;
            padding: 5px;
            border: 1px solid #333;
            margin: 100px auto 0px;
        }
        .box>div{
            padding: 15px;
        }
    </style>
     <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>

在这里插入图片描述

八、操作元素节点的样式

元素节点的样式：
样式：
行内
内嵌
外链
行内样式：

原生属性的方式获取
元素.style.样式的属性名
【注意】如果属性名是多个单词，第二个单词首字母大写，删除中划线。
该方法只能获取行内。

<style>
        #box{
            width: 200px;
        }
    </style>
<body>
    <button id="btn">变色</button>
    行内式设置样式
    <div id="box" style="height: 100px;background-color: hotpink;"></div>
</body>

var box = document.getElementById("box");
可以获取行内样式中有的样式
console.log(box.style.height);

在这里插入图片描述

获取元素的有效样式
标准浏览器：
getComputedStyle(要获取样式的元素)
IE低版本：（IE8以下）
元素.currentStyle.样式属性名 box.currentStyle.width

console.log(getComputedStyle(box).width);
//IE低版本
// console.log(box.currentStyle["width"]);
 // console.log(getStyle(box, "width"));

在这里插入图片描述

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

btn.onclick = function () {
点击时会变一次颜色
                box.style.backgroundColor = "blue";
            }

在这里插入图片描述

//  node 要获取样式的元素节点  cssStyle 要获取样式的属性名
        function getStyle(node, cssStyle) {
            return node.currentStyle ? node.currentStyle[cssStyle] : getComputedStyle(node)[cssStyle];
        }

九、属性节点

属性节点：
获取元素节点的属性节点
元素.attributes

单个属性节点：
元素.attributes.getNamedItem(“属性名”)；

<script>
        window.onload = function () {
            var box = document.getElementById("box");
            console.log(box.attributes.getNamedItem("name"));
        }
    </script>
</head>

<body>
    <div id="box" name="boxName" class="home"></div>
</body>

在这里插入图片描述

十、通过节点关系获取节点

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

获取父节点。
节点.parentNode

var box = document.getElementById("box");
            console.log(box.parentNode);

在这里插入图片描述

获取兄弟节点
1.下一个节点
node.nextSibling
对于标准浏览器，标签，空文档，换行都属于节点。
IE低版本：指下一个元素节点。
2.下一个元素节点
node.nextElementSibling
下一个兄弟节点 = 节点.nextElementSibling||节点.nextSibling
```
     3.上一个节点
         node.previousSibling
     4.上一个元素节点
         node.previousElementSibling
```

			console.log(box.nextSibling);
            console.log(box.nextElementSibling);
            console.log(box.previousSibling);
			console.log(box.previousElementSibling);

在这里插入图片描述

获取单个子节点
1.第一个子节点
node.firstChild
2.获取第一个元素节点
node.firstElementChild
3.获取最后一个子节点
node.lastChild
4.获取最后一个元素节点
node.lastElementChild

console.log(document.body.firstChild);            
console.log(document.body.firstElementChild);
console.log(document.body.lastChild);            
console.log(document.body.lastElementChild);

在这里插入图片描述

获取所有子节点
1.获取所有子节点
语法：node.childNodes
返回的是子节点的伪数组（元素节点，文本节点，注释节点）
2.获取所有的元素子节点
语法：node.children
返回元素节点。使用最多的方法。

console.log(document.body.childNodes);
console.log(document.body.children);

在这里插入图片描述

节点的属性
属性：事物的特征
nodeName: 节点名称
注释节点： #comment
文本节点： #text
元素节点：大写的标签名
属性节点：属性名

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("文本节点：nodeName=" + sec.nodeName);
console.log("元素节点：nodeName=" + h1.nodeName);
console.log("属性节点：nodeName=" + title.nodeName);

在这里插入图片描述

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

console.log("注释节点：nodeType=" + firstChild.nodeType);
console.log("文本节点：nodeType=" + sec.nodeType);
console.log("元素节点：nodeType=" + h1.nodeType);
console.log("属性节点：nodeType=" + title.nodeType);

在这里插入图片描述

nodeValue：节点的值
注释节点：注释内容
文本节点：文本内容
元素节点：null
属性节点：属性值

console.log("注释节点：nodeValue=" + firstChild.nodeValue);
console.log("文本节点：nodeValue=" + sec.nodeValue);
console.log("元素节点：nodeValue=" + h1.nodeValue);
onsole.log("属性节点：nodeValue=" + title.nodeValue);

在这里插入图片描述

十一、点名器作业

<style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .name {
            width: 400px;
            height: 200px;
            background-image: linear-gradient(rgb(126, 214, 248), rgb(233, 140, 210), rgb(243, 233, 89));
            box-shadow: 0 0 20px 20px rgb(165, 108, 221);
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -200px;
            margin-top: -100px;
            font-size: 80px;
            letter-spacing: 8px;
            text-align: center;
            line-height: 200px;
            color: #fff;
            animation: ani 1s linear infinite;
        }
        
        @keyframes ani {
            0% {
                box-shadow: 0 0 20px 20px rgb(165, 108, 221);
            }
            50% {
                box-shadow: 0 0 20px 5px #e74c3c;
            }
        }
    </style>
    <script>
        window.onload = function() {
            var div = document.getElementsByTagName("div")[0];
            var arr = ["百度", "淘宝", "新浪", "腾讯", "天猫", "网易", "京东", "搜狐"];
            var i;
            var flag = true;
            var timer = null;
            div.onclick = function() {
                if (flag) {
                    flag = false;
                    timer = setInterval(function() {
                        i = parseInt(Math.random() * arr.length);
                        div.innerHTML = arr[i];
                    }, 50);
                } else {
                    flag = true;
                    clearInterval(timer);
                }
            }
        }
    </script>
</head>

<body>
    <div class="name">百度</div>
</body>

Enter实现

<script>
        window.onload = function() {
            var div = document.getElementsByTagName("div")[0];
            var arr = ["百度", "淘宝", "新浪", "腾讯", "天猫", "网易", "京东", "搜狐"];
            var i;
            var flag = true;
            var timer = null;
            document.onkeydown = function() {
                if (keycode == enter) {
                    flag = false;
                    timer = setInterval(function() {
                        i = parseInt(Math.random() * arr.length);
                        div.innerHTML = arr[i];
                    }, 50);
                } else {
                    flag = true;
                    clearInterval(timer);
                }
            }
        }
    </script>

十二、节点操作

创建节点
元素节点：document.createElement(“标签名”);
返回值：新的元素节点
创建完成后，需要插入到页面中才能看到

文本节点：document.createTextNode(内容);

<div id="box">
        <p>八千里路云和月
            <span>满江红</span>
        </p>
        <p>臣子恨，何时灭</p>
</div>

   var p = document.createElement("p");
            p.innerHTML = "三十功名尘与土";
            console.log(p);

插入节点
node.appendChild
在父节点的最后添加一个新的子节点。
node.insertBefore(新节点，参考节点)
在父节点的参考节点前添加一个新的子节点。
如果参考节点为null，则在父节点的最后添加新的子节点

 var p = document.createElement("p");
 p.innerHTML = "三十功名尘与土";
 var box = document.getElementById("box");
 box.appendChild(p);

在这里插入图片描述

删除节点
父节点.removeChild(子节点);
在父节点中移除该子节点
node.remove();
在父节点中移除自身。
替换节点：
用一个节点去替换另外一个节点
父节点.replaceChild(新节点,旧节点);
复制节点
node.cloneNode([true]);
复制节点，克隆节点
如果参数为true，则将其所有子节点也克隆。

棉花一朵

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
2021-01-11DOM节点操作

文章目录一、DOM节点二、自定义获取元素节点三、操作元素节点的属性四、操作元素的类名五、操作元素节点中的内容一、DOM节点我们的页面是由节点组成的，每一个组成部分都是一个节点。节点的分类：元素节点 html标签 img body input div文本节点文字部分属性节点标签内的属性注释节点1.document页面中最大的节点，有且只有一个。不属于元素节点，是页面中所有节点的容器。根节点。2.html页面中最大的元素节点。根元素节点。3.元素节点html标签4.文本节
复制链接

扫一扫