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
-
886
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
