JavaScript獲取子節點的方式

1. js獲取子節點的方式

一.通過獲取dom方式直接獲取子節點

	// 1.通過獲取dom方式直接獲取子節點實列
	var p = document.getElementById('childId')
	// 獲取元素后利用getElementsByTagName	
	console.log(p.getElementsByTagName('div'))
	document.write(p.getElementsByTagName('div'))

結果如下：
HTMLCollection(5) [div.grandson, div.firstsibling, div.secondsibling, div.threesibling, div.foursibling]
0: div.grandson
1: div.firstsibling
2: div.secondsibling
3: div.threesibling
4: div.foursibling
length: 5
[[Prototype]]: HTMLCollection

二.通過children來獲取子節點

利用children來獲取子元素是最方便的，他也會返回一個數組。對其獲取子元素的訪問只需按數組的訪問形式即可。

	// 2.通過children來獲取元素子節點 返回一個數組
	// 獲取到 div標簽以及其下的子標簽示例
	var get_grand = p.children[0]
	console.log(get_grand)

三.通過childNodes獲取子節點

childNodes返回的是子節點的集合，是一個數組的格式。他會把換行和空格也當成是節點信息。容易被回車換行和空格影響

	// 3.通過childNodes獲取子節點 容易把HTML的回車換行符空格獲取而影響所需.
	var adopt_childNodes = p.childNodes[0]
	console.log(adopt_childNodes)

　為了隱藏不顯示不必須的換行的空格，我們如果要使用childNodes就必須進行必要的過濾。通過正則表達式式取掉不必要的信息。

//去掉回車 換行的空格步驟
// 1.通過獲取dom的getElementByClassName()方式直接獲取元素節點
var grandson = document.getElementsByClassName('grandson')[0]

for (var i = 0; i < grandson.childNodes.length; i++) {
   console.log(i)
   // 判斷元素節點名稱是否為#text和元素節點值是否為空白【\s】
   if (grandson.childNodes[i].nodeName == "#text" && !/\s/.test(grandson.nodeValue)) {
    // removeChild() 方法指定元素的某個指定的子節點,必須找到節點.在節點上刪除。
   	document.getElementsByClassName('grandson')[0].removeChild(grandson.childNodes[i])
   	//刪除后的節點為所需【無空白】
   }
    console.log(document.getElementsByClassName('grandson')[0].childNodes)
//補充 document.getElementById("test").childElementCount; 可以直接獲取長度 同length
}

補充JavaScript 正則表達式學習 https://www.runoob.com/js/js-regexp.html

  /\s/     查找空白字符  
	var  judge = !/\s/.test("hello world")
	console.log(judge)  結果為false【/\s/.test("hello world")結果為true取反】

四.獲取第一個子節點

var getFirstChild = document.getElementById("firstnode").firstChild;
console.log(getFirstChild)  
// 結果為#text  此時匹配的為回車換行符

console.log('-------------分割線----------')
var getFirstChild = document.getElementById("firstnode").firstElementChild;
console.log(getFirstChild)
// 結果為<div class="firstsibling"> 孫子一 </div> 此時匹配的為第一個元素

五.獲取最后一個子節點

lastChild獲取最后一個子節點的方式其實和firstChild是類似，同樣會匹配第一個回車換行符【如果存在回車換行符】；
如果使用lastElementChild返回第一個元素【即使存在回車換行符】

2. 獲取父節點的方式

一. parentNode獲取父節點

獲取的是當前元素的直接父元素。parentNode是w3c的標准。

二. parentElement獲取父節點

parentElement和parentNode一樣，只是parentElement是ie的標准。

var p1 = document.getElementById("id_value").parentElement;

三. offsetParent獲取所有父節點

位置偏移量offset： 其實這個是於位置有關的上下級關系 ，直接能夠獲取到所有父親節點， 這個對應的值是body下的所有元素節點信息。

3. 獲取兄弟節點的方式

一. 通過獲取父親節點再獲取子節點來獲取兄弟節點

// 1. 通過獲取父親節點再獲取子節點來獲取兄弟節點
var slf = document.getElementById('firstsibling')
console.log(slf.parentNode.childNodes[0])
// 第一次獲得的是回車符  #text
console.log(slf.parentNode.childNodes[1])
// 第二次獲得的是自己位置 <div id="firstsibling"> 孫子一 </div>

// 了解children和childNodes的差別
console.log(slf.parentNode.children[0])
console.log(slf.parentNode.children[1])

二. 獲取上一個兄弟節點

在獲取前一個兄弟節點的時候可以使用previousSibling和previousElementSibling。他們的區別是previousSibling會匹配字符，包括換行和空格，而不是節點。previousElementSibling則直接匹配節點。

var sibling= document.getElementById("firstsibling").previousElementSibling;
var sibling = document.getElementById("firstsibling").previousSibling;

三. 獲取下一個兄弟節點

參考【獲取上一個兄弟節點】雷同 previousSibling和previousElementSibling，nextSibling和nextElementSibling也是類似的。