1. 程式人生 > >DOM獲取節點的兄弟,父節點,子節點

DOM獲取節點的兄弟,父節點,子節點

先說一下JS的獲取方法,其要比JQUERY的方法麻煩很多,後面以JQUERY的方法作對比。

JS的方法會比JQUERY麻煩很多,主要則是因為FF瀏覽器,FF瀏覽器會把你的換行也當最DOM元素

<div id="test">

<div></div>

<div></div>

</div>

原生的JS獲取ID為test的元素下的子元素。可以用:

var a = docuemnt.getElementById("test").getElementsByTagName("div");  這樣是沒有問題的

此時a.length=2;

但是如果我們換另一種方法

var b =document.getElementById("test").childNodes;  

此時b.length 在IE瀏覽器中沒問題,其依舊等於2,但是在FF瀏覽器中則會使4,是因為FF把換行也當做一個元素了。

所以,在此,我們就要做處理了,需遍歷這些元素,把元素型別為空格而且是文字都刪除。

function del_ff(elem){

var elem_child = elem.childNodes;

for(var i=0; i<elem_child.length;i++){

if(elem_child[i].nodeName == "#text" && !/\s/.test(elem_child.nodeValue))

{elem.removeChild(elem_child)

}

}

}

上述函式遍歷子元素,當元素裡面有節點型別是文字並且文字型別節點的節點值是空的。就把他刪除。

nodeNames可以得到一個節點的節點型別,/\s/是非空字元在JS裡的正則表示式。前面加!,則表示是空字元

test() 方法用於檢測一個字串是否匹配某個模式.語法是: RegExpObject.test(string)

如果字串 string 中含有與 RegExpObject 匹配的文字,則返回 true,否則返回 false。

nodeValue表示得到這個節點裡的值。

removeChild則是刪除元素的子元素。

之後,在呼叫子,父,兄,這些屬性之前,呼叫上面的函式把空格清理一下就可以了

<div id="test">

<div></div>

<div></div>

</div>

<script>

function dom() {

var s= document.getElementById("test");

del_ff(s);    //清理空格

var chils= s.childNodes;  //得到s的全部子節點

var par=s.parentNode;   //得到s的父節點

var ns=s.nextSbiling;   //獲得s的下一個兄弟節點

var ps=s.previousSbiling;  //得到s的上一個兄弟節點

var fc=s.firstChild;   //獲得s的第一個子節點

var lc=s.lastChile;   //獲得s的最後一個子節點

}

</script>

下面介紹JQUERY的父,子,兄弟節點查詢方法

jQuery.parent(expr)  找父親節點,可以傳入expr進行過濾,比如$("span").parent()或者$("span").parent(".class")

jQuery.parents(expr),類似於jQuery.parents(expr),但是是查詢所有祖先元素,不限於父元素

jQuery.children(expr).返回所有子節點,這個方法只會返回直接的孩子節點,不會返回所有的子孫節點

jQuery.contents(),返回下面的所有內容,包括節點和文字。這個方法和children()的區別就在於,包括空白文字,也會被作為一個

jQuery物件返回,children()則只會返回節點

jQuery.prev(),返回上一個兄弟節點,不是所有的兄弟節點

jQuery.prevAll(),返回所有之前的兄弟節點

jQuery.next(),返回下一個兄弟節點,不是所有的兄弟節點

jQuery.nextAll(),返回所有之後的兄弟節點

jQuery.siblings(),返回兄弟姐妹節點,不分前後

jQuery.find(expr),跟jQuery.filter(expr)完全不一樣。jQuery.filter()是從初始的jQuery物件集合中篩選出一部分,而jQuery.find()

的返回結果,不會有初始集合中的內容,比如$("p"),find("span"),是從<p>元素開始找<span>,等同於$("p span")

相關推薦

JS獲取節點兄弟級元素

https://blog.csdn.net/duanshuyong/article/details/7562423   先說一下JS的獲取方法,其要比JQUERY的方法麻煩很多,後面以JQUERY的方法作對比。JS的方法會比JQUERY麻煩很多,主要則是因為FF瀏覽器,FF瀏覽器會把你的換行也當

JS/JQ獲取節點的同級級元素

先說一下JS的獲取方法,其要比jQuery的方法麻煩很多,後面以JQUERY的方法作對比。 JS的方法會比JQUERY麻煩很多,主要則是因為FF瀏覽器,FF瀏覽器會把你的換行也當最DOM元素 <div id="test"> <div></div

在EasyUI實現點擊有節點的文字時展開但不選中點擊最終節點才選中的功能

nload 容易 事件 data strong 中項 eight spa 清除 最近做的項目中,總是會遇到需要實現點擊樹目錄的有子節點時展開目錄,點擊最終子節點才實現選中的功能的需求。下邊我就直接黏貼一下代碼出來吧,非常容易看懂,關鍵的就是在選中事件中加一個判斷。

