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就是從表。那麼,一般我們會在從表中做一個外來鍵欄位,引用主表中的主