操作DOM节点

常规意义:增删改查

在向页面增加一个节点,首先,应该有一个节点

创造一些节点用于后续代码的展示(下方通用不再单独设置)


<div class="box">
    <p>我是html手打出来的</p>
    <p>我也是手打出来的</p>
</div>

操作分类

在js中创建一个节点

语法

document.createElement('要创建的标签名')

创建一个元素节点

语法

document.createElement('要创建的标签名')

var oDiv = document.createElement('div')

创建一个文本节点(了解即可)

语法

document.createTextNode('要创建的标签名')

var oText = document.createTextNode('我是由js创造的文本节点')

向网页增加一个节点

语法1

元素.appendChild(要添加的节点)

作用:向元素的末尾追加一个节点


box.appendChild(oDiv)//将oDiv这个节点插入到a元素的末尾


var oText = document.createTextNode('我是由js创造的文本节点')
oDiv.appendChild(oText)//将文本节点添加到元素节点oDiv里(给节点oDiv添加内容)

//或用  节点.innerText = '要添加的内容'  添加内容

oSpan.innerText = '我是通过innerText添加的内容'

语法2

元素.insertBefore(要添加的节点,插入到那个节点前面)

注意:两个参数都是必填项

box.insertBefore(oSpan,b)//将oSpan这个节点插入到b(也就是p标签)前面

1. 第二个参数是正常节点时,表示插入到这个节点前

2. 第二个参数是null时,则插入到元素末尾

向创建的元素节点中添加文本

语法

节点.innerText = '要添加的内容'

oSpan.innerText = '我是通过innerText添加的内容'

删除页面某一节点

语法1

父节点.removeChild('要删除的子节点')

var box = document.querySelector('.box')
var b = document.querySelector('p')
box.removeChild('b')//删除box里的b节点

语法2

想要删除的节点.remove()

var box = document.querySelector('.box')
var b = document.querySelector('p')
b.remove()//删除box里的b节点
box.remove()//删除box节点

修改页面的某一节点

语法

父节点.replaceChild(新节点,旧节点/要修改的节点)

作用:将页面中的某一节点做一替换

克隆一个节点(把一个节点复制一个一模一样的节点)

语法

节点.cloneNode(参数)

参数:默认是false,表示不克隆后代节点

选填true,表示克隆后代节点

var a = b.cloneNode()//克隆一个和元素b一样的节点(只会克隆标签,内容不会克隆)
var a1 = b.cloneNode(true)//克隆一个和元素b一样的节点(标签与内容都会克隆)

克隆节点案例

需求让box里呈现为

    <p>我是html手打出来的</p>
    <p>我也是手打出来的</p>
    <p>我是html手打出来的</p>

这样的形式

一般理解做法:

box.appendChild(b)

错误解:将 oP 这个节点，添加到 box 的，然行页面就有 3 个 P标签了

正确型解: 将 oP 这个节点，添加到 box 的未尾因为 DOM 节点在页面中只会具有一个(核心) 所以这一步相当于将原本列在 box 内部第一个的 p 标签，移动到box 内部的最后一个

正确做法:

利用克隆,克隆一个元素b然后将克隆的元素b添加到box的底部

var a1 = b.cloneNode(true)
box.appendChild(a1)

获取非行内样式

语法

window.getComputedStyle(元素).要查询的css属性名

获取元素素的偏移量

获取元素在页面上相当参考父级的左边和上边的距离

参考父级:

其实就是假设你要给一个元素'绝对定位',他是根据谁来进行定位,那么这个元素偏移量参考父级就是谁

语法

1.元素.offsetParent//
console.log(box2.offsetParent)
2.元素.offsetLeft//获取元素左的偏移量
console.log(box2.offsetLeft)
3.元素.offsetTop//获取元素上的偏移量
console.log(box2.offsetTop)

获取元素尺寸的方法(元素的占地面积)(获取元素的宽高)

语法1:

元素.offsetWidth //获取元素的宽

元素.offsetHeight  //获取元素的高

语法2:

元素.clientWidth  //获取元素的宽

元素.clientHeight  //获取元素的高

区别:

offset-->实际高度/宽度+padding(内间距)+border(边框)

client-->实际高度/宽度+padding(内间距)

两个都不包含margin(外间距)

获取浏览器窗口尺寸

1.window.inner... -->计算时会包含滚动条(Width/Height)
2.document.documentElement.client....-->(当前页面的尺寸)不会包含滚动条(Width/Height)

如何操作DOM节点