dom中選取文件元素的方法總共有5種:
1.通過id值。
2.通過name屬性值。
3.通過指定的標籤名。
4.通過class類。
5.通過css選擇器
2.通過name屬性選取元素: document.getelementsbyname(name屬性值)"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"
);
多個元素可能有同樣的名字,所以該方法返回nodelist物件。是乙個類陣列 返回的元素按照在文件中的順序排序的 ,如果找不到就返回乙個同的類陣列物件
一般都是用來查詢再表單元 如果需要獲取其中乙個就需要加上中括號和下標
3.通過標籤名查詢:getelementsbytagname(標籤名)
getelementsbytagname(「tagname」)也返回nodelist物件,在nodelist物件中返回的元素按照在文件中的順序排序的。
,如果找不到就返回乙個同的類陣列物件
如果傳引數為萬用字元*,就返回文件中所有的元素。
getelementsbytagname()。
getelementsbyclassname()方法基於class屬性值中的標誌符來選取成組的文件元素。類似getelementsbytagname(),在html文件和html元素上都可呼叫getelementsbyclassname(),它的返回值是nodelist物件,且是實時的。它的引數只需要乙個字串,但該字串可以由多個空格隔開的標誌符組成。只有當元素的class屬性值包含指定的標誌符時才匹配,不過標誌符的順序無關緊要。var tags = document.
getelementsbytagname
("*");
console.
log(tags)
;var lis = document.
getelementsbytagname
("li");
console.
log(lis)
;var inputs = document.
getelementsbytagname
("input");
console.
log(inputs)
;
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...