JS获取元素的九种方法、节点，以及在JS中动态增删改元素

AsiaFT.

已于 2022-09-11 17:02:57 修改

阅读量1.1k

点赞数

文章标签： javascript 前端 html

于 2022-09-09 19:02:38 首次发布

本文链接：https://blog.csdn.net/m0_46181452/article/details/126719305

版权

JavaScript 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

JS 获取元素的九种方法

document.getElementById：
context.getElementsByTagName：在指定上下文中（容器）通过标签获取一组元素集合
context.getElementsByClassName：在指定上下文中（容器），通过类名获取一组元素集合（不兼容IE6-8）
document.head: 获取页面中的head 部分
document.body: 获取页面中的body 部分
document.documentElement: 获取页面中的html 部分
context.getElementsByName: 表单元素（常用于一组元素，如性别等单选、复选框，可以加name 属性进行分组,保证每次只能选择一个）
context.querySelector()：常用，（）内可以写所有CSS代码
context.querySelectorAll()：常用，（）内可以写所有CSS代码

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器练习</title>
</head>
<body>
    <div class="container" id="container">
        <ul id="页签">
            <li><span>标签测试</span>第1个页签</li>
            <li>第2个页签</li>
            <li>第3个页签</li>
        </ul>
    </div>
    <div class='detail' id="detail">
        <div class="detail1">第1个页签详细内容
            <input type="radio" name="gender" value="男">男
            <!-- checked : 默认选中 -->
            <input type="radio" name="gender" checked>女
        </div>
        <br>
        <div class="detail2">第2个页签详细内容
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </div>
        <br>
        <div class="detail3">第3个页签详细内容</div>
    </div>
    <script>
        // 获取gender对应的文本框
        let gender = document.querySelectorAll('[name=gender]');
        console.log(gender); //[input, input]
        console.log(gender[0].value); // "男"
        // getElementsByTagName: 获取指定上下文中所有后代标签为N的元素集合
        let detailBox=document.getElementById('detail');
        let detailAry=detailBox.getElementsByTagName('div');
        console.log(detailAry); //[div.detail1, div.detail2, div, div, div, div.detail3]
        // 只想获取div.detail1, div.detail2,div.detail3
        detailAry=document.querySelectorAll('.detail>div');
        console.log(detailAry);//> 表示子代选择器，空格代表后代选择器， 后代包括孙辈。[div.detail1, div.detail2, div.detail3]
        detailAry=document.querySelectorAll('.detail div');
        console.log(detailAry); //[div.detail1, div.detail2, div, div, div, div.detail3]
        // 只获取div.detail2
        let detail2=detailBox.querySelectorAll(".detail>div:nth-of-type(2)");
        console.log(detail2);
        //  nth-child 和 nth-of-type 的区别。
        let detailChild=detailBox.querySelectorAll(".detail>div:nth-child(2)"); 
        console.log(detailChild); // '' , nth-child 获取的是detail 下的第二个子元素，如果不是div 则返回空。 当前detail 下的第二个子元素是br， 不是div
		 console.log(document.querySelector('li').innerHTML); //“<span>标签测试</span>第1个页签”， document中有多个li，但是使用querySelector()仅返回第一个。innerHTML是会将标签内含有的标签元素也返回，而innerText只返回文本内容。
		 console.log(document.querySelector('li').innerText); //'标签测试第1个页签'


    </script>
</body>
</html>

JS中的节点和描述节点之间关系的属性

节点： Node (页面中素所有的内容均为节点)
节点集合：NodeList(getElementsByName / querySelectorAll 获取的都是节点集合)

NodeList 示例：
在这里插入图片描述

分类：

元素节点（元素标签）
- nodeType:1
- nodeName: 大写的标签名
- nodeValue： null
文本节点
- nodeType: 3
- nodeName:‘#text’
- nodeValue:文本内容
注释节点
- nodeType: 8
- nodeName:‘#comment’
- nodeValue:注释内容
文档节点document
- nodeType: 9
- nodeName:‘#document’
- nodeValue:null

描述这些节点之间关系的属性

