前端node相关操作汇总

Node 介绍

【DOM】

DOM是文档对象模型的简称。它的基本思想是：

把结构化文档解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。

所有的节点和最终的树状结构，都有规范的对外接口，以达到使用编程语言操作文档的目的（比如增删内容）。

所以，DOM可以理解成文档的编程接口。

【Node】

node是DOM的最小组成单位，一个文档的树形结构就是由各种不同类型的节点组成。

对于HTML文档，node主要有以下六种类型：

Document节点操作页面元素(原生js)

【ownerDocument】

ownerDocument属性返回当前节点所在的顶层文档对象，即document对象。

var d = p.ownerDocument;
d === document // true
console.log(d.nodeName);//#document

【nextSibling】

nextSibling属性返回紧跟在当前节点后面的第一个同级节点。
如果当前节点后面没有同级节点，则返回null。

var el = document.getElementById('div-01').firstChild;
var i = 1;
while (el) {
	console.log(i + '. ' + el.nodeName);
	el = el.nextSibling;
	i++;
}

【previousSibling】

previousSibling属性返回当前节点前面的第一个同级节点。
如果当前节点前面没有同级节点，则返回null。

<a>
	<b id="b1"><b/>
	<b id="b2"><b/>
</a>

document.getElementById("b1").previousSibling		 // null
document.getElementById("b2").previousSibling.id 	 // "b1"

【parentNode】

parentNode属性返回当前节点的父节点。
如果当前节点没有父节点，则返回null（document节点）。

if (node.parentNode) {
	node.parentNode.removeChild(node);
}

【parentElement】

parentElement属性返回当前节点的父元素节点。
如果当前节点没有父节点，或者父节点类型不是Element节点，则返回null。

if (node.parentElement) {
	node.parentElement.style.display = 'none';
}

【textContent】

textContent属性返回当前节点和它的所有后代节点的文本内容。

// HTML代码为
<div id="divA">This is <span>some</span> text</div>
// JS代码为
document.getElementById(“divA”).textContent// This is some text

【nodeValue】

nodeValue属性返回或设置当前节点的值，格式为字符串。
但是nodeValue只对Text节点、Comment节点、XML文档的CDATA节点有效，其他类型的节点一律返回null。

//HTML代码
<a href="#" name="a2-name" id="a2-id">hehehe</a>
<button id="btn">oooooooo</button>

var a2_node = document.getElementById(“a2-id”).firstChild;
console.log(a2_node.nodeValue);
document.getElementById(“btn”).onclick = function(){
	a2_node.nodeValue = ‘呵呵’;//点击按钮能够让a标签标题发生改变
};

因此，nodeValue属性一般只用于Text节点。对于那些返回null的节点，设置nodeValue属性是无效的。

【childNodes】

childNodes属性返回一个节点集合(NodeList)，节点集合中包括当前节点的所有子节点。

需要指出的是，除了HTML中的元素节点之外，该属性返回的还包括Text节点和Comment节点。
如果当前节点不包括任何子节点，则返回一个空的NodeList集合。
由于NodeList对象是一个动态集合，一旦子节点发生变化，立刻会反映在返回结果之中。

var ulNodes = document.querySelector('ul').childNodes;

【firstChild】

firstChild属性返回当前节点的第一个子节点，如果当前节点没有子节点，则返回null。
需要指出的是，除了HTML元素子节点，该属性还包括文本节点和评论节点。

【lastChild】

lastChild属性返回当前节点的最后一个子节点，如果当前节点没有子节点，则返回null。

<ul id="ul" name="ul">
	<li id="li-1" name="li-1">111</li>
	<li id="li-2" name="li-2">222</li>
	<li id="li-3" name="li-3">333</li>
</ul>
var firstNode = document.querySelector('ul').firstChild;
console.log(firstNode.innerText);//111
var lastNode = document.querySelector('ul').lastChild;
console.log(lastNode.innerText);//333

【appendChild()】

appendChild()方法接受一个节点对象作为参数，将其作为最后一个子节点，插入当前节点

var p = document.createElement("p");
document.body.appendChild(p);

【hasChildNodes()】

hasChildNodes()方法返回一个布尔值，表示当前节点是否有子节点。

var foo = document.getElementById("foo");	
if ( foo.hasChildNodes() ) {
	foo.removeChild( foo.childNodes[0] );
}

【childNodes()】

cloneNode()方法用于克隆一个节点。它接受一个布尔值作为参数，表示是否同时克隆子节点。默认是false，即不克隆子节点。

<ul id="ul" name="ul">
<li id="li-1" name="li-1">111</li>
</ul>
var li_clone1 = document.querySelector('li').cloneNode(true);
console.log(li_1.innerText);//"111"
var li_clone2 = document.querySelector('li').cloneNode(false);
console.log(li_1.innerText);//""

需要注意的是，克隆一个节点，会拷贝该节点的所有属性，但是会丧失addEventListener方法和on-属性（即node.onclick = fn）添加在这个节点上的事件回调函数。

【insertBefore()】

insertBefore方法用于将某个节点插入当前节点的指定位置。

