对DOM元素进行操作

最新推荐文章于 2022-05-11 11:26:15 发布

Zack Not In Amoy

最新推荐文章于 2022-05-11 11:26:15 发布

阅读量238

点赞数

分类专栏： JS笔记文章标签： html jquery javascript 前端

本文链接：https://blog.csdn.net/No_Bug_Please/article/details/123023884

版权

JS笔记专栏收录该内容

10 篇文章 1 订阅

订阅专栏

获取DOM元素的方法

document.getElementById() 指定在文档中，基于元素的ID获得这个元素对象
[context].getElementByTagName() 在指定上下文（容器）中，通过标签名获取一组元素集合
[context].getElementByClassName() 在指定上下文中，通过样式类名获取一组元素结合（不兼容IE6-8）
document.getElementsByName() 在整个文档中，通过标签的Name属性值获取一组节点集合（在IE中只有表单元素的Name才能识别，所以我们一般只应用于表单元素的处理）
document.head / document.body /document.documentElement 获取页面中的HEAD / Body / Html三个元素
[context].querySelector([selector]): 在指定上下文中，通过选择器获取到指定的元素对象
[context].querySelectorAll([selector]): 在指定上下文中，通过选择器获取到指定的元素集合
```
 //querySelector / querySelectorAll 不兼容IE6-8
 
 let box = document.querySelector('#box')
 let links = box.querySelectorAll('a')
 //links = document.querySelectorAll('#box a') 后台选择器获取id为box的元素里面的所有a元素
```
JS中的节点和描述节点之间关系的属性

节点： Node

节点集合： NodeList (querySelectorAll 和 getElementByName获取的都是节点集合)

节点：页面中出现的所有东西都叫做节点，比如：
- 元素节点（元素标签）
  - nodeType:节点类型：1
  - nodeName:大写的标签名
  - nodeValue: null
- 文本节点
  - nodeType:节点类型：3
  - nodeName: “#text”
  - nodeValue: 文本内容
- 注释节点
  - nodeType:节点类型：8
  - nodeName: “#commen”
  - nodeValue: 注释内容
- 文档节点 document
  - nodeType:节点类型：9
  - nodeName:“#document”
  - nodeValue: null
- 。。。。
描述这些节点之间关系的属性：
- childNodes: 获取所有的子节点
- children: 获取所有的元素子节点（子元素标签，IE6-8下会把注释也当做元素节点）
- parent: 获取父亲节点
- firstChild: 获取第一个子节点
- lastChild: 获取最后一个子节点
- firstElementChild / lastElementChild ：获取第一个/最后一个元素子节点(不兼容IE6-8)
- previousSibling: 获取上一个哥哥节点
- nextSibling: 获取下一个弟弟节点
- previousElementSibling/nextElementSibling: 获取哥哥/弟弟的元素节点（不兼容IE6-8）

综上，我们可以在JS中动态增删改元素

在JS中动态增删改元素

createElement:创建元素对象

createTextNode：创建文本对象

appendChild:把元素添加到指定容器末尾

语法：指定的容器.appendChild(元素)

insertBefore：把元素添加到指定容器中的指定元素的前面

语法：指定的容器.insertBefore([新增元素],[指定元素])

     let box = document.createElement('div');//动态创建一个div元素对象，赋值给box
     box.id = 'boxActive';
     box.style.width = '200px';
     box.style.height = '200px';
     box.className = 'RED';
     let text = document.createTextNode('詹毅翔牛啊')//创建一个文本对象，赋值给text
     // console.dir(text);
     //添加 容器.appendChild(元素)
     box.appendChild(text);//把文字对象添加到元素对象的末尾
     document.body.appendChild(box)//把元素对象添加到文档的末尾

克隆元素或节点：

cloneNode(true/false)：克隆元素或者节点（true为深克隆。flase为浅克隆）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box{
      margin-top: 10px;
      color:red;
      background-color: lightblue;
      width: 80px;
      height: 80px;
    }
  </style>
</head>
<body>
  <div class="box">
    <span>Zack1</span>
  </div>
  <script>
    let box1 = document.querySelector('.box')
    //克隆第一份,深克隆会克隆到后代元素
    let box2 = box1.cloneNode(true);
    box2.querySelector('span').innerHTML = 'Zack2'
    //克隆第二份，浅克隆并不会克隆后代元素
    let box3 = box1.cloneNode(false);
    box3.innerHTML = `<span>
                          Zack3
                      </span>`
    document.body.appendChild(box2)
    document.body.appendChild(box3)
  </script>
</body>
</html>

删除容器中的某元素

removeChild:移除指定容器中的指定元素

语法: 指定容器.removeChild(需要被移除的元素)