JavaScript DOM擴充套件(一)

2021-08-22 16:15:30 字數 1583 閱讀 1129

quertselector()方法

queryseletorall()方法

上面兩個方法都接受乙個css選擇符,這是乙個靜態的查詢。

matchesselector()方法

接受乙個引數(css選擇符),如果呼叫元素與該選擇符匹配,則返回true

目前沒有瀏覽器支援該方法,但是有一些瀏覽器通過不規範的名字實現了它的功能

safari (webkit) :webkitmatchesselector (5.0 )

對於元素間的空格,==ie9及之前版本==不會返回文字節點,而其他所有瀏覽器都會返回文字節點。

(這裡只討論與dom節點相關的內容)

接受類名,返回乙個nodelist

出現之前:在操作類名時,需要通過classname屬性新增、刪除和替換類名。

class="bd user disable">******div>

//現在有乙個div有三個類名,刪除其中的 user類 **如下

//先取得類名字串並拆分成陣列

var classnames = div.classname.split(/\s+/);

//找到要刪的類名

var pos = -1,i,len;

for(i=0, len=classnames.length; i < len; i++)

}//刪除類名

classnames.splice(i,1);

//把剩下的類名拼成字串並重新設定

diw.classname = classnames.join(" ");

這真的很麻煩,而且過程無法簡化。

html5:為所有元素新增了classlist屬性。

//這樣一行**我就能實現上面的功能

div.classlist.remove("user");

html5也新增了輔助管理的dom焦點功能。

元素獲得焦點:頁面載入,使用者輸入(通常是tab鍵)和在**中呼叫了focus()方法

compatmode屬性:檢測頁面的相容模式

head屬性:引用文件的元素

html5規定可以為元素新增非標準的屬性,但要新增字首data-,目的是為元素提供與渲染無關的資訊,或者提供語義資訊。這些屬性可以任意新增,隨便命名。

新增了自定義屬性之後,可以通過元素的dataset屬性來訪問自定義屬性的值。dateset屬性的值是domstringmap的乙個例項。

"mydiv"

data

="12345"

data

-myname

="nicholas"

>

var div = document.getelementbyid("mydiv");

var myname = div.dataset.myname;

div.dataset.myname = "michael";

上面就是使用方法。

javaScript DOM程式設計

1.獲取dom樹的根節點 2.getelementbyid 根據標籤的id獲取標籤元素和getelementsbytagname根據標籤名獲取標籤,返回的是陣列的形式 3.getelementsbynames 根據標籤的name屬性獲取標籤,返回的是陣列形式 有兩個input標籤,因此列印結果是2 ...

JavaScript DOM程式設計

dom document objective model 文字物件模型 例子 clickme 例子 先獲取某一指定的元素節點 再讀指定元素節點的屬性 設定指定元素節點的屬性的值 例子 你喜歡那個城市?你喜歡哪款單擊遊戲?name 先獲取某節點。用childnodes方法獲取指定元素節點的所有子節點。...

javascript DOM 獲取節點

1.獲取元素節點 1.1 通過元素節點的id屬性獲取 語法 document.getelementbyid 元素id屬性的值 例如 1.2 根據元素的名稱獲取,獲取的是所有為該名稱的元素節點組成的陣列,可以用陣列的方法操作該節點陣列 語法 document.getelementsbytagname ...