它接受两个参数，第一个参数是所要插入的节点，第二个参数是当前节点的一个子节点，新的节点将插在这个节点的前面。

该方法返回被插入的新节点，根据情况不是必须创建变量来保存。

var text1 = document.createTextNode('1');
var li = document.createElement('li');
li.appendChild(text1);

var ul = document.querySelector('ul');
ul.insertBefore(li,ul.firstChild);

上述代码的作用是，将带有文字节点的li插入到ul的第一个子节点之前。

【removeChild()】

removeChild方法接受一个子节点作为参数，用于从当前节点移除该节点。
它返回被移除的节点,根据情况不是必须创建变量来保存。

var divA = document.getElementById('A');
divA.parentNode.removeChild(divA);

上述代码是如何移除一个指定节点。

【replaceChild()】

replaceChild方法用于将一个新的节点，替换当前节点的某一个子节点。
它接受两个参数，第一个参数是用来替换的新节点，第二个参数将要被替换走的子节点。它返回被替换走的那个节点。

var	replacedNode = parentNode.replaceChild(newChild, oldChild);

举个例子：
	var divA = document.getElementById('A');
	var newSpan = document.createElement('span');
	newSpan.textContent = 'Hello World!';
	divA.parentNode.replaceChild(newSpan,divA);

【contains()】

contains方法接受一个节点作为参数，返回一个布尔值。

contains方法表示判断【参数节点】是否为【当前节点】的子节点。

//HTML代码
<p name="p2" id="p2-id"><span id="span-id">123</span></p>//检查p元素中是否包含span元素
var span = document.getElementById("span-id");
var p = document.getElementById("p2-id");
var bool = p.contains(span);
console.log(bool);//true

document.body.contains(node) 检查某个节点，是否包含在当前文档之中。
nodeA.contains(nodeA) // true  节点自身包含自身的结果是真的。

【isEqualNode()】

isEqualNode方法返回一个布尔值，用于检查两个节点是否相等。

//HTML代码
<ul id="u2-id"><li>123</li></ul>
<ul id="u3-id"><li>123</li></ul>
//JS代码
var u2 = document.getElementById(“u2-id”);//通过元素名获取页面中指定元素
var u2_id = document.getElementsByTagName("ul")[0];
var u3 = document.getElementById("u3-id");
console.log('u2和u3相等吗：'+u2.isEqualNode(u3));//false
console.log('u2和u2_id相等吗：'+u2.isEqualNode(u2_id));//true

所谓相等的节点，指的是两个节点的类型相同、属性相同、子节点相同。

【querySelector()】

querySelector()
方法返回匹配指定的CSS选择器的元素节点。如果有多个节点满足匹配条件则返回第一个匹配的节点。如果没有发现匹配的节点则返回null。

<style>.lianJie{color:red;}</style>

<a href="#" name="a1" class="lianJie">345</a>
<a href="#" name="a2" class="lianJie">123</a>
<script>
	var temp = document.querySelector(".lianJie");
	console.log(temp.innerText);
</script>//345

querySelector是匹配的选择器，那么如果是选择器为id时参数应该是"#id名"

【getElementById()】

getElementById()
返回匹配指定ID属性的元素节点

【getElementsByTagName()】

getElementsByTagName()
返回所有指定标签的元素

【getElementsByClassName()】

getElementsByClassName()
返回符合指定类名的所有元素

【getElementsByName()】

getElementsByName()
用于选择拥有name属性的HTML元素

必须保证在执行选中元素操作之前，元素已经被创建完毕

querySelector系列方法与getElementsBy系列方法对比

注意：querySelector系列方法与getElementsBy系列方法对比有什么不同？

(i)两者的W3C标准不同
querySelector系列属于W3C中的Selectors API规范
getElementsBy系列则属于 W3C的DOM 规范。(ii)两者浏览器的兼容不同 querySelector系列基本能被所有浏览器支持。 getElementsBy系列则通常只有在考虑兼容性的时候才被提起(尽管两者功能近似)

(iii)接受参数不同
querySelector系列接收的参数是一个css选择器名。
getElementsBy系列接收的参数只能是单一的className、tagName 和 name。
var c1 = document.querySelectorAll(‘.k1 .u’); var c2 = document.getElementsByClassName(‘p’); var c3 = document.getElementsByClassName(‘b2’)[0].getElementsByClassName(‘d’);

(iv)返回值不同
querySelectorAll()返回的是一个静态节点列表(Static NodeList)
getElementsBy系列的返回的是一个动态节点列表(Live NodeList)。

【createElement()】

createElement()
生成html元素节点

语法：document.createElement("标签名");
var newp = document.createElement(“p”);
document.body.appendChild(newp);

【createTextNode()】

createTextNode()
生成文本节点，参数为所要生成的文本节点的内容

var newp = document.createElement(“p”);
var p_text = document.createTextNode(“这是p的文本节点内容”);
newp.appendChild(p_text);
document.body.appendChild(newp);

【createAttribute()】

createAttribute()
生成一个新的属性对象节点，并返回它

