目录
一、DOM：Document Object Model（文档对象模型）
二、访问节点
使用getElement系列方法访问指定节点
- getElementById()
- getElementsByName()
- getElementsByTagName()
根据层次关系访问节点
三、根据层次关系访问节点
| 属性名称 | 描述 |
|---|---|
| parentNode | 返回节点的父节点 |
| childNodes | 返回子节点集合，childNodes[i] |
| firstChild | 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点 |
| lastChild | 返回节点的最后一个子节点 |
| nextSibling | 下一个节点 |
| previousSibling | 上一个节点 |
| firstElementChild | 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点 |
| lastElementChild | 返回节点的最后一个子节点 |
| nextElementSibling | 下一个节点 |
| previousElementSibling | 上一个节点 |
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function one() {
var p_a = document.getElementById("p-a");
// 返回节点的父节点 类型
let parentNode = typeof p_a.parentNode;
alert(parentNode);
document.getElementById("one").textContent = "父节点类型" + parentNode;
}
function two() {
var p_all = document.getElementById("childNodes").childNodes;
// 返回子节点集合 类型
let childNodes = typeof p_all;
alert(p_all);
document.getElementById("two").textContent = "返回子节点集合" + childNodes;
}
</script>
</head>
<body>
<h1>h1标签</h1>
<h2>h2标签</h2>
<h3>h3标签</h3>
<p id="childNodes">段落
<a id="p-a">p中的a标签</a>
<a>这是一个标签</a>
</p>
<a>标签</a>
<br/><br/>
<div style="background:rgba(0,0,255,0.45);">
<p><button onclick="one()">返回节点的父节点</button><a id="one"></a></p>
<p><button onclick="two()">返回节点的子节点集合</button><a id="two"></a></p>
</div>
</body>
</html>
四、节点信息
nodeName：节点名称
nodeValue：节点值
nodeType：节点类型
| 节点类型 | NodeType值 |
|---|---|
| 元素element | 1 |
| 属性attr | 2 |
| 文本text | 3 |
| 注释comments | 8 |
| 文档document | 9 |
五、操作节点
1.操作节点属性
getAttribute(“属性名”)
setAttribute(“属性名”,“属性值”)
2.创建和插入节点
| 名称 | 描述 |
|---|---|
| createElement( tagName) | 创建一个标签名为tagName的新元素节点 |
| A.appendChild( B) | 把B节点追加至A节点的末尾 |
| insertBefore( A,B ) | 把A节点插入到B节点之前 |
| cloneNode(deep) | 复制某个指定的节点 |
3.删除和替换节点
| 名称 | 描述 |
|---|---|
| removeChild( node) | 删除指定的节点 |
| replaceChild( newNode, oldNode) | 用其他的节点替换指定的节点 |
六、style属性
语法：
HTML元素.style.样式属性＝"值"
document.getElementById("titles").style.color="#ff0000";
document.getElementById("titles").style.fontSize="25px ";
七、事件
| 名称 | 描述 |
|---|---|
| onclick | 当用户单击某个对象时调用事件 |
| onmouseover | 鼠标移到某元素之上 |
| onmouseout | 鼠标从某元素移开 |
| onmousedown | 鼠标按钮被按下 |
function over(){
document.getElementById("cart").style.backgroundColor="#ffffff";
document.getElementById("cart").style.zIndex="100";
document.getElementById("cart").style.borderBottom="none";
document.getElementById("cartList").style.display="block";
document.getElementById("cartList").style.position="relative";
document.getElementById("cartList").style.top="-1px";
}
八、className属性
语法：
HTML元素.className=“样式名称”
function over(){
document.getElementById("cart").className="cartOver";
document.getElementById("cartList").className="cartListOver";
}
function out(){
document.getElementById("cart").className="cartOut";
document.getElementById("cartList").className="cartListOut";
}
九、获取元素的样式
语法：
HTML元素.style.样式属性;(这个方法只能获取写在html标签中的style属性的值)
alert(document.getElementById("adver").style.top);
语法：
document.defaultView.getComputedStyle(元素,null).属性;
var adverObj=document.getElementById("adver");
alert(document.defaultView.getComputedStyle(adverObj,null). top);
语法：
HTML元素. currentStyle.样式属性;
alert(document.getElementById(“adver").currentStyle.top);
十、HTML中元素属性
| 属性 | 描述 |
|---|---|
| offsetLeft | 返回当前元素左边界到它上级元素的左边界的距离，只读属性 |
| offsetTop | 返回当前元素上边界到它上级元素的上边界的距离，只读属性 |
| offsetHeight | 返回元素的高度 |
| offsetWidth | 返回元素的宽度 |
| offsetParent | 返回元素的偏移容器，即对最近的动态定位的包含元素的引用 |
| scrollTop | 返回匹配元素的滚动条的垂直位置 |
| scrollLeft | 返回匹配元素的滚动条的水平位置 |
| clientWidth | 返回元素的可见宽度 |
| clientHeight | 返回元素的可见高度 |
十一、元素属性应用
语法
// 标准浏览器
document.documentElement.scrollTop;
document.documentElement.scrollLeft;
// 或者
// Chrome
document.body.scrollTop;
document.body.scrollLeft;
扫一扫
679
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
