获取元素尺寸
offsetWidth和offsetHeight
offsetWidth
: 获取元素的宽度,包括元素的内容宽度、内边距和边框宽度。offsetHeight
: 获取元素的高度,包括元素的内容高度、内边距和边框高度。
var element = document.getElementById('myElement');
var width = element.offsetWidth;
var height = element.offsetHeight;
console.log('Width: ' + width + 'px');
console.log('Height: ' + height + 'px');
clientWidth和clientHeight
clientWidth
: 获取元素的可见区域的宽度,包括元素的内容宽度和内边距,但不包括滚动条和边框。clientHeight
: 获取元素的可见区域的高度,包括元素的内容高度和内边距,但不包括滚动条和边框。
var element = document.getElementById('myElement');
var width = element.clientWidth;
var height = element.clientHeight;
console.log('Client Width: ' + width + 'px');
console.log('Client Height: ' + height + 'px');
获取元素偏移量
offsetLeft和offsetTop
offsetLeft
: 获取元素相对于其最近的具有定位的父元素的左边界的偏移量。offsetTop
: 获取元素相对于其最近的具有定位的父元素的上边界的偏移量。
var element = document.getElementById('myElement');
var leftOffset = element.offsetLeft;
var topOffset = element.offsetTop;
console.log('Offset Left: ' + leftOffset + 'px');
console.log('Offset Top: ' + topOffset + 'px');
clientLeft和clientTop
clientLeft
: 获取元素的左边框的宽度。clientTop
: 获取元素的上边框的高度。
var element = document.getElementById('myElement');
var leftBorderWidth = element.clientLeft;
var topBorderHeight = element.clientTop;
console.log('Left Border Width: ' + leftBorderWidth + 'px');
console.log('Top Border Height: ' + topBorderHeight + 'px');
操作 DOM 节点
- 我们所说的操作无非就是 增删改查(CRUD)
- 创建一个节点(因为向页面中增加之前,我们需要先创建一个节点出来)
- 向页面中增加一个节点
- 删除页面中的某一个节点
- 修改页面中的某一个节点
- 获取页面中的某一个节点
创建一个节点
createElement
:用于创建一个元素节点
// 创建一个 div 元素节点
var oDiv = document.createElement('div')
console.log(oDiv) // <div></div>
- 创建出来的就是一个可以使用的 div 元素
createTextNode
:用于创建一个文本节点
// 创建一个文本节点
var oText = document.createTextNode('我是一个文本')
console.log(oText) // "我是一个文本"
向页面中加入一个节点
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>
删除页面中的某一个节点
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>
修改页面中的某一个节点
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>
克隆某一个节点
cloneNode
:将页面中的某一个节点克隆一份- 语法:
节点.cloneNode(boolean)
boolean为true的时候会拷贝后代所有的节点,false或者不传只克隆当前自身节点