JavaScript学习笔记（十三）--DOM(下)操作与父元素相关的方法hasChildNodes()【父元素中是否包

操作与父元素相关的方法

hasChildNodes() 【父元素中是否包含子节点】

	<body>
		<ul>
	   	   <li>列表1</li>
	   	   <li>列表2</li>
	   	   <li>列表3</li>
	   </ul>
	<script>
	   var ul = document.querySelector('ul');
	   console.log(ul.hasChildNodes());
    </script>
   </body>

总结： 1.该方法返回的是一个布尔类型的结果用来判断当前元素中是否存在子节点。 2.该方法会将元素中所有的节点都获取（包括空格，回车符，文字，标签等）

children ：父元素中的子元素

	<body>
 	 <div>
 		  <span>1</span>
    	  <p>2</p>
    </div>
 
   <script>
      // 这个 a 获取的是页面中的 div 元素，就是一个元素节点
        var a = document.querySelector('div')
 		console.log(a.children) 
       /*
          HTMLCollection(2)
           0: span
           1: p
          length: 2
          __proto__: HTMLCollection
      */
     </script>
  </body>

总结： 1. chiledren是一个属性，不是一个方法 2. 该属性返回父元素中所有子元素（只包含标签），不包括空格，回车符，纯文本等 3. 返回一个伪数组 4. 通过dom.children.length来判断是否存在子元素

.childNodes 根据父节点获取子节点【父元素中的子节点】


	<body>
 		<div>
 		<p>hello</p>
 		</div>
 
 		<script>
 			// 这个 oDiv 获取的是页面中的 div 元素，就是一个元素节点
  		var a = document.querySelector('div')
 
 		console.log(a.childNodes) 
 		/*
 		 NodeList(3) [text, p, text]
      		0: text
      		1: p
      		2: text
      		length: 3
      		__proto__: NodeList
    		*/
		 </script>
	</body>

我们会发现，拿到以后是一个伪数组，里面有三个节点
一个 text：从 <div> 一直到 <p> 中间有一个换行和一堆空格，这个是第一个节点，是一个文本节点
一个 p：这个 p 标签就是第二个节点，这个是一个元素节点
一个 text：从 </p> 一直到 </div> 中间有一个换行和一堆空格，这个是第三个节点，是一个文本节点
这个时候就能看到我们有不同的节点类型了

	<body>
	   <ul>
	   	   <li>列表1</li>
	   	   <li>列表2</li>
	   	   <li>列表3</li>
	   </ul>
	   <script type="text/javascript">	   	
		 var ul = document.querySelector('ul');        
		  // 3. 获取父元素中的子节点（标签，回车符。。）
 		 console.log(ul.childNodes[0].nodeType);

总结： 1.childNodes是一个属性，不是一个方法 2.该属性将父元素中所有节点返回（包括回车，空格等特殊符号） 3.该属性将回车符看做是一个空的文本

.firstElementChild 获取父元素中第一个子元素


	<body>
        <ul>
      	    <li>列表1</li>
      	    <li>列表2</li>
      	    <li>列表3</li>
       </ul>
  <script type="text/javascript">
   	 var ul = document.querySelector('ul');
      // 4. 获取父元素中第一个子元素 
   	  console.log(ul.firstElementChild); //<li>列表1</li>

总结： 1. 通过该属性可以将父元素中的第一个子元素获取到【标签】 2. 该属性只能获取标签，无法获取文字，空格，回车符等节点

lastElementChild：获取父元素中最后一个子元素


<body>
       <ul>
         <li>列表1</li>
         <li>列表2</li>
         <li>列表3</li>
     </ul>
 <script>
    var a = document.querySelector('ul')
    console.log(a.lastElementChild) // <li>列表3</li>
 </script>
</body>

总结： 1.通过该属性可以将父元素中最后一个子元素获取到【标签】 2.该属性只能获取标签，无法获取文字，空格，回车符等节点

.firstChild 获取父元素中第一个节点


	<body>
  	<div>
  	<p>hello</p>
  	</div>

  <script>
  // 这个 oDiv 获取的是页面中的 div 元素，就是一个元素节点
	var oDiv = document.querySelector('div')

  	console.log(oDiv.firstChild) // #text 
  </script>
</body>

总结： 1. 通过该属性可以将父元素中第一个节点得到 2. 节点中包括文字，回车符，换行符等

.lastChild 获取父元素中最后一个节点

	<body>
     	    <ul>
     	      <li>列表1</li>
     	      <li>列表2</li>
     	      <li>列表3</li>
         </ul>
		 <script type="text/javascript">	
  	 	var ul = document.querySelector('ul');
          console.log(ul.lastChild); //#text
       </script>
    </body>

最后一个就是 </li> 一直到</ul>之间的换行和空格，是个文本节点

