javascriptDOM扩展

coding

选择符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

回到顶部