JavaScript操作DOM对象
一、DOM概述
Document Object Model，即文档对象模型
DOM
DOM Core
CSS-DOM
HTML-DOM
节点与节点的关系
二、访问节点
使用getElement系列方法访问指定节点
getElementById() 通过id访问节点
getElementsByName() 通过类名访问节点
getElementsByTagName() 通过标签访问节点
根据层次关系访问节点
节点属性
parentNode 返回节点的父节点
childNodes 返回子节点集合，childNodes[i]
firstChild 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastChild 返回节点的最后一个子节点
nextSibling 下一个节点
previousSibling 上一个节点
三、element属性
firstElementChild 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastElementChild 返回节点的最后一个子节点
nextElementSibling 下一个节点
previousElementSibling 上一个节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul id="nodeList">
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
<script>
var nodes = document.getElementById("nodeList");
var node = nodes.firstElementChild;
console.log(nodes);
console.log(node);
</script>
</body>
</html>
运行结果：
四、节点信息
nodeName：节点名称
nodeValue：节点值
nodeType：节点类型
元素element 1
属性attr 2
文本text 3
注释comments 8
文档document 9
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" value="请输入" id="a">
<script>
var name = document.getElementById("a").nodeName;
var value = document.getElementById("a").nodeValue;
var type = document.getElementById("a").nodeType;
console.log(name);
console.log(value);
console.log(type);
</script>
</body>
</html>
运行结果：
五、操作节点属性
getAttribute(“属性名”)
setAttribute(“属性名”,“属性值”)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
<input value="OK">
<p id="demo">点击下面的按钮来设置按钮的类型属性。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
document.getElementsByTagName("INPUT")[0].setAttribute("type","button");
};
</script>
<p>Internet Explorer 8 及更早的版本不支持 setAttribute 方法。</p>
</body>
</html>
运行结果：
点击后：
六、创建和插入节点
createElement( tagName) 创建一个标签名为tagName的新元素节点
A.appendChild( B) 把B节点追加至A节点的末尾
insertBefore( A,B ) 把A节点插入到B节点之前
cloneNode(deep) 复制某个指定的节点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
<p id="demo">单击按钮创建有文本的按钮</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
var btn=document.createElement("BUTTON");
var t=document.createTextNode("CLICK ME");
btn.appendChild(t);
document.body.appendChild(btn);
};
</script>
</body>
</html>
运行结果：
七、删除和替换节点
removeChild( node) 删除指定的节点
replaceChild( newNode, oldNode)属性attr 用其他的节点替换指定的节点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
<ul id="myList"><li>Coffee</li><li>Tea</li><li>Milk</li></ul>
<p id="demo">单击按钮替换列表中的第一项。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
var textnode=document.createTextNode("Water");
var item=document.getElementById("myList").childNodes[0];
item.replaceChild(textnode,item.childNodes[0]);
}
</script>
<p>首先创建一个文本节点。<br>然后替换第一个列表中的第一个子节点。</p>
<p><strong>注意:</strong>这个例子只将文本节点的文本节点“Coffee”替换为“Water”,而不是整个LI元素,这也是替换节点的一种备选。</p>
</body>
</html>
运行结果：
点击后：
八、style属性
语法：HTML元素.style.样式属性＝"值"
document.getElementById("titles").style.color="#ff0000"; document.getElementById("titles").style.fontSize="25px ";
九、className属性
语法：HTML元素.className=“样式名称”
function over(){
document.getElementById("cart").className="cartOver";
document.getElementById("cartList").className="cartListOver";
}
十、获取元素样式
语法：HTML元素.style.样式属性;
不支持IE浏览器
document.defaultView.getComputedStyle(元素,null).属性;
兼容IE浏览器
HTML元素. currentStyle.样式属性;
十一、HTML中元素属性
offsetLeft 返回当前元素左边界到它上级元素的左边界的距离，只读属性
offsetTop 返回当前元素上边界到它上级元素的上边界的距离，只读属性
offsetHeight 返回元素的高度
offsetWidth 返回元素的宽度
offsetParent 返回元素的偏移容器，即对最近的动态定位的包含元素的引用
scrollTop 返回匹配元素的滚动条的垂直位置
scrollLeft 返回匹配元素的滚动条的水平位置
clientWidth 返回元素的可见宽度
clientHeight 返回元素的可见高度
标准浏览器应用属性案例
document.documentElement.scrollTop;
document.documentElement.scrollLeft;
Chrome应用属性案例
document.body.scrollTop;
document.body.scrollLeft;
扫一扫
1523
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
