DOM扩展

最新推荐文章于 2024-05-11 00:30:00 发布

chiza4954

最新推荐文章于 2024-05-11 00:30:00 发布

阅读量91

点赞数

原文链接：https://my.oschina.net/u/3240534/blog/856892

版权

DOM扩展

选择符API

-querySelector()——接收一个CSS选择符，返回与该模式匹配的第一个元素

var body=document.querySelector("body");
var myDiv=document.querySelector("#myDiv");
var selected=document.querySelector(".selected");

-querySelectorAll()——接收一个CSS选择符，返回所有匹配的元素

var ems=document.getElementById("myDiv").querySelectorAll("em");
var selected=document.querySelectorAll(".selected");
var strongs=document.querySelectorAll("p strong");

-matchesSelector()——接收一个CSS选择符，如果调用元素与该选择符匹配则返回true,否则，返回false

元素遍历

Element Traversal API 为DOM元素添加了部分属性：

-childElementCount

-firstElementChild

-lastElementChild

-previousElementSibling

-nextElementSibling

HTML5

与类相关的扩充

-getElementByClassName()

操作类名——通过className属性添加、删除和替换类名

操作类名——为所有元素添加classList属性

添加——add(value)

删除——remove(value)

切换——toggle(value)

——contains(value)

div.classList.remove("disabled");
div.classList.add("current");
div.classList.toggle("user");
for(var i= 0,len=div.classList.length;i<len;i++){
doSomething(div.classList[I]);
}

焦点相关

属性document.activeElement——始终引用DOM中当前获得了焦点的元素

页面加载——获得焦点

用户输入——获得焦点

调用focus()方法——获得焦点

-document.hasFocus()方法——检测是否获得了焦点

HTMLDocument的变化

-document.readyState属性

兼容模式

-document.head属性

字符集属性

-document.charsert属性

-document.defaultCharset属性

自定义数据属性

自定义属性——添加前缀data-

访问自定久属性的值——dataset属性

var div=document.getElement("myDiv");
//取得自定久属性的值
var appId=div.dataset.appId;
var myName=div.dataset.myname;
//设置值
div.dataset.appId=23456;
div.dataset.myname="michael";