目录：
1.节点的概念
2.节点的属性(nodeType,nodeName,nodeValue)
3.父节点(父元素)
4.获取子节点或子元素
5.获取节点、元素的方法（12行代码）
6.案例：div标签里面的p标签背景高亮(使用子节点或子元素的方式)
7.封装节点兼容代码
8.案例：切换背景图片
9.案例：全选、全不选
10.元素创建的第一种方式 document.write("<p>文本</P>");
11.元素创建的第二种方式 document.getElementById("divId").innerHTML="<p>新添加的文本</P>";
12.案例：点击按钮，在div中加载一张图片
13.案例：动态创建列表(元素创建的第二种方式)
14.第三种元素创建方式 var pEle = document.createElement("p");
15.案例：动态创建列表(使用第三种元素创建方式)
16.动态创建表格(使用第三种元素创建方式)
17.【操作元素的一些方法】
18.点击按钮，创建元素(只创建一次)
19.为元素绑定多个事件
20.为元素绑定事件的兼容代码
1.节点的概念 <--返回目录
* 文档：document
* 元素：element,页面中所有的标签都是元素，标签--元素--对象
* 节点：node，页面中所有的内容(标签、属性、文本)
* 根元素：html这个标签
2.节点的属性(nodeType,nodeName,nodeValue) <--返回目录
* 节点的属性：可以通过标签(属性或文本).点出来
* 节点类型nodeType:1--标签，2--属性，3--文本
* 节点名称nodeName：标签节点--大写的标签名字，属性节点--小写的属性名字，文本节点--#text
* 节点的值nodeValue:标签节点--null，属性节点--属性值，文本节点--文本内容
3.父节点(父元素) <--返回目录
* 只有标签可以作为父节点(父元素)
- 获取所有的父节点 ele.parentNode;
- 获取所有的父元素 ele.parentElement;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
</head>
<body>
<div id="box">
div里面的文本
<p>p里面的文本</p>
</div>
<script type="text/javascript">
var pEle = document.getElementById("box").getElementsByTagName("p")[0];
console.log(pEle.parentNode);//[object HTMLDivElement]---说明父节点是标签
console.log(pEle.parentElement);//[object HTMLDivElement]---说明父元素是标签
var parentEle= pEle.parentNode; //获取父标签
console.log(parentEle.nodeType); //1--标签类型
console.log(parentEle.nodeName); //DIV--标签名字
console.log(parentEle.nodeValue); //null--标签的值
</script>
</body>
</html>
4.获取子节点或子元素 <--返回目录
* 获取所有的子节点 ele.childNodes;
* 获取所有的子元素(子标签) ele.children;
【获取子节点或子元素】
<div id="box">
div里面的文本
<p>p里面的文本</p>
<a href=""></a>
</div>
<script type="text/javascript">
var divEle = document.getElementById("box");
console.log(divEle.childNodes);//子节点NodeList(5) [ #text, p, #text, a, #text ]
console.log(divEle.children);//子元素HTMLCollection [ p, a ]
</script>
代码：【获取子节点】
<div id="box">
div里面的文本
<p>p里面的文本</p>
<a href="">a标签里面的文本</a>
</div>
<script type="text/javascript">
var divEle = document.getElementById("box");
var _childNodes = divEle.childNodes;//子节点NodeList(5) [ #text, p, #text, a, #text ]
for(var i=0;i<_childNodes.length;i++){
console.log(_childNodes[i].nodeType+"---"+_childNodes[i].nodeName+"---"+_childNodes[i].nodeValue);
}
</script>
结果：
3---#text---div里面的文本
1---P---null
3---#text---
1---A---null
3---#text---
【根据属性名字获取属性节点】
<script type="text/javascript">
var ele = document.getElementById("txt");
var attNode = ele.getAttributeNode("name");
console.log(attNode);//属性节点name="username"
alert(attNode);//属性节点[object Attr]
console.log(attNode.nodeType+"---"+attNode.nodeName+"---"+attNode.nodeValue);//2---name---username
</script>
5.获取节点、元素的方法（12行代码） <--返回目录
* 总结：凡是获取节点的代码在谷歌和火狐得到的都是节点，凡是获取元素的代码在谷歌和火狐总都是元素；
除父(子)节点/元素，凡是获取节点的代码在IE8中得到的是元素，获取元素的代码不支持。
//父节点 ele.parentNode; //父元素 ele.parentElement; //子节点 ele.childNodes; //子元素 ele.children; //第一个子节点 ele.firstChild; //第一个子元素 ele.firstElementChild //最后一个子节点 ele.lastChild; //最后一个子元素 ele.lastElementChild; //某个元素的前一个兄弟节点 ele.previousSibling; //某个元素的前一个兄弟元素 ele.previousElementSibling; //某个元素的后一个兄弟节点 ele.nextSibling; //某个元素的后一个兄弟元素 ele.nextElementSibling;
6.案例：div标签里面的p标签背景高亮(使用子节点或子元素的方式) <--返回目录
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
</head>
<body>
<input type="button" value="变色">
<div style="width:300px;border:2px solid blue">
<span>这是span内的文本1</span>
<p>这是p内的文本1</p>
<span>这是span内的文本2</span>
<p>这是p内的文本2</p>
</div>
<script type="text/javascript">
var divEle = document.getElementsByTagName("div")[0];
document.getElementsByTagName("input")[0].onclick=function(){
var eles = divEle.children;//获取div标签里面所有的子标签
//遍历所有的子标签，并判断是否是p标签
for(var i=0;i<eles.length;i++){
if(eles[i].nodeType===1 && eles[i].nodeName==="P"){
eles[i].style.backgroundColor="red";
}
}
};
</script>
</body>
</html>
7.封装节点兼容代码 <--返回目录
获取任意一个父元素的第一个子元素
function getfirstEleChild(ele){
//if(typeof ele.firstElementChild != "undefined"){
if(ele.firstElementChild){ //ele.firstElementChild有值就为true
return ele.firstElementChild;
}else{
var node = ele.firstChild;
while(node && node.nodeType !=1){
node=node.nextSibling;
}
return node;
}
}
获取任意一个父元素的最后一个子元素
function getlastEleChild(ele){
if(ele.lastElementChild){ //ele.lastElementChild有值就为true
return ele.lastElementChild;
}else{
var node = ele.lastChild;
while(node && node.nodeType !=1){
node=node.previousSibling;
}
return node;
}
}
8.案例：切换背景图片 <--返回目录
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<style type="text/css">
img{
width:150px;
}
div{
width: 700px;
margin: 0 auto;
}
body {
background:url("images/1.jpg");/*设置背景图片*/
}
</style>
</head>
<body>
<div id="box">
<img src="images/1.jpg">
<img src="images/2.jpg">
<img src="images/3.jpg">
<img src="images/4.jpg">
</div>
<script type="text/javascript">
var eles = document.getElementById("box").children;
for(var i=0;i<eles.length;i++){
eles[i].onclick=function(){
console.log(this.src);//file:///C:/Users/oy/Desktop/images/2.jpg
document.body.style.background="url("+this.src+")";
console.log("url("+this.src+")");//url(file:///C:/Users/oy/Desktop/images/2.jpg)
};
}
</script>
</body>
</html>
9.案例：全选、全不选 <--返回目录
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
</head>
<body>
<table align="center" width="30%" cellspacing="0" border="1" bgcolor="#eee">
<tr >
<th><input type="checkbox" id="checkboxId"></th>
<th>菜名</th>
<th>饭店</th>
</tr>
<tbody>
<tr align="center">
<td><input type="checkbox" name=""></td>
<td>aa</td>
<td>aa</td>
</tr >
<tr align="center">
<td><input type="checkbox" name=""></td>
<td>aa</td>
<td>aa</td>
</tr>
<tr align="center">
<td><input type="checkbox" name=""></td>
<td>aa</td>
<td>aa</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
var checkboxEle = document.getElementById("checkboxId");
var eles = document.getElementsByTagName("input");
//为第一个checkbox注册点击事件
checkboxEle.onclick=function(){
//如果第一个checkbox选中，则全部选中; 否则，全部取消选中
for(var i=0;i<eles.length;i++){
eles[i].checked=this.checked;
}
};
//为后面3个checkbox注册点击事件
for(var j=1;j<eles.length;j++){
eles[j].onclick=function(){
//判断后面3个checkbox的状态，如果都被选中，则将第一个checkbox也选中
var count=0;//计数器，用于保存选中的checkbox的个数
for(var k=1;k<eles.length;k++){
if(eles[k].checked){
count++;
}
}
//如果计数器count=3，说明后面3个checkbox都被选中了，则将第一个checkbox也选中
//如果计数器count<3，则将第一个checkbox去掉选中
console.log(`count = ${count}`)
if(count == 3){
checkboxEle.checked=true;
}else if(count<3){
checkboxEle.checked=false;
}
};
}
</script>
</body>
</html>
10.元素创建的第一种方式 <--返回目录
document.write("<p>文本</P>");
- 如果是页面加载完毕后，通过该种方式创建元素，页面之前的所有内容被清空
- 如果是页面加载的时候，通过该种方式创建元素，页面之前的所有内容被保留
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
</head>
<body>
<input type="button" id="btn" value="按钮" />
<script type="text/javascript">
var ele = document.getElementById("btn");
ele.onclick=function(){
document.write("<p>文本</P>");//该句代码是在点击按钮后执行，此时页面已经加载完毕,页面之前的所有内容被清空
};
document.write("<p>文本</P>");//页面加载的时候，通过该种方式创建元素，页面之前的所有内容被保留
</script>
</body>
</html>
11.元素创建的第二种方式 <--返回目录
document.getElementById("divId").innerHTML="<p>新添加的文本</P>";
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
</head>
<body>
<input type="button" id="btn" value="按钮" />
<div id="divId" style="width: 300px;height: 200px;border:2px solid pink">div原来的文本</div>
<script type="text/javascript">
var ele = document.getElementById("btn");
ele.onclick=function(){
document.getElementById("divId").innerHTML="<p>新添加的文本</P>";//将原来的文本覆盖了
};
</script>
</body>
</html>
12.案例：点击按钮，在div中加载一张图片 <--返回目录
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<style type="text/css">
img{
width: 300px;
height:300px;
}
</style>
</head>
<body>
<input type="button" id="btn" value="按钮" />
<div id="divId" style="width:300px; height:300px; border:2px solid pink">div原来的文本</div>
<script type="text/javascript">
var ele = document.getElementById("btn");
ele.onclick=function(){
//点击按钮，在div中加载一张图片,加载的图片也会应用已经定义的样式
document.getElementById("divId").innerHTML="<img src=‘a.jpg‘/>";
};
</script>
</body>
</html>
13.案例：动态创建列表(元素创建的第二种方式) <--返回目录
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<input type="button" id="btn" value="按钮" />
<div id="divId" style="width: 300px;height: 300px;border:2px solid pink">div原来的文本</div>
<script type="text/javascript">
var names = ["西施","杨玉环","貂蝉","王昭君"];
var ele = document.getElementById("btn");
ele.onclick=function(){
var str = "<ul style=‘list-style-type:none;cursor:pointer‘>";
for(var i=0;i<names.length;i++){
str += "<li>"+names[i]+"</li>";
}
str += "</ul>";
document.getElementById("divId").innerHTML=str;
};
</script>
</body>
</html>
14.第三种元素创建方式 <--返回目录
var pEle = document.createElement("p");
<input type="button" id="btn" value="按钮" />
<div id="divId" style="width: 300px;height: 300px;border:2px solid pink">div原来的文本</div>
<script type="text/javascript">
document.getElementById("btn").onclick=function(){
var pEle = document.createElement("p");
pEle.innerText="这是p标签里面的文本";
document.getElementById("divId").appendChild(pEle);//在后面追加
};
</script>
15.案例：动态创建列表(使用第三种元素创建方式) <--返回目录
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<input type="button" id="btn" value="按钮" />
<div id="divId" style="width: 300px;height: 300px;border:2px solid pink">div原来的文本</div>
<script type="text/javascript">
var names = ["a","b","c"];
document.getElementById("btn").onclick=function(){
var parent = document.getElementById("divId");
var ulNode = document.createElement("ul");
parent.appendChild(ulNode);
for(var i=0;i<names.length;i++){
var node = document.createElement("li");
node.innerText=names[i];
ulNode.appendChild(node);
node.onmouseover = mouseoverHandler;
node.onmouseout = mouseoutHandler;
}
};
var mouseoverHandler = function (){
this.style.backgroundColor = "#ccc";
};
var mouseoutHandler = function (){
this.style.backgroundColor = "";
};
</script>
</body>
</html>
16.动态创建表格(使用第三种元素创建方式) <--返回目录
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
</head>
<body>
<input type="button" id="btn" value="按钮" />
<div id="divId" style="width: 300px;height: 300px;border:2px solid pink">div原来的文本</div>
<script type="text/javascript">
var names = [
{"name":"百度","href":"http://www.baidu.com"},
{"name":"谷歌","href":"http://www.google.com"},
];
document.getElementById("btn").onclick=function(){
//创建table元素，并添加到div元素下
var parent = document.getElementById("divId");
var table = document.createElement("table");
table.border = "1";
parent.appendChild(table);
for(var i=0;i<names.length;i++){
var node = names[i];
//创建tr元素，并添加到table元素下
var tr = document.createElement("tr");
table.appendChild(tr);
//创建第一列，并添加到tr下
var td = document.createElement("td");
td.innerText = node.name;
tr.appendChild(td);
//创建第二列，并添加到tr下
var td = document.createElement("td");
td.innerHTML = "<a href="+node.href+">"+node.name+"</a>";
tr.appendChild(td);
}
};
</script>
</body>
</html>
17.操作元素的一些方法 <--返回目录
* parentEle.appendChild(node);//追加子元素
* parentEle.insertBefore(newChild,refChild);//在指定的元素refEle之前插入newEle
parentEle.insertBefore(newChild,parentEle.firstElementChild);//在div里面最前面插入newEle
* parentEle.replaceChild(newChild,refChild);//替换
* parentEle.removeChild(parentEle.firstElementChild);//删除第一个子元素
* 删除所有子元素
while(parentEle.firstElementChild){
parentEle.removeChild(parentEle.firstElementChild);//删除第一个子元素
}
18.点击按钮，创建元素(只创建一次) <--返回目录
* 有则删除，无则创建，即创建之前先判断是否存在，存在删除，然后创建
* 或者，创建之前先判断是否存在，存在就什么也不做，不存在就创建。
19.为元素绑定多个事件 <--返回目录
* ele.addEventListener(type,listener,useCapture);//可以为同一个元素绑定多个相同的事件，谷歌火狐都支持，IE8不支持
- 参数一：{string}type 事件的类型，没有on前缀
- 参数二：{Function}listener 事件处理函数
- 参数三：{boolean}useCapture 目前就写false，不解释
* ele.attachEvent("onclick",fn);谷歌火狐不支持，IE8支持
20.为元素绑定事件的兼容代码 <--返回目录
为任意元素，绑定任意的事件,事件处理函数
function addEventListener(ele,type,fn){
//判断浏览器是否支持这个方法
if(ele.addEventListener){
ele.addEventListener(type,fn,false);
}else if(ele.attachEvent){
ele.attachEvent("on"+type,fn);
}else{
ele["on"+type]=fn;
}
}
---
原文地址：https://www.cnblogs.com/xy-ouyang/p/12185293.html