childNodes：获取所有的子节点
children: 获取所有的元素的子节点（子元素标签集合）
firstChild：获取第一个子节点
lastChild: 获取最后一个子节点
firstElementChild / lastElementChild：获取第一个和最后一个元素的子节点（不兼容IE6-8）
previousSibling：获取上一个哥哥节点
nextSibling：获取下一个弟弟节点
previousElementSibling/ nextElementSibling ：获取哥哥和弟弟元素节点（不兼容IE6-8）

		let container = document.querySelector('.container');
        console.log(container);
        // 1. 获取container的所有节点: 标准浏览器（非IE6-8）中会把空格和换行当作文本节点处理。
        console.log(container.childNodes); //NodeList(3) [text, ul#页签, text]
        // 2. 获取container的所有元素节点: IE 6-8 下，会将注释也当作元素节点
        console.log(container.children); //HTMLCollection [ul#页签, 页签: ul#页签]
        // 3. 获取ul 下的第一个节点
        let list=container.querySelector('ul');
        console.log(list.firstChild); // firstChild 是换行符。 nodeValue: "\n            "
        console.log(list.firstElementChild); //<li><span>标签测试</span>第1个页签</li>
        // 4. 获取ul 下的最后一个节点
        console.log(list.lastChild); //#text
        console.log(list.lastElementChild); // <li>第3个页签</li>
        // 5. 获取第二个li 的兄弟元素
        let li2=list.querySelector('li:nth-child(2)');
        console.log(li2); //<li>第2个页签</li>
        console.log(li2.previousElementSibling);//<li><span>标签测试</span>第1个页签</li>
        console.log(li2.nextElementSibling);//<li>第3个页签</li>

JS中动态增删改元素

1. DOM元素在HTML里创建是静态的（创建完不好增删改操作），在JS中，可以实现动态增删改DOM元素

createElement 创建元素对象
createTextNode 创建文本对象
appendChild ：把元素添加到容器末尾
insertBefore：把元素添加到指定容器中指定元素的前面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态操作DOM元素</title>
    <style>
        .RED {
            background-color: lightblue;
            background:-webkit-linear-gradient(top left,lightblue,lightcoral) ;
            font: red bold;
        };
    </style>
</head>
<body>
    <script>
        // 1. 创建元素节点div
        let box = document.createElement('div');
        box.id='box';
        box.style.width='200px';
        box.style.height='200px';
        box.className='RED';
        // 2. 动态创建文本节点
        let doc = document.createTextNode('持之以恒，专心致志');
        // 3. 添加：容器.appendChild(元素)
        box.appendChild(doc);
        // 4. 将box 添加到body中
        document.body.appendChild(box);
        // 5. 添加： 容器.insertBefore([新增元素],[指定元素])
        let text = document.createElement('span');
         let br = document.createElement('br');
      
        text.innerText='Hello World';
        box.insertBefore(text,doc);
        box.insertBefore(br,doc);
        
    </script>
</body>
</html>

实现效果：
在这里插入图片描述

2. 克隆元素或节点

cloneNode(true/false): 克隆元素或节点，true代表深克隆，即克隆该元素及其所有后代元素。 false表示浅克隆，只克隆该元素本身。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态操作DOM元素</title>
    <style>
        .RED {
            background-color: lightblue;
            background:-webkit-linear-gradient(top left,lightblue,lightcoral) ;
            font: red bold;
        };
    </style>
</head>
<body>
    <script>
        // 1. 创建元素节点div
        let box = document.createElement('div');
        box.id='box';
        box.style.width='200px';
        box.style.height='200px';
        box.className='RED';
        // 2. 动态创建文本节点
        let doc = document.createTextNode('持之以恒，专心致志');
        // 3. 添加：容器.appendChild(元素)
        box.appendChild(doc);
        // 4. 将box 添加到body中
        document.body.appendChild(box);
        // 5. 添加： 容器.insertBefore([新增元素],[指定元素])
        let text = document.createElement('span');
         let br = document.createElement('br');
      
        text.innerText='Hello World';
        box.insertBefore(text,doc);
        box.insertBefore(br,doc);

        // 6. 深度克隆元素
        let boxDeep=box.cloneNode(true);
        boxDeep.querySelector('span').innerText='Hello World Deep Clone';
        document.body.appendChild(boxDeep);

        // 7. 浅克隆元素
        let boxLight=box.cloneNode(false);
        boxLight.innerHTML="<span>Hello World Light Clone.</span>";
        document.body.appendChild(boxLight);


    </script>
</body>
</html>

在这里插入图片描述

3. 移出元素

removeChild 移除容器中的某个元素。容器.removeChild(元素Id)。

 // 8. 移出boxLight
        document.body.removeChild(boxLight);

在这里插入图片描述

AsiaFT.

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS获取元素的九种方法、节点，以及在JS中动态增删改元素

JS获取元素的九种方法、节点，以及在JS中动态增删改元素
复制链接

扫一扫

专栏目录