节点操作

[ 导语 ] DOM 提供节点操作的方法，是因为：DOM 节点关系指针都是只读的。

通过修改myUl的父级节点来修改其节点关系，但由于parentNode属性是只读的，所以修改无效，在IE8-浏览器下甚至会报错。 <div id="myDiv"></div> <ul id="myUl"> <li id="myli"></li> </ul> <script> console.log(myUl.parentNode); // <body> myUl.parentNode = myDiv; // 标准浏览器下，依然返回<body>；而IE8-浏览器则会报错 console.log(myUl.parentNode); </script>

1
2
3
4
5
6
7
8
9
10
11
12

通过修改myUl的父级节点来修改其节点关系，但由于parentNode属性是只读的，所以修改无效，在IE8-浏览器下甚至会报错。

<div id="myDiv"></div>
<ul id="myUl">
    <li id="myli"></li>
</ul>
<script>
   console.log(myUl.parentNode);  // <body>
   myUl.parentNode = myDiv;
   // 标准浏览器下，依然返回<body>；而IE8-浏览器则会报错
   console.log(myUl.parentNode);
</script>

获取页面元素

为什么要获取页面元素？

例如，我们想要操作页面上的某部分（显示/隐藏），需要先获取到该部分对应的元素，才能进行后续操作。

DOM获取节点通常有以下两种方式：

1. 通过节点关系获取节点 // 缺点：可维护性差（一旦节点位置发生变化，就会影响到通过关系获取节点）

2. 通过接口获取节点，主要有以下几个方法：

[1] element = document.getElementById(id)？↓ 根据 id 获取元素

element 是一个 Element 对象，如果当前文档中拥有特定 ID 的元素；不存在，则返回null。

// only document / sole

   var hello = document.getElementById("hello");

// only document / sole

var hello = document.getElementById("hello");

[2] collection = element.getElementsByTagName(tagName)？↓ 根据标签名获取元素

该方法接收一个参数，即要取得元素的标签名，返回包含0或多个元素的类数组对象HTMLCollection。

// collection is live

   <div id="users">
	   <h2>8882人在学习该课程：</h2>
	   <ul>                                                         [
		   <li class="user">Satoshi</li>                              li.user
		   <li class="user">春来草青</li>                               li.user
		   <li class="user last">Kash</li>                            li.user.last
	   </ul>                                                        ]
   </div>

   users.getElementsByTagName("li")
   users.getElementsByTagName("li")[2]     // li.user.last
   users.getElementsByTagName("*")      // 获取所有后代元素

// collection is live

<h2>8882人在学习该课程：</h2>

<ul> [

<li class="user">Satoshi</li> li.user

<li class="user">春来草青</li> li.user

<li class="user last">Kash</li> li.user.last

</ul> ]

</div>

users.getElementsByTagName("li")

users.getElementsByTagName("li")[2] // li.user.last

users.getElementsByTagName("*") // 获取所有后代元素

~~[3]~~collection =element.getElementsByClassName(className)？↓

users.getElementsByClassName("user")
users.getElementsByClassName("user")[2]       // li.user.last
users.getElementsByClassName("user last")     // li.user.last

// 兼容性问题：IE8-浏览器不支持

users.getElementsByClassName("user")

users.getElementsByClassName("user")[2] // li.user.last

users.getElementsByClassName("user last") // li.user.last

// 兼容性问题：IE8-浏览器不支持

~~[4]~~ list = element.querySelector/All(selector)？↓ 根据选择器来获取元素

// list不是动态的，一旦获取就不会变化

   var users = document.querySelector("#users");     // div#users
   users = querySelectorAll(".user"); 	             // [li.user,li.user,li.user.last]
   document.querySelectorAll("#users .user");        // 同上

// 兼容性问题：所有移动端浏览器都支持；PC端，IE8+支持

// list不是动态的，一旦获取就不会变化

var users = document.querySelector("#users"); // div#users

users = querySelectorAll(".user"); // [li.user,li.user,li.user.last]

document.querySelectorAll("#users .user"); // 同上

// 兼容性问题：所有移动端浏览器都支持；PC端，IE8+支持

元素的内容？↓

[1] innerHTML & innerText：用于获取开始标签和结束标签之间的内容。区别在于：

innerHTML：获取内容的时候，如果内容内容中有标签，也会把标签获取到（原封不动把内容获取到）；

innerText：获取内容的时候，如果内容中有标签，会把标签过滤掉（会把前后的换行和空白都去掉）；

   <div id="box">
		 我是一个div
		 <span>这是一个span</span>
	</div>
	<script>
		var box = document.getElementById('box');

		console.log(box.innerHTML);		/* 我是一个div
										      <span>这是一个span</span> */
		console.log(box.innerText);		// 我是一个div 这是一个span
	</script>

// innerHTML是万能的，但存在覆盖之前的事件状态、内存泄漏、安全等问题，建议仅用于创建新的节点。

我是一个div

<span>这是一个span</span>

</div>

var box = document.getElementById('box');

console.log(box.innerHTML); /* 我是一个div

<span>这是一个span</span> */

console.log(box.innerText); // 我是一个div 这是一个span

</script>

// innerHTML是万能的，但存在覆盖之前的事件状态、内存泄漏、安全等问题，建议仅用于创建新的节点。

[ 设置标签之间的内容 ]

box.innerHTML = ''; // 清空内容 // 通过 innerHTML 设置内容，如果内容中有标签，会以HTML的方式进行解析 box.innerHTML = '<b>测试</b>内容'; // 通过 innerText 设置内容，如果内容中有标签，会把标签在网页上显示出来（纯文本 - 转义字符原理） box.innerText = '<b>测试</b>内容';