自動獲取iFrame的高度iframe取得iframe的form

function iFrameHeight(ifm) { //var ifm = document.getElementById('iframeBox4'); //var subWeb = document.frames ? document.frames["iframeBox4"].document :

原生態php通過dom獲取div/table裡面的內容不用正則!

原生態php獲取網頁標籤裡面的內容,不用外掛!不用正則,直接一把摳出來! error_reporting(E_ALL); $out=_getUrl('http://www.gdczepb.gov.

使用dtree生成的樹結構ajax動態載入節點如何繫結右鍵選單續

var l_tree = document.getElementById("l_tree_d"); var tree = new dTree("tree");//建立一個物件.      tree.add(0,-1,'APISite',"javaScript:getMore

jquery獲取元素的值獲取當前物件的物件元素的元素

當點選 <a href="#" style="cursor: hand" onclick="more(this);" class="fright mr15">更多</a>時, 在js的函式中想要獲取隱藏域的值 <input type="hidden" value="00070

利用反射獲取介面的資訊

1.測試類: package com.example; import com.example.utils.StringUtils; import java.lang.reflect.Field; import java.lang.reflect.Inv

遞歸獲取當前節點全部指定類型的節點

lang 類型 當前 能夠 tle nodetype i++ 文檔 not 在線預覽 方法 使用nodeType判斷類型,在allChildNodes方法內建立遞歸函數將allCN封裝在方法內。 <!DOCTYPE html> <html lang="

vue高階屬性 provide/inject元件向元件或元件的元件的元件...傳遞資料

官網說明:provide 和 inject 主要為高階外掛/元件庫提供用例。並不推薦直接用於應用程式程式碼中 以允許一個祖先元件向其所有子孫後代注入一個依賴,不論元件層次有多深,並在起上下游關係成立的時間裡始終生效。 provide 選項應該是一個物件

vue-cli工程 中元件註冊 元件向元件傳值

** 首先我們準備一個父元件模板 ------------- ** <template>   <div id="app">     <!-- 使用子元件 -->     <!-- 向子元件傳值 需

vue元件元件與元件之間通訊

vue元件,元件是一個可複用的功能模組,即將具有相同功能的模組抽取成一個元件,在需要的地方引用即可,這體現了程式碼封裝的思想,下面看一下元件是如何實現: // 定義一個名為 button-counter 的新元件 Vue.component('button-counter',

【資料庫】主鍵外來鍵主表從表關聯表

轉自:https://www.2cto.com/database/201707/662425.html 一、前言 在資料庫設計中,hibernate,iBatis等ORM框架的使用中經常聽說主鍵,外來鍵,主表,從表,關聯表,父表,子表之類的術語,弄懂它們之前的區別與聯絡對於資料庫設計和ORM框架的學習使用

【數據庫】主鍵外鍵主表從表關聯表

了解 identity 得到 信息 自動刪除 upload aid 時也 聽說 轉自:https://www.2cto.com/database/201707/662425.html 一、前言 在數據庫設計中,hibernate,iBatis等ORM框架的使用中經常聽說主鍵

windows視窗分析視窗視窗所有者視窗

https://blog.csdn.net/u010983763/article/details/53636831 在Windows應用程式中,視窗是通過控制代碼HWND來標識的,我們要對某個視窗進行操作,首先就要獲取到這個視窗的控制代碼,這就是視窗和控制代碼的聯絡。 (本文嘗試通過一些簡單

angular2父子元件的資料傳遞元件向元件傳遞資料

父元件---->子元件 <my-component  [input]="myvalue" ></my-component> 這是單一使用向子元件寫入一組資料, 這樣我們在my-component元件裡面使用@Input() input: an

vue ts ,vue使用typescript的時候元件給元件傳值提示 Invalid prop: type check failed for prop "fatherSearch". Expe

vue使用ts會遇到各種各樣的問題,最近使用時發現父元件給子元件傳值時提示 Invalid prop: type check failed for prop "fatherSearch". Expected Object, got Function.,子元件接收的方式如下:這

元件向元件傳值元件向元件傳值

子->父 例如:子向父傳遞flag 在子元件中想要傳出的的dom元素中新增事件 @click=”sendFlag”; 在vue的methods定義方法 sendFlag(){ let flag=this.flag; this.

asp.net TreeView點選級觸發節點checkbox狀態變更

function OnTreeNodeChecked() { var ele = window.event.srcElement; if(ele.type=='checkbox')

主鍵外來鍵主表從表關聯表

主從表是一種資料關係模型,主表約束從表。以學員資訊表stuInfo和考試成績表stuMarks為例, 我們知道它們是一對多的關係,當然一是主,多是從。(譬如我們的胡主席是主,我們大家都要聽主席的話!)所以stuInfo就是主表,stuMarks就是從表。那麼,一般我們會在從表中做一個外來鍵欄位,引用主表中的主