DOM啟蒙 第四章

2021-07-11 04:31:39 字數 1728 閱讀 7273

1.選取特定元素節點

取得乙個元素節點引用的最常用的方式為

●queryselector()

●getelementbyid()

queryselector()返回文件中符合傳入選擇器的首個元素節點,即若有多個節點滿足條件,則返回第乙個。

document.createtextnode(document.queryselector("li").textcontent)

document.createtextnode(document.getelementbyid("last").textcontent)

2.選取/建立乙個元素節點列表(nodelist)常見方法為

●queryselectorall();

●getelementsbytagname()

●getelementsbyclassname()

①getelementsbytagname()和getelementsbyclassname()建立的nodelist例項是實時的,會即時反應文件的當前狀態。

②而queryselector()返回的列表是該列表建立時文件的快照,是靜態的,不反映文件之後的改動。

③queryselectorall()或者getelementsbytagname()方法傳入字串* ,返回乙個由文件中所有節點組成的列表。

3.選取所有直屬子元素節點。

使用元素節點的children屬性可以取得乙個htmlcollection列表,它由所有直屬子節點中元素節點組成。

console.log(document.queryselector("ul").children);

children只返回直屬的元素節點,不是元素的節點會被剔除。

4.選取與上下文有關的元素。

getelementsbytagname()和getelementsbyclassname()以及queryselector()、queryselectorall()一般通過document訪問,但是也可以在元素節點上使用。如

document.queryselector("div")

div.queryselector("ul");

div.getelementsbyclassname("test")

這些方法不僅在實時dom中可以使用,動態建立的dom元素中也可以。

5.預定義的節點列表

document.all為文件中所有元素。

document.forms為文件中所有元素

document.images為文件中所有

document.links為文件中所有元素

document.scripts為文件中所有script元素

document.stylesheets為文件中所有或元素

其中document.stylesheets構建自stylesheetslist,其他均構建自htmlcollection

document.all構建自htmlallcollection

6.使用matchesselector()驗證元素是否會被選取

使用matchesselector()可以判斷乙個元素是否匹配某個選擇器字串,若匹配則返回true

(document.createtextnode(document.queryselector("li").webkitmatchesselector("li:first-child")))//true

需要加字首。

以後matchesselector()將被改名為matches();

第四章 DOM節點操作

1.什麼是dom dom document object model 文件物件模型,把每乙個元素看做是乙個 節點,然後對節點進行增刪改查的操作 2.dom的分類 1 core dom 可以對html,xhtml,xml進行操作 2 html dom 可以對html,xhtml進行操作 3 xml d...

第四章 繼承

一 為什麼要繼承 在物件導向中我們將具有很多重複內容的類中的內容提取出來,寫成乙個單獨的類 其他類只需要繼承就能取得這些功能,同時可以在自己類中寫入獨特的自定義方法 二 繼承語法 inte ce circle nsobject 繼承是在介面中定義的 冒號後的類名是要整合的類,nsobject 是co...

第四章 物件

三個特性 身份 型別 值 每個物件都有唯一的身份來標識自己,使用內建函式id 得到。例子 usr bin env python coding utf 8 a 32 print a b a print id a id b 結果 d python27 python.exe e workp python ...