DOM的擴充套件

2021-08-13 23:36:18 字數 1372 閱讀 2604

dom擴充套件主要為selectors api和html5

selectors api的兩個核心放方法queryselector()和queryselectorall()

1.queryselector()接收css選擇符,返回與該模式匹配的第乙個元素。

// 獲取body元素

var body = document.queryselector("body");

// 取得類為「button」的第乙個影象元素

var img = document.body.queryselector("img.button");

2.queryselectorall()接收乙個css選擇符,返回的是所有匹配的元素。

// 取得某中所有元素

var ems = document.getelementbyid("mydiv").queryselectorall("em");

// 遍歷nodelist

var i, len, strong;

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

3.matchesselector(),它接收乙個css選擇符,如果呼叫元素與該選擇符匹配,返回true。

if (document.body.matchesselector("body.page1"))

4.遍歷元素

var i,

len,

child = element.firstelementchild;

while (child != element.lastelementchild)

html5

5.getelementsbyclassname()接收乙個引數,即乙個包含一或多個類名的字串。

// 獲取id為「mydiv」的元素中帶有類名「selected」的所有元素

var selected = document.getelementbyid("mydiv").getelementsbyclassname("selected"); 

6.classlist屬性

// 刪除「disabled」類

div.classlist.remove("disabled");

// 新增「current」類

div.classlist.add("current");

// 切換「user」類

div.classlist.toggle("user");

7.焦點管理,focus()獲取焦點,hasfocus()判斷是否獲取焦點

var button = document.getelementbyid("mybutton");

// 獲取焦點

button.focus();

DOM擴充套件

1選擇符 queryselector 返回第乙個匹配的元素 queryselectorall 返回所有匹配的元素 html5 getelementbyclassname 引數為乙個或多個類名,引數不重要,返回是乙個nodelist 集合 classlist add 加入字串 contains 列表中...

DOM擴充套件

1.selector api level1 ie8 queryselector body mydiv selected 取類為此的第乙個元素 queryselectorall 返回乙個nodelist例項,返回的值實際上是帶有所有屬性和方法的nodelist,底層類似於一組元素快照,而非對文件進行搜...

DOM及其擴充套件

元素物件的標準特性 1 obj.id 2.obj.classname 3.obj.title 4.obj.lang 元素內容的語言 5.obj.dir ltr 或rtl 自定義特性 加 data 字首 特殊的特性 style onclick 取得特性 getattribute setattribut...