1.操作节点
- 获取节点属性：
语法
getAttribute(“属性名”)；
var value = element.getAttribute("data-custom");
//请注意，获取节点属性时，如果属性不存在，则会返回 null
2.设置节点属性：
语法
setAttribut(“属性名”,“属性值”)；
element.setAttribute("data-custom", "value");
//设置节点属性时，如果属性已存在，则会更新属性值；如果属性不存在，则会创建一个新属性。
2.创建和插入节点
element.appendChild(childNode)：在父节点末尾添加节点
- 代码示例
var parentNode = document.getElementById("parentNode");
parentNode.appendChild(clonedNode);
element.insertBefore(A.B)：在指定节点之前插入节点;
- 代码示例
var referenceNode = document.getElementById("referenceNode");
var parentNode = referenceNode.parentNode;
parentNode.insertBefore(clonedNode, referenceNode);
element.cloneNode（deep）：克隆某个指定的节点
- 代码示例
var originalNode = document.getElementById("originalNode");
var clonedNode = originalNode.cloneNode(true); // 参数为 true 表示深度克隆，复制节点及其所有子节点
3.删除和替换节点
node.removeChild(childNode):删除指定的节点，childNode是要删除的节点，节点被删除它的子节点也会被删除
- 代码示例
var parent = document.getElementById("parent");
parent.removeChild(child);
node.replaceChild(newnode,oldnode):把每一个节点替换为新的节点；
- 代码示例
var parent = document.getElementById("parent");
var newNode = document.createElement("div");
parent.replaceChild(newNode, oldNode);
4.获取元素位置
- offset属性
- offsetTop: 获取当前元素相对于其 offsetParent 元素的顶部内边距的距离。
- offsetLeft: 获取当前元素相对于其 offsetParent 元素的左侧内边距的距离。
- offsetWidth: 获取当前元素的宽度，包括元素的宽度、内边距和边框，但不包括外边距。
- offsetHeight: 获取当前元素的高度，包括元素的高度、内边距和边框，但不包括外边距。
- 代码示例
<style>
#example {
width: 200px;
height: 100px;
padding: 20px;
border: 2px solid black;
position: relative;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div id="example">This is an example element.</div>
<script>
var element = document.getElementById("example");
// 获取元素相对于其 offsetParent 元素的顶部内边距的距离
console.log("Offset Top: " + element.offsetTop);
// 获取元素相对于其 offsetParent 元素的左侧内边距的距离
console.log("Offset Left: " + element.offsetLeft);
// 获取当前元素的宽度，包括元素的宽度、内边距和边框，但不包括外边距
console.log("Offset Width: " + element.offsetWidth);
// 获取当前元素的高度，包括元素的高度、内边距和边框，但不包括外边距
console.log("Offset Height: " + element.offsetHeight);
</script>
- client属性
- clientWidth: 获取元素的内部宽度，包括内边距但不包括滚动条和边框。
- clientHeight: 获取元素的内部高度，包括内边距但不包括滚动条和边框。
- clientTop: 获取元素上边框边界与元素所属文档（document）的顶部之间的距离。
- clientLeft: 获取元素左边框边界与元素所属文档（document）的左侧之间的距离
- 代码示例
<style>
#example {
width: 200px;
height: 100px;
padding: 20px;
border: 2px solid black;
overflow: scroll;
}
</style>
</head>
<body>
<div id="example">This is an example element with scrollbars.</div>
<script>
var element = document.getElementById("example");
// 获取元素的内部宽度，包括内边距但不包括滚动条和边框
console.log("Client Width: " + element.clientWidth);
// 获取元素的内部高度，包括内边距但不包括滚动条和边框
console.log("Client Height: " + element.clientHeight);
// 获取元素上边框边界与文档顶部之间的距离
console.log("Client Top: " + element.clientTop);
// 获取元素左边框边界与文档左侧之间的距离
console.log("Client Left: " + element.clientLeft);
</script>
- scroll属性
- scrollWidth: 获取元素内容的总宽度，即包括不可见部分的完整内容宽度。
- scrollHeight: 获取元素内容的总高度，即包括不可见部分的完整内容高度。
- scrollLeft: 获取或设置元素的水平滚动条相对于左侧的偏移量。
- scrollTop: 获取或设置元素的垂直滚动条相对于顶部的偏移量。
- 代码示例
<style>
#scrollable {
width: 200px;
height: 100px;
border: 2px solid black;
overflow: scroll;
}
#content {
width: 300px;
height: 300px;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div id="scrollable">
<div id="content">This is a scrollable content.</div>
</div>
<script>
var scrollable = document.getElementById("scrollable");
// 获取内容的总宽度，即包括不可见部分的完整内容宽度
console.log("Scroll Width: " + scrollable.scrollWidth);
// 获取内容的总高度，即包括不可见部分的完整内容高度
console.log("Scroll Height: " + scrollable.scrollHeight);
// 获取水平滚动条相对于左侧的偏移量
console.log("Scroll Left: " + scrollable.scrollLeft);
// 获取垂直滚动条相对于顶部的偏移量
console.log("Scroll Top: " + scrollable.scrollTop);
</script>