關於HTML5有關DOM操作的學習

2021-09-27 09:55:34 字數 1166 閱讀 2771

最近學習了 html5中有關 dom操作的部分,在這裡做些記錄。

在傳統的 js開發中,查詢 dom 往往是開發人員遇到的第乙個頭疼的問題,原生的 js所提供的 dom 選擇方法並不多,僅僅侷限於通過 tag, name, id 等方式來查詢,這顯然是遠遠不夠的,如果想要進行更為精確的選擇不得不使用看起來非常繁瑣的正規表示式,或者使用某個庫jquery。

新dom獲取api出現:

現在所有的瀏覽器廠商都提供了 queryselector 和 queryselectorall 這兩個方法的支援,甚至就連微軟也派出了 ie 8 作為支援這一特性的代表,queryselector 和 queryselectorall 作為查詢 dom 的又一途徑,極大地方便了開發者,使用它們,你可以像使用 css 選擇器一樣快速地查詢到你需要的節點。

優點:h5新的獲取dom的queryselector 和queryselectorall 方法可以不需要額外的jquery等支援,也可以方便的獲取dom元素,語法跟jquery類似。

獲取元素api語法

document.queryselector(「選擇器」);

document.queryselectorall(「選擇器」);

queryselector 和 queryselectorall 的使用非常的簡單,它和 css 的寫法完全一樣,對於前端開發人員來說,難度幾乎為零。

document.queryselector只能獲取單個元素。

如果想獲取多個元素,可以利用document.queryselectorall

區別:①document.queryselector:該方法僅僅返回匹配指定選擇器的第乙個元素,即返回單個元素

②document.queryselectorall:該方法返回所有滿足條件的元素,結果是個nodelist集合

h5不僅增加了獲取元素api,也增加了操作元素類樣式的api,具體如下

對比:classlist 方式與 document.queryselector(「選擇器」).classname 的方法對比

分析:classlist 的方法新增和刪除不會清除原來的 class 類樣式,只是在其基礎上新增和刪除。而 classname的方式直接對源類樣式操作,容易遺漏和誤操作。

在HTML5中的DOM操作

var box1 document.queryselector 中可以包含標籤名 類名 後代選擇器 子代選擇器注意 這種選擇方式,選到的都是符合條件的第乙個,一般可用於選擇id選擇器 var box1 document.queryselectorall 中可以包含標籤名 類名 後代選擇器 子代選擇器...

HTML5一DOM相關的API

1.getelementsbyclassname 接受乙個引數,返回帶有指定類的所有元素的nodelist。傳入多個類名時,類名的先後順序不重要。2.classlist 每個元素都有乙個classlist屬性,它是domtokenlist的例項,以集合的形式表示元素的class屬性的值,它有如下方法...

HTML5新添的DOM方法介紹

h5中獲取元素的方法 1.queryselector 獲取符合選擇器的第乙個元素 2.queryselectorall 獲取符合選擇器的所有元素 h5中 類名的操作方法 var dom document.queryselector li nth child 2 dom.classlist.add a...