JavaScript获取子节点的方式
<h2 id="1-js获取子节点的方式">1. js获取子节点的方式</h2><h3 id="一通过获取dom方式直接获取子节点">一.通过获取dom方式直接获取子节点</h3>
<pre><code class="language-javascript"> // 1.通过获取dom方式直接获取子节点实列
var p = document.getElementById('childId')
// 获取元素后利用getElementsByTagName
console.log(p.getElementsByTagName('div'))
document.write(p.getElementsByTagName('div'))
结果如下：
HTMLCollection(5)
0: div.grandson
1: div.firstsibling
2: div.secondsibling
3: div.threesibling
4: div.foursibling
length: 5
[]: HTMLCollection
</code></pre>
<h3 id="二通过children来获取子节点">二.通过children来获取子节点</h3>
<p>利用children来获取子元素是最方便的，他也会返回一个数组。对其获取子元素的访问只需按数组的访问形式即可。</p>
<pre><code class="language-javascript"> // 2.通过children来获取元素子节点 返回一个数组
// 获取到 div标签以及其下的子标签示例
var get_grand = p.children
console.log(get_grand)
</code></pre>
<h3 id="三通过childnodes获取子节点">三.通过childNodes获取子节点</h3>
<p>childNodes返回的是子节点的集合，是一个数组的格式。他会把换行和空格也当成是节点信息。容易被回车换行和空格影响</p>
<pre><code class="language-javascript"> // 3.通过childNodes获取子节点 容易把HTML的回车换行符空格获取而影响所需.
var adopt_childNodes = p.childNodes
console.log(adopt_childNodes)
</code></pre>
<p> 为了隐藏不显示不必须的换行的空格，我们如果要使用childNodes就必须进行必要的过滤。通过正则表达式式取掉不必要的信息。</p>
<pre><code class="language-JavaScript">//去掉回车 换行的空格步骤
// 1.通过获取dom的getElementByClassName()方式直接获取元素节点
var grandson = document.getElementsByClassName('grandson')
for (var i = 0; i < grandson.childNodes.length; i++) {
console.log(i)
// 判断元素节点名称是否为#text和元素节点值是否为空白【\s】
if (grandson.childNodes.nodeName == "#text" && !/\s/.test(grandson.nodeValue)) {
// removeChild() 方法指定元素的某个指定的子节点,必须找到节点.在节点上删除。
document.getElementsByClassName('grandson').removeChild(grandson.childNodes)
//删除后的节点为所需【无空白】
}
console.log(document.getElementsByClassName('grandson').childNodes)
//补充 document.getElementById("test").childElementCount; 可以直接获取长度 同length
}
</code></pre>
<p>补充JavaScript 正则表达式学习 https://www.runoob.com/js/js-regexp.html</p>
<pre><code class="language-javascript">/\s/ 查找空白字符
varjudge = !/\s/.test("hello world")
console.log(judge)结果为false【/\s/.test("hello world")结果为true取反】
</code></pre>
<h3 id="四获取第一个子节点">四.获取第一个子节点</h3>
<pre><code class="language-JavaScript">var getFirstChild = document.getElementById("firstnode").firstChild;
console.log(getFirstChild)
// 结果为#text此时匹配的为回车换行符
</code></pre>
<pre><code class="language-JavaScript">console.log('-------------分割线----------')
var getFirstChild = document.getElementById("firstnode").firstElementChild;
console.log(getFirstChild)
// 结果为<div class="firstsibling"> 孙子一 </div> 此时匹配的为第一个元素
</code></pre>
<h3 id="五获取最后一个子节点">五.获取最后一个子节点</h3>
<p>lastChild获取最后一个子节点的方式其实和firstChild是类似，同样会匹配第一个回车换行符【如果存在回车换行符】；<br>
如果使用lastElementChild返回第一个元素【即使存在回车换行符】</p>
<h2 id="2-获取父节点的方式">2. 获取父节点的方式</h2>
<h3 id="一-parentnode获取父节点">一. parentNode获取父节点</h3>
<p>获取的是当前元素的直接父元素。parentNode是w3c的标准。</p>
<h3 id="二-parentelement获取父节点">二. parentElement获取父节点</h3>
<p>parentElement和parentNode一样，只是parentElement是ie的标准。</p>
<p>var p1 = document.getElementById("id_value").parentElement;</p>
<h3 id="三-offsetparent获取所有父节点">三. offsetParent获取所有父节点</h3>
<p>位置偏移量offset： 其实这个是于位置有关的上下级关系 ，直接能够获取到所有父亲节点， 这个对应的值是body下的所有元素节点信息。</p>
<h2 id="3-获取兄弟节点的方式">3. 获取兄弟节点的方式</h2>
<h3 id="一-通过获取父亲节点再获取子节点来获取兄弟节点">一. 通过获取父亲节点再获取子节点来获取兄弟节点</h3>
<pre><code class="language-javascript">// 1. 通过获取父亲节点再获取子节点来获取兄弟节点
var slf = document.getElementById('firstsibling')
console.log(slf.parentNode.childNodes)
// 第一次获得的是回车符#text
console.log(slf.parentNode.childNodes)
// 第二次获得的是自己位置 <div id="firstsibling"> 孙子一 </div>
// 了解children和childNodes的差别
console.log(slf.parentNode.children)
console.log(slf.parentNode.children)
</code></pre>
<h3 id="二-获取上一个兄弟节点">二. 获取上一个兄弟节点</h3>
<p>在获取前一个兄弟节点的时候可以使用previousSibling和previousElementSibling。他们的区别是previousSibling会匹配字符，包括换行和空格，而不是节点。previousElementSibling则直接匹配节点。</p>
<pre><code class="language-javascript">var sibling= document.getElementById("firstsibling").previousElementSibling;
var sibling = document.getElementById("firstsibling").previousSibling;
</code></pre>
<h3 id="三-获取下一个兄弟节点">三. 获取下一个兄弟节点</h3>
<p>参考【获取上一个兄弟节点】雷同previousSibling和previousElementSibling，nextSibling和nextElementSibling也是类似的。</p><br><br>
来源：https://www.cnblogs.com/seven18/p/15874155.html
頁:
[1]