JS要点DOM(二)：DOM重点：节点的增，删，插，查，替和基本操作

重点 ：DOM节点的增，删，插，查，替和基本操作

• 对节点的增，删，插，查，替

节点的类型（6个）:

节点的类型（6个）	/
<1>	元素类型
<2>	属性类型
<3>	文本类型
<4>	注释类型
<5>	document(文档类型)
<6>	DocumentFragment(文档碎片类型)

这里说一下，下面的代码后面为什么要加 [0] 因为DOM操作基本上取得都是类数组。

[0] 前面的是挑选文档中所有的div元素标签 。

后面加 [0]是说选类数组 div 里 第一个/第0位 div 标签元素

不管你的类数组 div 是不是只有一个div 元素，后面的 [ ] 你都要写

var div = document.getElementsByTagName('div')[0]; 

PS：其中最左边的div 是变量名，括号里面的div是元素标签种类,就是说div类型的标签，左边的变量名不一定非得是元素标签种类名
可以是：

var wzy = document.getElementsByTagName('div')[0]; 

Ⅰ. <查找元素节点>

1.查看元素节点(七个方法，最常用3，其次4，5)

在body的代码：

		<2>
		<div id="one"></div>
		
		<3>
		 <div></div>
		 <div></div>
		 <div></div>
		 
		 <4>
		<input name='anniu' />
		 <button name='anniu'></button>
		 
		<5> 
		<div class="four"></div>
		 <div class="four"></div>
		 		 
		<6-7>
		<div>
			<strong></strong>
		</div>
		<div>
			<span>
				<strong class="demo"></strong>
				</span>
		</div>

Javascriot对应代码和方法:

<1> document代表整个文档

<2> document.getElementById()：获取ID元素标签节点

	var div = document.getElementById('one');

<3>document.getElementsByTagName()：获取元素标签节点

  //var div = document.getElementsByTagName('div'); //div是个类数组
	var div = document.getElementsByTagName('div')[0]; 

<4>document.getElementsByName()：获取name属性标签节点

需注意，只有部分标签name可生效(表单，表单元素，img，iframe)

  //var div = document.getElementsByName('anniu')//	div是个类数组，有两个元素
	var div = document.getElementsByName('anniu')[0];	

<5>document.getElementsByClassName()：获取类名Class属性标签节点

var div = document.getElementsByClassName('four')

<6> document. querySelector() : 类似css选择器

可以直接在里面敲写css代码（在ie7和ie7以下的版本中没有）

var strong= document.querySelector('div > span strong.demo');//选一个

<7> document.querySelectorAll() ： 类似css选择器

可以直接在里面敲写css代码（在ie7和ie7以下的版本中没有）

var strong1= document.querySelectorAll('div > span strong.demo');//；类数组，选一组

<6>querySelector()
<7>querySelectorAll()
这两个不常用，是因为这两个是不实时的

2.遍历节点树(6个):

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

• 整个文档是一个文档节点,即 document是一个节点，但不是一个元素

• 每个 HTML 元素是元素节点

• HTML 元素内的文本是文本节点

• 每个 HTML 属性（如div元素上的id/class，input的name属性等）是属性节点

• 注释是注释节点

节点树状图：

图片来源：https://www.w3school.com.cn/htmldom/index.asp


body代码：

	<2-4>		 
	 <div>
		<em></em>
		<span></span>
		<strong></strong>
	</div> 	 
			 

在javascript中的代码和方法注释(其中就只有2：childNodes 需要多花一点点时间)

			<1>parentNode : 父节点(最顶端的parentNode为#document);
			 var span = document.getElementsByTagName('span')[0];
			在后台：span.parentNode
			 <div>​…​</div>
				
			<2>childNodes : 子节点们 -->令n=标签数和注释数,当n为0时,子节点为1;
														  当n>1时，子节点为2n+1;
														  
				var div = document.getElementsByTagName('div')[0];	
				后台： div.childNodes
					 NodeList(5) [text, em, text, span, text]
			
			<3>firstChild : 第一个子节点
			
			<4>lastChild  : 最后一个子节点
			
			<5>nexSibling : 后一个兄弟节点
			
			<6>perviousSibling : 前一个兄弟节点

3.基于元素节点数的遍历（7个；一般用children)

这里说一下IE不兼容：指的是IE9和IE9以下的IE浏览器，因为到了IE10及其后面的IE浏览器,IE才遵守W3C的标准

	 <1>parentElement : 返回当前元素的父元素节点(IE不兼容,最顶端为html元素)
	    var span = document.getElementsByTagName('span')[0];
	    在后台:span.parentElement
		  <div>​…​</div>​ 
		
	 <2>children : 只返回当前元素的元素子节点
	
	 <3>node.childElementCount(没什么用) ===  node.children.length : 当前元素节点的子元素个数/长度
	
	 <4>firstElemnetChild : 返回的是第一个元素节点(IE不兼容)
	
	 <5>lastElementChild : 返回的是对吼一个元素节点(IE不兼容)
	
	 <6>nextElementSibling : 返回后一个元素节点
	
	 <7>previousElementSibling : 返回前一个元素节点

4.节点的四个属性(重点是3:nodetype)

body部分代码

		<4-4>属性节点
		<div class='one' id='two'></div> 

<1-2>nodeName/nodeValue

		<1>nodeName：元素的标签名,以大写形式标识,只读
	
		<2>nodeValue：Text(文本)节点或Comment(注释)节点的文本内容,可读写

<3> nodeType(最为重要/有用)

该节点的类型,只读

nodeTyepe不同类型的返回值:

nodeTyepe不同类型的返回值	/
元素类型	1
属性类型	2
文本类型	3
注释类型	8
document	9
DocumentFragment	11