总结：
1. 通过该属性将父元素中最后一个节点得到
2. 节点中包括文字，回车符，换行符等

操作与子元素相关的方法

根据子节点获取父节点

.parentNode 获取某一个节点的父节点


	<body>
		<ul>
		<li id="a">hello</li>
		<li id="b">world</li>
		<li id="c">!!!</li>
		</ul>

	<script>
		// 这个 b 获取的是页面中的 li 元素，就是一个元素节点
		var b = document.querySelector('#b')

		console.log(b.parentNode) // <ul>...</ul>
	</script>
	</body>

通过 nodeType 获取节点类型

nodeType：获取节点的节点类型，用数字表示

 console.log(eleNode.nodeType) // 1
	console.log(attrNode.nodeType) // 2
	console.log(textNode.nodeType) // 3

总结： 1. 如果nodeType返回值是1，那么代表当前节点是一个标签 2. 如果nodeType返回值是3，那么代表当前节点是一个文本【回车符】 3. 如果nodeType返回值是2，代表标签中的一个属性

通过 nodeName 获取节点名称
- dom.nodeName
```
	console.log(eleNode.nodeName) // LI
		console.log(attrNode.nodeName) // test
		console.log(textNode.nodeName) // #text 
```
- 元素节点的 nodeName 就是大写标签名
  - 属性节点的 nodeName 就是属性名
  - 文本节点的 nodeName 都是 #text
通过 nodeValue 获取文本节点的值
- nodeValue：获取节点的值
```
	console.log(eleNode.nodeValue) // null
	console.log(attrNode.nodeValue) // 我是 ul 的一个属性
	console.log(textNode.nodeValue) // 换行 + 空格
```
  - 元素节点没有 nodeValue
  - 属性节点的 nodeValue 就是属性值
  - 文本节点的 nodeValue 就是文本内容

zongjie

获取兄弟节点

获取下一个节点

node.nextElementSibling 获取某一个节点的下一个元素节点

    <body>
 		<ul>
 			<li id="a">hello</li>
 			<li id="b">world</li>
 			<li id="c">!!!</li>
 		</ul>
 		 <script>
 		// 这个 oLi 获取的是页面中的 li 元素，就是一个元素节点
 		 var oLi = document.querySelector('#b')
 		 console.log(oLi.nextElementSibling) // <li id="c">!!!</li>
 		</script>
 	</body>

只获取一个节点，不在是伪数组
获取的是 id="b" 这个 li 的下一个兄弟元素节点
因为 id="b" 的下一个兄弟元素节点就是 id="c" 的 li，是一个元素节点

nextSibling：获取某一个节点的下一个兄弟节点


  <body>
		<ul>
			<li id="a">hello</li>
			<li id="b">world</li>
			<li id="c">!!!</li>
		</ul>
	<script>
	// 这个 oLi 获取的是页面中的 li 元素，就是一个元素节点
	var oLi = document.querySelector('#b')
	console.log(oLi.nextSibling) // #text
	</script>
</body>

只获取一个节点，不在是伪数组
获取的是 id="b" 这个 li 的下一个兄弟节点
因为 id="b" 的下一个节点，是两个 li 标签之间的换行和空格，所以是一个文本节点

获取上一个节点
previousElementSibling：获取某一个节点的上一个元素节点

    <body>
		<ul>
		  <li id="a">hello</li>
		  <li id="b">world</li>
		 <li id="c">!!!</li>
		</ul> 
	<script>
		// 这个 oLi 获取的是页面中的 li 元素，就是一个元素节点
 		var oLi = document.querySelector('#b')
		console.log(oLi.previousElementSibling) // <li id="a">hello</li>
	</script>
 </body>

- 只获取一个节点，不在是伪数组
 - 获取的是 id="b" 这个 li 的上一个兄弟元素节点
 - 因为 id="b" 的上一个兄弟元素节点就是 id="a" 的 li，是一个元素节点

previousSibling：获取某一个节点的上一个兄弟节点


		<body>
			<ul>
				<li id="a">hello</li>
				<li id="b">world</li>
				<li id="c">!!!</li>
			</ul>
		<script>
   		 // 这个 oLi 获取的是页面中的 li 元素，就是一个元素节点
 			var oLi = document.querySelector('#b')
			console.log(oLi.previousSibling) // #text
		</script>
   </body>

只获取一个节点，不在是伪数组
获取的是 id="b" 这个 li 的上一个兄弟节点 - 因为 id="b" 的上一个节点，是两个 li 标签之间的换行和空格，所以是一个文本节点

操作 DOM 节点

创建一个节点（因为向页面中增加之前，我们需要先创建一个节点出来）
向页面中增加一个节点
删除页面中的某一个节点
修改页面中的某一个节点
获取页面中的某一个节点

创建一个节点

