javascriptDOM扩展
选择符API
这个是通过CSS选择符选择与特定模式匹配的DOM元素,主要代表是jQuery。Selector API Level1的核心是两个方法:querySelector()和querySelectorAll().在兼容的浏览器中,可以通过Document和 Element类型来调用它们。
querySelector()方法,参数为一个CSS选择符,返回与该模式匹配的第一个元素,如果没有找到匹配元素返回 null。使用document对象调用这个方法的时候,会在全文档内进行匹配。当使用element对象调用这个方法时,只在element的后代元素 内查找匹配。
querySelectorAll()方法,接收参数同querySelector()一样,返回一个NodeList的实例。
matchesSelector()方法,这个方法接受一个参数,CSS选择符,如果调用元素与该选择符匹配,返回true,否则返回false。为了解决浏览器兼容问题,可以使用下面的包装函数:
function matchesSelector(element,selector){
if(element.matchSelector){
return element.matchesSelector(selector);
}else if(element.msMatchesSelector){//IE
return element.msMatchesSelector(selector);
}else if(element.mozMatchesSelector){//FireFox
return element.mozMatchesSelector(selector);
}else if(element.webkitMatchesSelector){//safari,chorme
return element.webkitMatchesSelector(selector);
}else{
throw new Error("No supportted!");
}
}
元素的遍历问题
为了解决一些浏览器兼容问题,Element Traversal API为DOM元素添加了5个属性。
childElementCount:返回子元素的个数
firstElementChild:返回第一个子元素
lastElementChild:返回最后一个子元素
previousElementSibling:返回前一个同辈元素
nextElementSibling:指向后一个同辈元素
HTML5扩展
HTML规则围绕如何使用新增标记定义了大量的js API,其中一些api与DOM重叠,定义了浏览器应该支持的DOM扩展。
与类相关的扩展
getElementsByClassName() ,接收一个参数,参数为一个包含一个或者多个的类名,返回的结果就是带有指定类的所有元素的NodeList。传入多个类名的时候,类名的先后顺序不重 要。它与document.getElementsByTagName有类似的效果。
classList属性
使用这个属性的一些方法可以简化class属性的操作,例如:
add(value):将新的添加进去,已存在就不添加
contains(value)是否存在value,存在true,不存在false
remove(value):删除value
toggle(value):如果存在,删除它,如果不存在,添加它
焦点管理
document.activeElement属性在HTML5中始终代表当前焦点指向的元素。
另外,新增的document.hasFocus()用于确定文档是否获取了焦点。
HTML对HTMLDocument的扩展
readyState: loading:表示正在加载 complete:表示完成
使用方式: if(document.readyState=="complete"){ // 执行操作 }
兼容模式
页面采用标准模式的情况下 document.compatMode="CSS1Compat"
页面采用混杂模式的情况下 document.compatMode==“BackCompat”
head属性
引入新的属性引用html的head部分:document.head
兼容性js代码:
var head=document.head||document.getElementsByTagName("head")[0];
字符集属性
document.charset//文档实际使用的字符集
document.defaultCharset//文档的默认字符集
自定义数据属性
HTML5可以为元素添加非标准属性,但要添加前缀data-
例子:标签部分:
<div id="mydiv" data-appId="12345" data-myname="Nicholas"/>
获取属性的js部分
var div=document.getElementById("mydiv");
var appId=div.dataset.appId;
var myname=div.dataset.myname;
div.dataset.appId="000";
if(div.dataset.appId){
alert(div.dataset.appId);
}
由于innerHTML的支持各个浏览器相同,因此在往innerHTML中插入文本的时候要预先做一下检查。
在读模式下,outerHTML属性返回调用它的元素以及所有子节点的HTML标签;写模式下,根据指定的HTML字符串创建新的DOM子树,然后这个DOM子树完全替换调用元素。
insertAdjecentHTML(),接收两个参数,插入位置和要插入的HTML文本。第一参数必须为下列值之一:
beforebegin,afterbegin,beforeend,afterend.第二个参数是一个HTML字符串。
效率上来说,这些方式比js的DOM操作效率高,但是需要注意的是太频繁的操作会带来性能上的损失。
窗口滚动方法
scrollIntoView(),屏幕滚动,如果参数设为true,或者不设,则调用元素的顶部与视口平齐;设为false则尽可能的全部出现在视口中。
document.forms[0].scrollIntoView();
另外还有一些其他的扩展,但是这些扩展都是为了弥补一些缺陷设立的,但是还没有纳入到一些公认的规范当中。
以上是 javascriptDOM扩展 的全部内容, 来源链接: utcz.com/z/509981.html