<4>attributes : Element(元素)节点的属性集合

	<4>attributes
	Element(元素)节点的属性集合
	var div = document.getElementsByTagName('div')[0];
	在后台:div.attributes
	NamedNodeMap {0: class, 1: id, class: class, id: id, length: 2}
	div.attributes[0].nodeType
	2
		

!!!nodeType 例子:判断div里的子节点是什么元素类型的节点

		var div = document.getElementsByTagName('div')[0];
		
		function retElementsChild(node){
		var wzy = {
			length : 0,
			push :Array.prototype.push,
			splice : Array.prototype.splice
		},
		child = node.childNodes,// 子节点们
		len = child.length //子节点的个数/长度
		
		for(var i = 0; i < len; i++){//遍历类数组：div
			if(child[i].nodeType === 1){ //用nodetype判断是不是元素节点
				wzy.push(child[i])//将判断好的子元素节点PUSH进一个数组
			}
		}
		return wzy;//返回数值
	}	
	console.log(retElementsChild(div));//打印数值

5.节点的一个方法:Node.hasChildNodes();判断节点是否有子节点，返回布尔值

body代码

 	<5.1> <div></div>//没空格符，没文本，没元素标签，没注释
		 
	<5.2>  <div> </div>//有一个空格符,即本文内容是一个空格符

javascript的代码与注释

	5.1
	var div = document.getElementsByTagName('div')[0];
	在后台:
	div.hasChildNodes()
	false
	
	5.2
	var div = document.getElementsByTagName('div')[0];
	在后台：
	div.hasChildNodes()
	true

以上所有的方法都是查找节点

Ⅱ : 增/创建节点 ( 常用1，2；需要配合插入操作一起用才行)

<1>创建一个元素节点/标签:document.createElement(’ ')

var div = document.createElement('div');

<2>创建一个文本节点 document.createTextNode(’ ')

 var text = document.createTextNode('222');

<3> 创建注释节点document.createComment(’ ')

var comment = document.createComment('222')

<4>创建文档碎片document.createDocumentFragment()

PS：这里说一下为什么要配合插入操作。因为你用JS创建一个节点，这个节点是在JS中的，没有放在body中，body用不了。需要进行插入操作将创建好的节点插入body中

Ⅲ : 插入（两个方法）创建好的节点一定要插入body里

ps：或者你自己在body创建好父级节点

<1> parentnode.appendChild() // 任何一个元素节点都会有appendchild方法。

appendChild是一个剪切方法 / 在后面添加

	var text = document.createTextNode('wzy');//文本节点
	var span = document.createElement('sapn');//span标签节点
	span.appendChild(text);	//将文本插入进span里
	//document.body 指的就是body标签
	document.body.appendChild(span);//把span标签和text标签一起插入到body里

<2> parentnode.insertBefore(a,b) // 在父级节点里，在b的前面插入a

将要插入的元素放在a,被插入的元素放在b / 在前面添加

	var div = document.createElement('div');//创建div父级盒子节点
	var i = document.createElement('i');//创建i标签节点
	var strong = document.createElement('strong');//创建strong标签节点
	div.appendChild(i);//将i标签插入进div父级盒子中
	div.insertBefore(strong,i);//在父级盒子中，在 i 标签的前面插入 strong 标签
	document.body.appendChild(div);//将div盒子插入body标签中
		

Ⅳ：删除

body代码：

<div>
<i></i>
</div>

<1>父节点删除(剪切)里面的子节点 :parent.removeChild();

 var div = document.getElementsByTagName('div')[0];//选中body里面的第0个div元素标签
 var i = document.getElementsByTagName('i')[0];//选中body里面的第0个i元素标签
 div.removeChild(i);//在div里删除(剪切)i标签

<2>删除自己:child.remove();

 i.remove();

Ⅴ:替换(剪切)

parent.replaceChild(new,origin); // 用左边的节点替换右边的节点

 var div = document.getElementsByTagName('div')[0];//选中body里面的第0个div元素标签
 var i = document.getElementsByTagName('i')[0];//选中body里面的第0个i元素标签
 var p = document.createElement('p');//创建一个p标签
 div.replaceChild(p,i)//用p标签替换i标签

• DOM基本操作

body代码：

<div> wzy </div>
<span>wzy</span>
<a href='#' data-log='wzy'> 点击计数 </a>

Ⅰ:Element节点的一些属性

1. parentNode.innerHTML

<1>.查看节点里的所有标签元素
<2>.覆盖操作 会将里面的元素，注释等删除，再添加覆盖的数据

var div = document.getElementsByTagName('div')[0];//选中body里面的第0个div元素标签
div.innerHTML = 222;
div.innerHTML += 555

2.parentNode.innerText(老板版火狐不兼容) / textContent(老版本不好使)

<1>.查看节点里的文本节点
<2>.覆盖操作 会将里面的元素，注释等删除，再添加覆盖的数据

var div = document.getElementsByTagName('div')[0];
			div.innerText= 222;
			div.innerText += 555;

Ⅱ:Element节点的一些方法

<1> element.setAttribute(‘属性名’,‘属性值’) // 添加属性

var div = document.getElementsByTagName('div')[0];
		div.setAttribute('class','demo');
		div.setAttribute('id','only')
		

<2> element.getAttribute(‘属性名’) // 取得属性名

例子(获取点击次数)；：

var a = document.getElementsByTagName('a')[0];
		a.onclick = function(){
			console.log(this.getAttribute('data-log'));
			}

例子：给每一个标签元素设置它们自己的属性名:

var all = document.getElementsByTagName('*');
		for(var i = 0; i < all.length; i++){
			all[i].setAttribute('this-name',all[i].nodeName);
		}

以上就是DOM基本操作