createElement：用于创建一个元素节点

	// 创建一个 div 元素节点
 	var oDiv = document.createElement('div')
 	console.log(oDiv) // <div></div>

创建出来的就是一个可以使用的 div 元素
createTextNode：用于创建一个文本节点

  // 创建一个文本节点
	var oText = document.createTextNode('我是一个文本')
	console.log(oText) // "我是一个文本"

向页面中加入一个节点

appendChild：是向一个元素节点的末尾追加一个节点

语法： 父节点.appendChild(要插入的子节点)


	// 创建一个 div 元素节点
 	var oDiv = document.createElement('div')
 	var oText = document.createTextNode('我是一个文本')
 	// 向 div 中追加一个文本节点
 	oDiv.appendChild(oText)
 	console.log(oDiv) // <div>我是一个文本</div>

insertBefore：向某一个节点前插入一个节点
语法： 父节点.insertBefore(要插入的节点，插入在哪一个节点的前面)


	<body>
 	<div>
 		<p>我是一个 p 标签</p>
 	</div>
 
 	<script>
  		var oDiv = document.querySelector('div')
 		var oP = oDiv.querySelector('p')
 	// 创建一个元素节点
 	var oSpan = document.createElement('span')
 
 	// 将这个元素节点添加到 div 下的 p 的前面
 	oDiv.insertBefore(oSpan, oP)
 	console.log(oDiv)
 	/*
  <div>
   <span></span>
   <p>我是一个 p 标签</p>
  </div>
    */
 </script>
</body>

删除页面中的某一个节点

removeChild：移除某一节点下的某一个节点
语法：父节点.removeChild(要移除的字节点)


	<body>
 	<div>
 		<p>我是一个 p 标签</p>
 	</div>
 
 	<script>
  		var oDiv = document.querySelector('div')
 		var oP = oDiv.querySelector('p')

	 // 移除 div 下面的 p 标签
	 oDiv.removeChild(oP)
 
 	console.log(oDiv) // <div></div>
 	</script>
	</body>

修改页面中的某一个节点

replaceChild：将页面中的某一个节点替换掉
语法： 父节点.replaceChild(新节点，旧节点)


	<body>
 	<div>
 		<p>我是一个 p 标签</p>
 	</div>
 
 	<script>
  		var oDiv = document.querySelector('div')
 		var oP = oDiv.querySelector('p')
 
 	// 创建一个 span 节点
 	var oSpan = document.createElement('span')
 	// 向 span 元素中加点文字
	 oSpan.innerHTML = '我是新创建的 span 标签'
 
  // 用创建的 span 标签替换原先 div 下的 p 标签
 	oDiv.replaceChild(oSpan, oP)
 
 	console.log(oDiv)
 	/*
  	<div>
   		<span>我是新创建的 span 标签</span>
  	</div>
    */
 	</script>
</body>

获取元素的非行间样式

我们在操作 DOM 的时候，很重要的一点就是要操作元素的 css 样式
那么在操作 css 样式的时候，我们避免不了就要获取元素的样式
之前我们说过可以用元素.style.xxx 来获取
但是这个方法只能获取到元素行间样式，也就是写在行内的样式


	<style>
	 	div {
 		width: 100px;
  		}
	</style>
	<body>
 		<div style="height: 100px;">
 		<p>我是一个 p 标签</p>
 		</div>

 	<script>
 		var oDiv = document.querySelector('div')
 		 console.log(oDiv.style.height) // 100px
 		 console.log(oDIv.style.width) // ''
  </script>
  </body>

不管是外链式还是内嵌式，我们都获取不到该元素的样式
这里我们就要使用方法来获取了 getComputedStyle 和 currentStyle
这两个方法的作用是一样的，只不过一个在非 IE 浏览器，一个在 IE 浏览器

getComputedStyle（非IE使用）

语法：window.getComputedStyle(元素, null).要获取的属性


  <style>
	div {
	width: 100px;
	}
  </style>
 	 <body>
	   <div style="height: 100px;">
		 <p>我是一个 p 标签</p>
	   </div>
 	 <script>
    	var oDiv = document.querySelector('div')
    	console.log(window.getComputedStyle(oDiv).width) // 100px
    	console.log(window.getComputedStyle(oDiv).height) // 100px
	 </script>
	</body>

这个方法获取行间样式和非行间样式都可以

currentStyle（IE使用）

语法： 元素.currentStyle.要获取的属性


	<style>
  	div {
  	width: 100px;
	}
  </style>
  <body>
  	<div style="height: 100px;">
  	<p>我是一个 p 标签</p>
  	</div>

  <script>
  	var oDiv = document.querySelector('div')
		console.log(oDiv.currentStyle.width) // 100px
  	console.log(oDiv.currentStyle.height) // 100px
  </script>
  </body>