1
2
3
4
5
6
7

box.innerHTML = '';     // 清空内容

// 通过 innerHTML 设置内容，如果内容中有标签，会以HTML的方式进行解析
    box.innerHTML = '<b>测试</b>内容';

// 通过 innerText 设置内容，如果内容中有标签，会把标签在网页上显示出来（纯文本 - 转义字符原理）
    box.innerText = '<b>测试</b>内容';

[2] innerText & textContent：用于获取内部文本，其主要区别在于浏览器的兼容问题。

谷歌：两个都支持

新版的FF：两个都支持

旧版的FF：只支持 textContent

新版的IE（IE9+）：两个都支持

旧版的IE：只支持 innerText

var box = document.getElementById('box');
console.log(getInnerText(box));

// 处理innerText的兼容性问题
function getInnerText(element){
	// 判断当前浏览器是否支持元素的innerText属性。支持，则使用element.innerText获取内容，不支持，则使用element.textContent获取内容
	if(typeof element.innerText === 'string'){
		return element.innerText;
	}else{
		return element.textContent;
	}
}

var box = document.getElementById('box');

console.log(getInnerText(box));

// 处理innerText的兼容性问题

function getInnerText(element){

// 判断当前浏览器是否支持元素的innerText属性。支持，则使用element.innerText获取内容，不支持，则使用element.textContent获取内容

if(typeof element.innerText === 'string'){

return element.innerText;

}else{

return element.textContent;

}

动态创建元素

[1] 创建节点？！ element = document.creatElement(tagName)

// 创建指定标签名称的元素
   var li = document.creatElement("li");

1 2	// 创建指定标签名称的元素 var li = document.creatElement("li");

[2] 插入节点？！

在指定元素后面追加子节点 var achild = element.appendChild(achild);

<div id="users"> <h2>8882人在学习该课程：</h2> <ul></ul> </div> var h2 = document.creatElement('h2'); h2.innerTest = "8882人在学习该课程："； var ul = document.creatElement('ul'); users.appendChild(h2); users.addpendChild(ul);

1
2
3
4
5
6
7
8
9
10

<div id="users">
<h2>8882人在学习该课程：</h2>
<ul></ul>
</div>

var h2 = document.creatElement('h2');
h2.innerTest = "8882人在学习该课程："；
var ul = document.creatElement('ul');
users.appendChild(h2);
users.addpendChild(ul);

在指定元素的指定子节点前面添加节点 var achild = element.insertBefore(achild,referenceChild);

<div id="users"> <h2>8882人在学习该课程：</h2> <ul></ul> </div> var h2 = doucment.creatElement("h2"); h2.innerText = "8882人在学习该课程："; var ul = document.creatElement('ul'); users.appendChild(ul); users.insertBefore(h2,ul);

1
2
3
4
5
6
7
8
9
10

<div id="users">
<h2>8882人在学习该课程：</h2>
<ul></ul>
</div>

var h2 = doucment.creatElement("h2");
h2.innerText = "8882人在学习该课程：";
var ul = document.creatElement('ul');
users.appendChild(ul);
users.insertBefore(h2,ul);

[3] 删除节点？！ child = element.removeChild(child)

var user2 = users.getElementsByClassName("users")[1];
user2.parentNode.removeChild(user2);

1 2	var user2 = users.getElementsByClassName("users")[1]; user2.parentNode.removeChild(user2);

[4] 其他常用元素操作的方法

替换节点 oldChild.parentNode.replaceChild(newChild, oldChild);

<div id="div1">1</div> <div id="div2">2</div> <div id="div3">3</div> <button id="btn1">新增节点替换(4替换2)</button> <button id="btn2">原有节点替换(3替换1)</button> <script> btn2.onclick = function(){ document.body.replaceChild(div3,div1); } btn1.onclick = function(){ var div4 = document.createElement('div'); div4.innerHTML = '4'; document.body.replaceChild(div4,div2); } </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
<button id="btn1">新增节点替换(4替换2)</button>
<button id="btn2">原有节点替换(3替换1)</button>
<script>
    btn2.onclick = function(){
        document.body.replaceChild(div3,div1);
    }
    btn1.onclick = function(){
        var div4 = document.createElement('div');
        div4.innerHTML = '4';
        document.body.replaceChild(div4,div2);
    }
</script>

复制节点   list = element.cloneNode( true | false ) boolean值，表示是否执行深复制

cloneNode()不会复制添加到DOM节点中的JS属性，如事件处理等；只复制特性和子节点，其他一切都不会复制。

<ul id="list"> <li>1</li> <li>2</li> <li>3</li> </ul> <script> var oList = document.getElementById('list'); oList.index = 0; var deepList = oList.cloneNode(true); // 成功复制子节点 console.log(deepList.children.length);// 3 // 但并没有复制属性 console.log(deepList.index);//undefined var shallowList = oList.cloneNode(); // 浅复制不复制子节点（复制节点本身） console.log(shallowList.children.length);// 0 </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
  var oList = document.getElementById('list');
  oList.index = 0;

  var deepList = oList.cloneNode(true);
  // 成功复制子节点
  console.log(deepList.children.length);// 3
  // 但并没有复制属性
  console.log(deepList.index);//undefined
  var shallowList = oList.cloneNode();
  // 浅复制不复制子节点（复制节点本身）
  console.log(shallowList.children.length);// 0
</script>