js選取DOM節點元素

2021-10-24 01:36:45 字數 3248 閱讀 9602

dom中選取文件元素的方法總共有5種:

1.通過id值。

2.通過name屬性值。

3.通過指定的標籤名。

4.通過class類。

5.通過css選擇器

"box"

>

boxdiv

>

class

="top"

>

topdiv

>

class

="top"

>

topdiv

>

class

="top"

>

topdiv

>

class

="top"

>

topdiv

>

class

="top"

>

topdiv

>

>

>

1li>

>

1li>

>

1li>

>

1li>

ul>

1.通過id選取元素: document.getelementbyid(id值)

任何元素都可以有乙個id屬性,在文件中該值必須唯一,所以該方法返回乙個dom物件。通過id獲取元素是最簡單最常用的選取元素的方法。

通常如下:

var boxdiv = document.

getelementbyid

("box"

);

2.通過name屬性選取元素: document.getelementsbyname(name屬性值)

多個元素可能有同樣的名字,所以該方法返回nodelist物件。是乙個類陣列 返回的元素按照在文件中的順序排序的 ,如果找不到就返回乙個同的類陣列物件

一般都是用來查詢再表單元 如果需要獲取其中乙個就需要加上中括號和下標

3.通過標籤名查詢:getelementsbytagname(標籤名)

getelementsbytagname(「tagname」)也返回nodelist物件,在nodelist物件中返回的元素按照在文件中的順序排序的。

,如果找不到就返回乙個同的類陣列物件

如果傳引數為萬用字元*,就返回文件中所有的元素。

getelementsbytagname()。

var tags = document.

getelementsbytagname

("*");

console.

log(tags)

;var lis = document.

getelementsbytagname

("li");

console.

log(lis)

;var inputs = document.

getelementsbytagname

("input");

console.

log(inputs)

;

getelementsbyclassname()方法基於class屬性值中的標誌符來選取成組的文件元素。類似getelementsbytagname(),在html文件和html元素上都可呼叫getelementsbyclassname(),它的返回值是nodelist物件,且是實時的。它的引數只需要乙個字串,但該字串可以由多個空格隔開的標誌符組成。只有當元素的class屬性值包含指定的標誌符時才匹配,不過標誌符的順序無關緊要。

5.通過css選擇器選取元素:queryselectorall()和queryselector(css選擇器)

queryselectorall(),它接受包含乙個css選擇器的字串引數,返回乙個表示nodelist物件。注意,該nodelist物件不是實時的:它包含在呼叫時刻選擇器所匹配的元素,但它並不更新後續文件的變化。

如果沒有匹配的元素,返回空的nodelist物件。如果選擇器語法錯誤,將跑出乙個異常。

還有乙個queryselector()方法,與queryselectorall()工作原理一樣,不過它只返回第乙個匹配的元素,如果沒有匹配的,返回null。

這兩個方法在element上也有定義,所有在元素上也可用。

DOM節點的選取

dom提供了對html文件中元素 屬性以及文字的一系列操作方法和屬性。通過對html節點的操作來實現相應的效果及互動。節點分三類 元素節點 屬性節點 文件節點,其中元素節點最為重要,後面兩種節點依賴於元素節點。元素節點的獲取 舊的查詢方案 document.body 可直接拿到body元素 docu...

DOM元素節點

目錄 一 dom元素節點的增刪改 1.新增 1.1將新增的節點放到某個標籤內 2.刪除 3.修改 替換 4.轉殖 複製 二 dom元素節點的屬性 1.元素節點本質是乙個物件,存在修飾該元素的屬性和方法 2.通用屬性 2.獲取非內聯 行內 樣式 3.一些標籤特有的屬性 4.節點的屬性 三 拓展clss...

dom 查詢元素節點

var div document.getelementsbytagname div 0 查詢元素節點,方法會存在一些相容性問題,ie低版本瀏覽器不支援 console.log div.parentelement 父元素節點 console.log div.children 子元素節點 console...