var newp = document.createElement("p");
var p_text = document.createTextNode("here is p text Node");
newp.appendChild(p_text);
var p_style = document.createAttribute("style");
p_style.value = "color:cyan;";
newp.setAttributeNode(p_style);
document.body.appendChild(newp);

【getAttribute()、setAttribute()和removeAttribute() 】

元素节点特性方法

getAttribute('属性名');
setAttribute('属性名','属性值');
removeAttribute('属性名');

【setProperty()、getPropertyValue()和removeProperty()】

元素节点的style属性方法

setProperty(propertyName,value)：设置某个CSS属性。
getPropertyValue(propertyName)：读取某个CSS属性。
removeProperty(propertyName)：删除某个CSS属性。

Document节点操作页面元素(Jquery)

【children()】

本属性选中某一个元素的所有直接儿子元素。

//$('selector').children()
$("#box").children().css("background-color","red");
//将#box中所有的子元素背景色都变红

注意：children()里面可以加参数，参数需要是选择器。
     表示既是这个元素的子元素，又满足参数选择器的元素。
	 $("#box").children(".teshu").css("background-color","red");

【find()】

由于children()只能查找子元素，如果是孙子元素是找不到的。

所以jQuery提供了find()"寻找"的方法。

//在某个节点中查找符合选择器要求的后代节点
$("div").click(function(){	
//$(this)没有引号，表示触发监听的这个元素，这个元素是某一个div	
	$(this).find("li").css("background-color","red");
});
//同样的find()里面也可以加选择器。

【parent()方法】

查找当前节点的直属父节点

$("p").click(function(){
	$(this).parent().css("background-color","red");
}); 
 //把点击的p标签的父级元素背景改成红色

【parents()方法】

查找当前节点的所有祖先节点，知道html节点为止。

$("p").click(function(){
	$(this).parent().css("background-color","red");
 });
//把点击的p标签的所有祖先节点背景改成红色

【siblings()】

访问当前节点的所有兄弟节点（除本身之外）

$("li").click(function(){
	//常见用法，排他操作。
	$(this).addClass('selected').siblings().removeClass("selected");
}); 

【next()、prev()、nextAll()和prevAll()】

next() 后一个亲兄弟
prev() 前一个亲兄弟
nextAll() 后所有亲兄弟
prevAll() 前所有亲兄弟

$(this).next().css("background-color","red");//其他格式一样，以此类推

【index()】

index()方法用来获取当前元素在其兄弟节点中的排名，从0开始。

$('selector').index()

【each()】

遍历每个节点，然后执行里面的回调函数。

回调函数中如果存在$(this)，那么它指的是【遍历中当前这一次的这个节点】。

$('selector').each(func)

$("div").each(function(){	
	$(this).children().eq(2).css("background-color","red");
});

【append()、appendTo()、prepend()、prependTo()】

这四个方法都用来在某个节点内部插入新内容

	A.append(B);		//向【A节点内部现有内容之后】追加【B节点】
	B.appendTo(A);	//将【B节点】追加到【A节点内部现有内容之后】
	A.prepend(B);		//向【A节点内部现有内容之前】追加【B节点】
	B.prependTo(A);	//将【B节点】追加到【A节点内部的现有内容之前】

四个方法所表达的含义大致相同，只不过在语法上略有出入。其中AB均为节点。

 $('span').append($('<b>这是后添加的b标签</b>'));

【after()、before()、insertAfter()、insertBefore()】

相比于前面的四个方法的作用，这四个方法可以认为是给当前节点添加兄弟

	A.after(B);			//在【A节点之后】添加【同级节点B】
	A.before(B);		//在【A节点之前】添加【同级节点B】
	A.insertAfter(B);	//把【A节点】添加到【B节点之后】
	A.insertBefore(B);	//将【A节点】添加到【B节点之前】

四个方法所表达的含义大致相同，只不过在语法上略有出入。其中AB均为节点。

【删除节点empty()、remove()】

empty()表示删除指定节点中的内容，而remove()则表示移除自己

	A.empty() 等价于 A.html(‘’);
	A.remove();

【克隆节点clone()】

相当于js中的cloneNode操作，即克隆的节点在页面中没有自己的位置。

需要通过append等操作才能够追加到页面当中。

	A.append(B.clone) 

选择器

选择器:first   	选中指定元素集合中的第一个元素
选择器:last 		选中指定元素集合中的最后一个元素
选择器:eq(n) 	选中指定元素集合中从0开始，第n个元素
选择器:lt(n)		选中指定元素集合中从0开始，第n个元素之前的所有元素
选择器:gt(n)	选中指定元素集合中从0开始，第n个元素之后的所有元素
选择器:odd		选中指定元素集合中从0开始，所有奇数序号的元素
选择器:even	选中指定元素集合中从0开始，所有偶数序号的元素

事件名

jQuery中事件的名字，一律没有on。
单击： 				click()				
双击：  			dblclick()
鼠标进入：  		mouseenter() 		
鼠标离开：  		mouseleave() 
文本框得到焦点：  	focus()				
失去焦点：			blur()