10-DOM节点操作

一、获取元素的偏移量

1. 获取元素距离 offsetLeft / offsetTop / offsetParent

1.1 offsetLeft

dom元素.offsetLeft 获取元素距离“最近的有定位的父元素”左侧的距离

1.2 offsetTop

dom元素.offsetTop 获取元素距离“最近的有定位的父元素”上侧的距离

注意：返回数值类型，是只读的，会四舍五入取整

如果所有父元素都没有定位，会找到body

1.3 offsetParent

dom元素.offsetParent 获取最近的有定位的父元素

当“最近的有定位的父元素”的style.display为none时，offsetParent获取到的是null

2. 获取元素宽高 offsetWidth / Height

盒子大小： width + padding + border

​ dom元素.offsetWidth 盒子的宽度

​ dom元素.offsetHeight 盒子的高度

3. 获取盒子边框的宽度 clientTop / clientLeft

盒子上边框 dom元素.clientTop

盒子左边框 dom元素.clientLeft

4. 获取盒子自身宽高（不包含边框） clientWidth / clientHeight

对于内联元素以及没有 CSS 样式的元素为 0。

包括内边距（padding），但不包括边框（border）、外边距（margin）和垂直滚动条（如果存在）。

宽度 dom元素.clientWidth

高度 dom元素.clientHeight

二、DOM节点操作

1. 获取节点

通过节点的关系来获取节点或者节点的集合

1.1 dom节点.children

获取节点的所有子元素，即使只有一个也放在一个集合里面

语法： dom节点.children

var boxUl = document.querySelector("ul")
1

1.2 dom节点.parentNode

获取节点的父节点，获取的结果是单一的一个节点，如果没有获取到返回null

语法： dom节点.parentNode 或者 dom节点.parentElement

1.3 document.xxx

一些特殊的节点的快捷获取方法：一个html文件里面只有一个

// body标签
console.log(document.body)
// html标签
console.log(document.documentElement)
// head标签
console.log(document.head)
// title标签（可读写）  里面的内容的获取和设置
console.log(document.title)
document.title = "aaa"; //重新设置title内容
// doctyle 文档类型
console.log(document.doctyle)
1
2
3
4
5
6
7
8
9
10
11

2. 创建节点

2.1 创建元素节点

语法：document.createElement('标签的名字要小写')

返回值：创建好的元素节点（标签）

2.2 创建文本节点

语法：document.createTextNode("文本节点的内容")

var newP = document.createElement("p");
newP.innerHTML = "p标签"

var newText = document.createTextNode("hello world")
1
2
3
4

3. 插入节点

3.1 appendChild

把一个子元素插入一个父元素中，并且是作为父元素的最后一个子元素

语法：父元素.appendChild(要插入的元素)

var newLi = document.createElement('li');
newLi.innerHTML = 'hello'

var ulBox = document.querySelector('ul')
ulBox.appendChild(newLi);
1
2
3
4
5

3.2 insertBefore

把一个子元素插入一个父元素中，并且是作为其中某一个子元素的前面

语法：父元素.insertBefore(要插入的子元素，插入在哪个子元素的前面)

注意：insertBefore必须有两个元素，第二个元素可以为null，此时作用同appendChild

var newLi2 = document.createElement('li');
newLi2.innerHTML = '百度';
ulBox.insertBefore(newLi2,newLi)
1
2
3

4. 修改节点

语法： 被替换的元素的父元素.replaceChild(新元素,要被替换的元素)

var newH3 = document.createElement("h3");
newH3.innerHTML = "hello world";
// 获取被替换的p标签
var p = document.querySelector("p");
// 要被替换的元素的父元素
var fatherDiv = p.parentElement;
// 用h3替换p
fatherDiv.replaceChild(newH3, p);
1
2
3
4
5
6
7
8

5. 克隆节点

语法： 要被克隆的节点.cloneNode(是否克隆里面的内容)

克隆好的节点与原节点没有关系；

默认不克隆里面的内容

var cloneH3 = newH3.cloneNode(true);
1

6. 删除节点

情况一、清空当前元素的所有子元素

​ => 把div里面的innerHTML 置空

fatherDiv.innerHTML = "";
1

情况二、删除自己

语法：要删除的dom元素的父元素.removeChild(要被删除的dom元素)

fatherDiv.parentNode.removeChild(fatherDiv);
1

语法：要删除的元素.remove()

fatherDiv.remove();
1