本文介绍了一系列DOM操作技巧，包括获取元素与节点的方法、解决浏览器兼容性问题、通过节点操作元素样式等，帮助开发者更好地掌握DOM操作。
1.12个获取元素与节点的代码
（1）基本概念
①文档：document
②元素：页面中所有的标签，元素-----element，标签---->元素---->对象
③节点：页面中所有的内容（标签、文本（文字、换行、空格、回车）、属性），节点-----Node
④根元素：html标签
（2）节点的属性（可以使用标签--元素.出来，可以使用属性节点.出来，文本节点.出来）
①nodeType：节点的类型：1-----标签，2-----属性，3-----文本
②nodeName：节点的名字：标签节点-----大写的标签名字，属性节点-----小写的属性名字，文本节点-----#text
③nodeValue：节点的值：标签节点-----null，属性节点-----属性值，文本节点-----文本内容
<style>
div {
width: 300px;
height: 300px;
background-color: grey;
}
</style>
<div id="dv">
<span>我是一个span</span>
<p>这是div中的第二个元素，第一个p标签</p>
<ul id="uu">
<li>Chandler</li>
<li>Monica</li>
<li id="brother">Ross</li>
<li>Rachel</li>
<li>Phoebe</li>
<li>Joey</li>
</ul>
</div><script>
//获取ul
var dvObj = my$("uu");
//1.获取父级节点
console.log(dvObj.parentNode);
//2.获取父级元素
console.log(dvObj.parentElement);
//3.子节点
console.log(dvObj.childNodes);
//4.子元素
console.log(dvObj.children);
//5.第一个子节点
console.log(dvObj.firstChild);
//6.第一个子元素
console.log(dvObj.firstElementChild);
//7.最后一个子节点
console.log(dvObj.lastChild);
//8.最后一个子元素
console.log(dvObj.lastElementChild);
//9.某个元素的前一个兄弟节点
console.log(my$("brother").previousSibling);
//10.某个元素的前一个兄弟元素
console.log(my$("brother").previousElementSibling);
//11.某个元素的后一个兄弟节点
console.log(my$("brother").nextSibling);
//12.某个元素的后一个兄弟元素
console.log(my$("brother").nextElementSibling);
</script>效果：
2.通过节点操作元素的背景颜色
<hr/>
<input type="button" value="变色" id="btn"/>
<div id="dv">
<p>我是一个p</p>
<span>我是一个span</span>
<p>我是一个p</p>
<span>我是一个span</span>
<p>我是一个p</p>
<span>我是一个span</span>
<p>我是一个p</p>
<span>我是一个span</span>
</div><script>
var pObj = my$("dv").childNodes;
my$("btn").onclick = function () {
for (var i = 0; i < pObj.length; i++) {
if (pObj[i].nodeName == "P" && pObj[i].nodeType == "1") {
pObj[i].style.backgroundColor = "red";
} else if (pObj[i].nodeName == "SPAN" && pObj[i].nodeType == "1") {
pObj[i].style.backgroundColor = "yellow";
}
}
}
</script>点击前：
点击后：
3.节点操作隔行变色
<hr/>
<input type="button" value="变色" id="btn"/>
<ul id="uu">
<li>Chandler</li>
<li>Ross</li>
<li>Phoebe</li>
<li>Rachel</li>
<li>Monica</li>
<li>Joey</li>
</ul><script>
var list = my$("uu").childNodes;
my$("btn").onclick = function () {
var count = 0;
for (var i = 0; i < list.length; i++) {
if (list[i].nodeName == "LI" && list[i].nodeType == "1") {
list[i].style.backgroundColor = count % 2 ? "red" : "yellow";
count++;
}
}
};
</script>点击前：
点击后：
4.节点兼容代码
第一个节点和第一个元素的获取的代码在IE8中会出现不兼容的情况，如下：element.firstChild--->谷歌和火狐获取的是第一个子节点
element.firstChild--->IE8获取的是第一个子元素
element.firstElementChild------>谷歌和火狐是第一个子元素,IE8不支持
就说明我们需要设置一个函数用来解决这种兼容问题，获取第一个子元素的兼容函数
<ul id="uu">
<li>Chandler</li>
<li>Ross</li>
<li>Phoebe</li>
<li>Rachel</li>
<li>Monica</li>
<li>Joey</li>
</ul><script>
//获取任意一个父级元素的第一个子级元素
//首先是传入一个元素，然后获取其中的子元素
function getFirstElement(element) {
if (element.firstElementChild) { //如果为true------支持，如果为false------不支持
return element.firstElementChild;
} else {
//return element.firstChild;
//以上这种方法如果遇上不支持firstElementChild且认为firstChild获取的是子节点的话就不通用了
//所以需要以下方式：
var ele = element.firstChild;
//循环判定ele是否是一个元素，如果不是则选择其下一个兄弟节点
while (ele && ele.nodeType != 1) {
ele = ele.nextSibling;
}
//跳出循环即说明已经获取到第一个元素，则返回
return ele;
}
}
function getLastElement(element) {
if (element.lastElementChild) { //如果为true说明浏览器支持，如果为false说明不支持
return element.lastElementChild;
} else {
//return element.lastChild;
//以上这种方法如果遇上不支持lastElementChild且认为lastChild获取的是子节点的话就不通用了
//所以需要以下方式：
var ele = element.lastChild;
//循环判定ele是否是一个元素，如果不是则选择其下一个兄弟节点
while (ele && ele.nodeType != 1) {
ele = ele.previousSibling;
}
//跳出循环即说明已经获取到第一个元素，则返回
return ele;
}
}
var a = getFirstElement(my$("uu"));
var b = getLastElement(my$("uu"));
console.log("我是第一个元素:" + a.innerText);
console.log("我是最后一个元素:" + b.innerText);
</script>效果：
5.为网页设置背景图片
<style>
* {
margin: 0px;
padding: 0px;
}
body {
background-image: url("images/1.jpg");
}
#mask {
background-color: rgba(255, 255, 255, 0.3);
height: 200px;
text-align: center;
}
#mask img {
width: 200px;
margin-top: 35px;
cursor: pointer;
}
</style><!--这个案例为body加上了id="bd"-->
<div id="mask">
<img src="images/1.jpg" alt="">
<img src="images/2.jpg" alt="">
<img src="images/3.jpg" alt="">
</div><script>
//首先需要获取img，同时为img注册点击事件
var imgObj = my$("mask").getElementsByTagName("img");
for (var i = 0; i < imgObj.length; i++) {
imgObj[i].onclick = function () {
//获取body，然后为body设置背景图片
document.body.style.backgroundImage = "url(" + this.src + ")";
//设置的格式是关键，需要牢记！！
}
}
</script>重点牢记一下背景图片的设置格式
效果：
点击其他图片：
6.通过节点解决全选和全不选问题
<style>
* {
padding: 0;
margin: 0;
}
.wrap {
width: 300px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 300px;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
td {
font: 14px "微软雅黑";
}
tbody tr {
background-color: #f0f0f0;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
</style><div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="j_cbAll"/>
</th>
<th>菜名</th>
<th>饭店</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>
<input type="checkbox"/>
</td>
<td>红烧肉</td>
<td>田老师</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>西红柿鸡蛋</td>
<td>田老师</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>油炸榴莲</td>
<td>田老师</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>清蒸助教</td>
<td>田老师</td>
</tr>
</tbody>
</table>
</div><script>
//1.首先是点击全选按钮就全选四个，取消全选按钮就四个都取消选择
//获取总复选框
var BiObj = my$("j_cbAll");
//获取小复选框
var LiObj = my$("j_tb").getElementsByTagName("input");
//为总复选框注册点击事件
BiObj.onclick = function () {
//console.log(this.checked);
for (var i = 0; i < LiObj.length; i++) {
LiObj[i].checked = this.checked;
}
};
//2.然后是点击满四个就全选
//首先遍历四个按钮来分别注册点击事件
for (var j = 0; j < LiObj.length; j++) {
LiObj[j].onclick = function () {
var flag = true; //设定一个复选框的条件，并且默认复选框是被选中的
for (var k = 0; k < LiObj.length; k++) {
//循环遍历判断四个小复选框有没有被选中
if (!LiObj[k].checked) {
//如果没有被选中，就设flag为false
//并且用break跳出for循环
flag = false;
break;
}
}
//如果全部被选中，则flag默认为true，则总复选框会被选中
//如果有一个或多个没有被选中，flag会被设置为false，则复选框不会被选中
BiObj.checked = flag;
};
}
</script>
扫一扫
685
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
