Dom 直接 間接選擇器

2022-02-20 16:34:18 字數 2655 閱讀 9614

dom:document object model的縮寫， 把html轉換成了文字物件.

1. 直接選擇器

1、直接查詢


document.getelementbyid             根據id獲取乙個標籤


document.getelementsbyname          根據name屬性獲取標籤集合


document.getelementsbyclassname     根據class屬性獲取標籤集合


document.getelementsbytagname       根據標籤名獲取標籤集合
1. 找到標籤

document.getelementbyid('i1') 獲取單個元素，因為id是不可能重複的，所以只能找到乙個元素。

document.getelementsbytagname('div') 獲取多個元素（列表）

document.getelementsbyclassname('c1') 獲取多個元素（列表）

document.getelementsbyname

2. 操作標籤

獲取標籤中的文字內容 innertext

示例：

我是i1


909我是中國人


sdfdfd
執行：

document.getelementbyid('i1')


​我是i1​


​document.getelementbyid('i1').innertext


"我是i1"


document.getelementbyid('i1').innertext='新內容'


"新內容"


document.getelementsbytagname('a')


(3) [a, a, a]


document.getelementsbytagname('a')[1]


​我是中國人​​


document.getelementsbytagname('a')[1].innertext='i am chinese'


"i am chinese"


tags=document.getelementsbytagname('a')


(3) [a, a, a]


for(var i=0;i2. 間接選擇器。sibling是兄弟姊妹的意思。


2、間接查詢


parentnode          // 父節點


childnodes          // 所有子節點


firstchild          // 第乙個子節點


lastchild           // 最後乙個子節點


nextsibling         // 下乙個兄弟節點


previoussibling     // 上乙個兄弟節點 


parentelement           // 父節點標籤元素


children                // 所有子標籤


firstelementchild       // 第乙個子標籤元素


lastelementchild        // 最後乙個子標籤元素


nextelementtsibling     // 下乙個兄弟標籤元素


previouselementsibling  // 上乙個兄弟標籤元素
示例：

c1    


c2    


c3
執行結果：

tag=document.getelementbyid('i1')


​c2​


​tag.parentelement


​​​​c2​​​


tag.parentelement.children


(2) [div, div#i1, i1: div#i1]i1: div#i1length: 20: div1: div#i1__proto__: htmlcollection


tag.parentelement.previouselementsibling


​​​​c1​


​​
3. 操作標籤：

a-innertext: 獲取標籤中的文字內容， tag.innertext=" "

b-classname: 

tag.classname: 直接整體做操作

tag.classlist.add('樣式名')  新增指定樣式

tag.classlist.remove('樣式名')  刪除指定樣式

c-如下，點選的功能。

點我
4. 來個完整示例-----模態對話方塊。　　

z-index： 誰的值最大，誰就在最上面。
主機名埠


1.1.1.1


191                1.1.1.2


192                1.1.1.3


193
執行結果：

點選取消後，對話方塊消失。

5. 精簡版。執行有問題的時候，先檢測一下是否所有的分號都寫好了。

jquery選擇器和dom選擇器區別

1.jquery選擇器css file loading css visibility visible 2.dom選擇器stylrdocument.getelementbuyid file loading style.visibility visible 因為jquery沒有.css屬性 3.jque...

jQuery選擇器選擇dom元素

jquery選擇器其實是乙個有些地方比較費解的，如果沒有經過多次實驗的話，很難得出它的每個操作符到底是幹什麼的，很容易出錯，經過我的多次測試，終於對一些比較難理解或容易出錯的選擇操作進行總結，既方便自己將來查詢又方便初學者學習。如果 有不對的還望大家幫我指出來，這裡是乙個相互學習的地方。1.先說說通...

jQuery 選擇器，操作DOM

jquery是乙個輕量級的js庫 選擇器 新增乙個 按鈕，使段落的字型放大 function plus type button value onclick plus p1 利用jquery實現字型的放大 過濾選擇器 表單選擇器 操作dom 增刪節點 樣式操作 addclass 追加樣式 remove...