目录
本篇博客的内容主要包括元素节点的属性、元素节点的增删改查、获取元素偏移量和尺寸。
一、节点属性
节点分为：元素节点、属性节点、文本节点。
我们知道节点会分成很多种，而且我们也能获取到各种不同的节点，接下来我们就来聊一些各种节点之间属性的区别。
<body>
<ul test="我是 ul 的一个属性">
<li>hello</li>
</ul>
<script>
// 先获取 ul
var oUl = document.querySelector('ul')
// 获取到 ul 下的第一个子元素节点，是一个元素节点
var eleNode = oUl.firstElementChild
// 获取到 ul 的属性节点组合，因为是个组合，我们要拿到节点的话要用索引
var attrNode = oUl.attributes[0]
// 获取到 ul 下的第一个子节点，是一个文本节点
var textNode = oUl.firstChild
</script>
</body>1、nodeType
-
nodeType：获取节点的节点类型，用数字表示
console.log(eleNode.nodeType) // 1
console.log(attrNode.nodeType) // 2
console.log(textNode.nodeType) // 3nodeType === 1就表示该节点是一个 元素节点nodeType === 2就表示该节点是一个 属性节点nodeType === 3就表示该节点是一个 注释节点
2、nodeName
-
nodeName：获取节点的节点名称
console.log(eleNode.nodeName) // LI
console.log(attrNode.nodeName) // test
console.log(textNode.nodeName) // #text- 元素节点的
nodeName就是 大写标签名 - 属性节点的
nodeName就是 属性名 - 文本节点的
nodeName都是 #text
3、nodeValue
-
nodeValue： 获取节点的值
console.log(eleNode.nodeValue) // null
console.log(attrNode.nodeValue) // 我是 ul 的一个属性
console.log(textNode.nodeValue) // 换行 + 空格- 元素节点没有
nodeValue - 属性节点的
nodeValue就是 属性值 - 文本节点的
nodeValue就是 文本内容
汇总
| 节点分类 | nodeType | nodeName | nodeValue |
|---|---|---|---|
| 元素节点 | 1 | 大写标签名 | null |
| 属性节点 | 2 | 属性名 | 属性值 |
| 文本节点 | 3 | #text | 文本内容 |
二、操作 DOM 节点
-
我们所说的操作无非就是 增删改查（CRUD）
-
创建一个节点（因为向页面中增加之前，我们需要先创建一个节点出来）
-
向页面中增加一个节点
-
删除页面中的某一个节点
-
修改页面中的某一个节点
-
获取页面中的某一个节点
1、创建一个节点
-
createElement：用于创建一个元素节点
// 创建一个 div 元素节点
var oDiv = document.createElement('div')
console.log(oDiv) // <div></div>- 创建出来的就是一个可以使用的 div 元素
-
createTextNode：用于创建一个文本节点
// 创建一个文本节点
var oText = document.createTextNode('我是一个文本')
console.log(oText) // "我是一个文本"2、向页面中加入一个节点
-
appendChild：是向一个元素节点的末尾追加一个节点 -
语法：
父节点.appendChild(要插入的子节点)
// 创建一个 div 元素节点
var oDiv = document.createElement('div')
var oText = document.createTextNode('我是一个文本')
// 向 div 中追加一个文本节点
oDiv.appendChild(oText)
console.log(oDiv) // <div>我是一个文本</div>-
insertBefore：向某一个节点前插入一个节点 -
语法：
父节点.insertBefore(要插入的节点，插入在哪一个节点的前面)
<body>
<div>
<p>我是一个 p 标签</p>
</div>
<script>
var oDiv = document.querySelector('div')
var oP = oDiv.querySelector('p')
// 创建一个元素节点
var oSpan = document.createElement('span')
// 将这个元素节点添加到 div 下的 p 的前面
oDiv.insertBefore(oSpan, oP)
console.log(oDiv)
/*
<div>
<span></span>
<p>我是一个 p 标签</p>
</div>
*/
</script>
</body>3、删除页面中的某一个节点
-
removeChild：移除某一节点下的某一个节点 -
语法：
父节点.removeChild(要移除的字节点)
<body>
<div>
<p>我是一个 p 标签</p>
</div>
<script>
var oDiv = document.querySelector('div')
var oP = oDiv.querySelector('p')
// 移除 div 下面的 p 标签
oDiv.removeChild(oP)
console.log(oDiv) // <div></div>
</script>
</body>4、修改页面中的某一个节点
-
replaceChild：将页面中的某一个节点替换掉 -
语法：
父节点.replaceChild(新节点，旧节点)
<body>
<div>
<p>我是一个 p 标签</p>
</div>
<script>
var oDiv = document.querySelector('div')
var oP = oDiv.querySelector('p')
// 创建一个 span 节点
var oSpan = document.createElement('span')
// 向 span 元素中加点文字
oSpan.innerHTML = '我是新创建的 span 标签'
// 用创建的 span 标签替换原先 div 下的 p 标签
oDiv.replaceChild(oSpan, oP)
console.log(oDiv)
/*
<div>
<span>我是新创建的 span 标签</span>
</div>
*/
</script>
</body>三、获取元素的偏移量
-
就是元素在页面上相对于参考父级的左边和上边的距离
offsetLeft和offsetTop
offsetLeft：获取元素距离浏览器最左边的距离
offsetTop：获取元素距离浏览器顶部的距离
注意：这两个方法，得到的结果的参考点是：定位父级。也就是参考点是距离要获取偏移量元素的最近的一个有定位的祖先元素。如果都没有定位，默认参考点就是浏览器，或者说是body。
clientLeft和clientTop
clientLeft：获取距离自身border左边的距离
clientTop：获取距离自身border顶部的距离
如果没有设置border，那么获取到的值就是0 0.
四、获取元素尺寸
-
就是获取元素的 "占地面积"
offsetWith 和 offsetHeight
-
offsetWidth： 获取的是元素 内容 + padding + border 的宽度 -
offsetHeight： 获取的是元素 内容 + padding + border 的高度
clientWidth 和 clientHeight
-
clientWidth： 获取的是元素 内容 + padding 的宽度 -
clientHeight： 获取的是元素 内容 + padding 的高度
注意:
-
获取到的尺寸是没有单位的数字；
-
当元素在页面中不占位置的时候， 获取到的是 0；
-
display: none;元素在页面不占位 -
visibility: hidden;元素在页面占位
-
五、获取浏览器窗口尺寸
-
我们之前学过一个
innerWidth和innerHeight -
他们获取到的是窗口包含滚动条的尺寸
-
下面我们学习两个不包含滚动条的尺寸获取方式
document.documentElement.clientWidth：通过document获取可视窗口宽度（不包括滚动条）
document.documentElement.clientHeight：通过document获取可视窗口高度。
上述两种方法，和window.innerWidth、window.innerHeight的区别就是：
window.innerWidth算宽度是包含滚动条的，而document.documentElement.clientWidth是不包含滚动条的。
239
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
