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也是类似的。