DOM文档对象模型(下)
一、DOM节点
从文档对象模型DOM角度看
- 每个html标签、标签属性、内容、注释…都被看成dom节点
- DOM 就是我们 html 结构中一个一个的节点构成的
DOM节点分类
DOM节点类型
- 整个文档是一个 文档节点
- 每个
HTML
元素是 元素节点 HTML
元素内的文本是 文本节点- 每个
HTML
属性是 属性节点 - 注释是 注释节点
常用的三大类:元素节点/文本节点/属性节点
元素节点
- 我们通过
getElementById....
获取到的都是 元素节点
属性节点
- 我们通过
getAttribute...
获取到的是元素的属性节点
文本节点
- 我们通过
innerHTML,innerText
获取到的是元素的文本节点
DOM节点树形结构
DOM节点关系
- 根节点: 在HTML文档中,html就是根节点。
- 父节点: 一个节点之上的节点就是该节点的父节点,例如ul的父节点就是body,body的父节点就是html。
- 子节点: 一个节点之下的节点就是该节点的子节点,例如ul就是body的子节点。
- 兄弟节点: 如果多个节点在同一层次,并拥有相同的父节点,那么这几个节点就是兄弟节点。例如所有li是兄弟节点,因为他们拥有相同的父节点ul
二、获取节点
获取元素节点
getElement系列、querySelector系列
层次关系获取节点
children :
获取某一节点下所有 的子一级元素节点
层次关系获取元素节点
firstElementChild
<body>
<div>
<p>hello</p>
</div>
<script>
//这个div获取的是页面的div元素,就是一个元素节点
var div = document.querySelector('div')
console.log(div.firstElementChild) //<p>hello</p>
</script>
</body>
- 只获取一个节点,不是伪数组
- 获取的是 第一个元素节点
- 第一个元素节点是p标签,是一个元素节点
lastElementChild
- 获取某一节点下 子一级 最后一个元素节点
<body>
<div>
<p>
hello
</p>
<p>
world
</p>
</div>
<script>
var div = document.querySelector('div')
console.log(div.lastElementChild)
</script>
</body>
- 只获取一个节点,不是伪数组
- 获取的是 最后一个元素节点
- 最后一个元素节点是
<p>world</p>
,是一个元素节点
获取元素节点的所有属性节点:attributes
<body>
<ul>
<li id='a' a='100' test='test'>hello</li>
</ul>
<script>
var oli = document.querySelector('#a')
console.log(oli.attributes)
/*
0: id
1: a
2: test
length: 3
a: a
id: id
test: test
[[Prototype]]: NamedNodeMap
*/
</script>
</body>
- 获取的是一组数据,是该元素的所有属性,也是一个伪数组
- 这个
li
有三个属性,id/a/test
三个,所以就获取到了这三个
非常规节点获取
获取html根节点
document.documentElement
获取body节点
document.body
获取head节点
document.head
三、节点属性
四、操作DOM节点
概述: 我们所说的操作无非就是增删改查
- 创建一个节点(因为向页面中增加之前,我们需要先创建一个节点出来)
- 向页面中增加一个节点
- 删除页面中的某一个节点
- 修改页面中的某一个节点
- 修改页面中的某一个节点
- 获取页面中的某一个节点
1.创建节点
-
creatrElement
用于创建一个节点//创建一个div元素节点 var div = document.createElement('div') console.log(div) //<div></div>
- 创建出来的就是一个可以使用的div元素
-
createTextNode
用来创建一个文本节点//创建一个文本节点 var oText = document.createTextNode('我是一个文本') console.log(oText) //"我是一个文本"
创建属性节点
createAttribute
创建属性节点
setAttruibuteNode
给元素节点设置属性
var pEle = document.createElement('p') //<p></p>
var idAttr = document.createAttribute('id') //创建属性id
idAttr.value = 'p1' //给属性节点赋值id = 'p1'
pEle.setAttributeNode(idAttr) //给元素节点设置属性节点<p id='p1'></p>
//input元素节点
var inputEle = document.createElement('input')
//添加属性
inputEle.id = 'submit'
inputEle.type = 'button'
inputEle.value = '提交'
//<inpute id='submit' type="button" value="提交"
2.加入节点
appendChild()
方法可向节点的子节点列表的末尾添加新的子节点。
语法: 父节点.appendChild(要插入的子节点)
//创建一个div元素
var div = document.createElement('div')
var oText = document.createTextNode('我是一个文本')
//向div中追加一个文本节点
div.appendChild(oText)
console.log(div) //<div>我是一个文本</div>
insertBefore()
方法在被选元素前插入 HTML 元素。
语法: 父节点.insertBefore(要插入的节点,插入在哪一个节点前)
<div>
<p>
我是一个P标签
</p>
</div>
<script>
var div = document.querySelector('div')
var p = document.querySelector('p')
//创建一个元素节点
var span = document.createElement('span')
//将这个元素节点添加到div下面的p前面
div.insertBefore(span,p)
console.log(div)
/*
<div>
<span></span>
<p>我是一个p标签</p>
</div>
*/
</script>
3.删除节点
removeChild()
移除某一节点下的某一节点
语法: 父节点.removeChild(要移出的节点)
<div>
<p>
我是一个P标签
</p>
</div>
<script>
var div = document.querySelector('div')
var p = document.querySelector('p')
//移出div下的p标签
div.removeChild(p)
console.log(div) //<div></div>
</script>
remove()
移除当前节点
语法: 要移除的节点.remove
<div>
<p>
我是一个P标签
</p>
</div>
<script>
var div = document.querySelector('div')
var p = document.querySelector('p')
//移除p标签
p.remove()
console.log(div) //<div></div>
</script>
4.替换节点
replaceChild
匠页面中的某一个节点替换掉
语法: 父节点.replaceChild(新节点,旧节点)
<div>
<p>
我是一个P标签
</p>
</div>
<script>
var div = document.querySelector('div')
var p = document.querySelector('p')
//创建一个span节点
var span = document.createElement('span')
//向span元素中加入一点文字
span.innerHTML = '我是新创建的span标签'
//用创建的span标签替换掉原先div下的p标签
div.replaceChild(span,p)
console.log(div)
/*
<div>
<span>我是新创建的span标签</span>
</div>
*/
</script>
克隆节点
cloneNode()
将复制并返回调用它的节点的副本。如果传递给它的参数是 true,它还将递归复制当前节点的所有子孙节点。否则,它只复制当前节点。
<div>
<span>我是span标签</span>
<p>
我是一个P标签
</p>
</div>
<script>
var div = document.querySelector('div')
//参数为true,克隆div,包括下面的span,p标签
//不填参数,或者为false,只克隆div
var cloneDiv = div.cloneNode(true)
div.appendChild(cloneDiv)
</script>
五、获取元素的非行间样式
-
我们在操作DOM的节点的时候,很重要的一点就是操作元素的css样式
-
那么在操作css样式的时候,我们避免不了就要获取元素的样式
-
之前我们说过可以用
元素.style.xxx
来获取,但是这个方法只能获取到元素的行间样式,也就是写在行内的样式<style> div{ width:100px } </style> <body> <div style="height:100px"> <p> 我是一个p标签 </p> </div> <script> var div = document.querySelector('div') console.log(div.style.height) //100px console.log(div.style.width) //'' </script> </body>
- 不管是外链式还是内链式,我们都获取不到该元素的样式
- 这里我们就要使用方法来获取了
getComputedStyle
和currentStyle
- 这两个方法的作用是一样的,只不过一个在 非IE 浏览器,一个在 IE 浏览器
getComputedStyle(非IE使用)
-
语法:
window.getComputedStyle(元素,null).要获取的属性
<style> div{ width:100px } </style> <body> <div style="height:100px"> <p> 我是一个p标签 </p> </div> <script> var div = document.querySelector('div') console.log(window.getComputedStyle(div).width) //100px console.log(window.getComputedStyle(div).height) //'100px' </script> </body> //这个方法获取行间样式和非行间样式都可以
currentStyle(IE使用)
-
语法:
元素.currentStyle.要获取的属性
<style> div{ width:100px } </style> <body> <div style="height:100px"> <p> 我是一个p标签 </p> </div> <script> var div = document.querySelector('div') console.log(div.currentStyle.width) //100px console.log(div.currentStyle.height) //'100px' </script> </body>
六、获取元素的偏移量
概述:就是元素在页面上的什么位置
我们有几个属性来获取,offsetLeft
和offsrtTop
和offsetWidth
和offsetHeight
offsetLeft和offsetTop
- 获取的是元素左边的偏移量和上边的偏移量
- 分成两个情况来看
- 没有定位的情况下
- 获取元素边框外侧到页面内侧的距离
- 有定位的情况下
- 获取元素外边框到定位父级边框内侧的距离(其实就是我们写的left和top的值)
offsetWidth和offsetHeight
获取元素内容宽高+padding宽高+border宽高
的和
七、获取元素尺寸(宽、高)的三种方式
-
offsetWidth = 内容width + padding + border
clientWidth = 内容width + padding
window.getComputedStyle(divEle).width = 内容width
-