回顾：
文档:document
元素:页面中所有的标签,元素---element, 标签----元素---对象
节点:页面中所有的内容(标签,属性,文本(文字,换行,空格,回车)),Node
根元素:html标签节点的相关属性
nodeType:节点的类型:1----标签,2---属性,3---文本
nodeName:节点的名字:标签节点---大写的标签名字,属性节点---小写的属性名字,文本节点----#text
nodeValue:节点的值:标签节点---null,属性节点---属性值,文本节点---文本内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="dv">div<span id="sp"></span>span<p></p>p<h1></h1>h1</div>
<script>
var divobj=document.getElementById("dv");
var nodes=divobj.childNodes;
for (var i=0;i<nodes.length;i++){
var node=nodes[i];
console.log(node.nodeType+"---"+node.nodeName+"---"+node.nodeValue);
}
//输出
//3---#text---div
//1---SPAN---null
//3---#text---span
//1---P---null
//3---#text---p
//1---H1---null
//3---#text---h1
console.log(nodes);
//NodeList(7) [text, span#sp, text, p, text, h1, text]
var divattr=divobj.getAttributeNode("id");
console.log(divattr.nodeType+"---"+divattr.nodeName+"---"+divattr.nodeValue);
//输出 2---id---dv
var spannode=document.getElementById("sp").childNodes;
for (var i=0;i<spannode.length;i++){
var node=spannode[i];
console.log(node.nodeType+"---"+node.nodeName+"---"+node.nodeValue);
}
</script>
</body>
</html>childNodes和children的区别：
childNodes：子节点
children：子元素
var nodes=divobj.childNodes;
var nodech=divobj.children;
console.log(nodes);
//NodeList(7) [text, span#sp, text, p, text, h1, text]
console.log(nodech);
//HTMLCollection(3) [span#sp, p, h1, sp: span#sp]获取相关的节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="dv">我是div
<span>我是span</span>
<p>我是p</p>
<ul id="uu">我是uu的第一个子节点
<li>1</li>
<li>2</li>
<li id="three">3</li>
<li>4</li>
<li>5</li>我是uu的最后一个子节点
</ul>
</div>
<script>
var dvobj=document.getElementById("dv");
var ulobj=document.getElementById("uu");
//获取父级节点
console.log(ulobj.parentNode);
//获取父级元素
console.log(ulobj.parentElement);
//子节点
console.log(ulobj.childNodes);//NodeList(11) [text, li, text, li, text, li#three, text, li, text, li, text]
//子元素
console.log(ulobj.children);//HTMLCollection(5) [li, li, li#three, li, li, three: li#three]
console.log("------------------------------------------------");
//第一个子节点
console.log(ulobj.firstChild);//IE8中是第一个子元素
//第一个子元素
console.log(ulobj.firstElementChild);//IE8中不支持
//最后一个子节点
console.log(ulobj.lastChild);//IE8中是第一个子元素
//最后一个子元素
console.log(ulobj.lastElementChild);//IE8中不支持
//某个元素的前一个兄弟节点
var th=document.getElementById("three");
console.log(th.previousSibling);
//某个元素的前一个兄弟元素
console.log(th.previousElementSibling);
//某个元素的后一个兄弟节点
console.log(th.nextSibling);
//某个元素的后一个兄弟元素
console.log(th.nextElementSibling);
</script>
</body>
</html>点击按钮设置div中的p标签改变背景颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 300px;
height: 450px;
border: 1px solid darkcyan;
}
</style>
</head>
<body>
<input type="button" id="btn" value="改变背景"/>
<div id="dv">
<span>我是span</span>
<p>我是p</p>
<span>我是span</span>
<p>我是p</p>
<span>我是span</span>
<p>我是p</p>
<span>我是span</span>
</div>
<script>
document.getElementById("btn").onclick = function () {
var nodes = document.getElementById("dv").childNodes;
for (var i = 0; i < nodes.length; i++) {
if (nodes[i].nodeType == 1 && nodes[i].nodeName == "P") {
nodes[i].style.backgroundColor = "red";
}
}
};
</script>
</body>
</html>全选和全不选的复选框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<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>
</head>
<body>
<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>IphoneX</td>
<td>9999</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>笔记本</td>
<td>5000</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>手表</td>
<td>1000</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>饮料</td>
<td>5</td>
</tr>
</tbody>
</table>
</div>
<script>
//获取全选的复选框
var ck_All = document.getElementById("j_cbAll");
//获取tbody的所有小复选框
var cks = document.getElementById("j_tb").getElementsByTagName("input");
//点击全选，获取他当前的状态，然后设置tbody的复选框的状态
ck_All.onclick = function () {
for (var i = 0; i < cks.length; i++) {
cks[i].checked = this.checked;
}
};
//获取tbody中所有的复选框，分别注册点击事件
for (var i = 0; i < cks.length;
i++
) {
cks[i].onclick = function () {
var flag = true;//都被选中了
//判断是否所有的复选框都选中
for (var j = 0; j < cks.length; j++) {
if (!cks[j].checked) {
//没被选中
flag = false;
break;
}
}
ck_All.checked = flag;
};
}
</script>
</body>
</html>