關于原生JS獲取節點，一直是個頭疼的問題，而且調用方法的名字又賊長了，所以我選擇用JQ，好像跑題了--

話不多說看代碼

獲取父節點 及 父節點下所有子節點（兄弟節點）

?

<ul><li><textarea>文本一</textarea><input type=button value="復制" οnclick="jsCopy(this)"> </li> <li><textarea>文本二</textarea> <input type=button value="復制" οnclick="jsCopy(this)"> </li> <li> <textarea>文本三</textarea><input type=button value="復制" οnclick="jsCopy(this)"> </li> <li><textarea>文本四</textarea><input type=button value="復制" οnclick="jsCopy(this)"></li> </ul>

?

<script type="text/javascript">function jsCopy(ev){var ele=ev.parentNode; //獲取input的父級節點 console.log(ele); //獲取input的父級節點下的所有子節點（input及它的兄弟節點） console.log(ele.childNodes); //獲取input的父級節點下的第一個子節點（我的目的就是獲取到textarea，但是js就是這么坑） console.log(ele.firstChild); console.log('--------------------------分界線---------------------------------'); } </script>

我們來運行一下 ??

我們 看看數據 ??

文本一：第一條console獲取到了父級節點正常（很開心），第二條console返回的是父級元素下的所有節點元素（你會說：what？text？尼瑪沒有用到text標簽啊！怎么出來的）不急，我們繼續看，第三條console是獲取父級節點下的第一個子節點（what？這是啥？我是獲取第一個textatea啊，這尼瑪獲取的什么？我一口老血）;繼續->

文本二：第一條console獲取到了父級節點正常（很嚴肅），第二條console返回的是父級元素下的所有節點元素（你會說：更上面的文本一不是一樣的嗎？）仔細看！是不是少了個‘text‘，我們繼續看，第三條console是獲取父級節點下的第一個子節點（what？獲取到了，開心，郁悶了為什么啊）;繼續->

文本三：第二條console返回的是父級元素下的所有節點元素（跟文本一 差不多一樣，只是中間少了個text，抓狂了，難道有什么規律？）我們繼續看，第三條console是獲取父級節點下的第一個子節點（跟文本一 差不多一樣，獲取的#Text）;繼續->

文本三：第二條console返回的是父級元素下的所有節點元素（超級正常有沒有，高興地飛起--這是你們再回去看一下文本四的代碼）我們繼續看，第三條console是獲取父級節點下的第一個子節點（一切正常，這是為啥呢！難道臉黑）;

總結下：我想有的人大概看出了規律，沒錯，你沒猜錯，就是標簽與標簽之間不能換行，每當你換行JS 默認會把換行當成text元素加入到數組中，這就是你獲取不到想要的節點的原因。

?

那么問題來了，這個如何解決呢？

答：其實很簡單 就是刪除 ?數組中沒必要的元素（text）；

（我知道你們再想什么，嘿嘿，尼瑪講了一堆有的沒的，敢不敢上代碼）

?

好我就上代碼：

?

<script type="text/javascript">function jsCopy(ev){var ele=ev.parentNode; var elem_child = ele.childNodes; for(var i=0 in elem_child){ //遍歷子元素數組 if(elem_child[i].nodeName == "#text" && !/\S/.test(elem_child[i].nodeValue)) { //刪除數組中的text ele.removeChild(elem_child[i]); } } console.log(ele.firstChild); console.log('---------------------分界線-----------------------'); } </script>

?

?

運行一下

一切正常有沒有，終于獲取到想要的了。

?

這里我只做了獲取父級節點，子節點，其他的獲取雷同，所以一定要console，才能知道這些不為人知的秘密。

為了方便大家我就把JS獲取節點的方法粘出來：

?

?

var a = document.getElementByIdx_x_x("dom"); jsCopy(a);//調用清理空格的函數 var b = a.childNodes;//獲取a的全部子節點； var c = a.parentNode;//獲取a的父節點； var d = a.nextSibling;//獲取a的下一個兄弟節點 var e = a.previousSibling;//獲取a的上一個兄弟節點 var f = a.firstChild;//獲取a的第一個子節點 var g = a.lastChild;//獲取a的最后一個子節點

?

?

這次就寫到這，如有更好的可以留言分享下，在下先謝謝了！

轉載于:https://www.cnblogs.com/firstdream/p/9118272.html

總結

以上是生活随笔為你收集整理的总结获取原生JS(javascript)的父节点、子节点、兄弟节点的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。