js高级程序设计笔记7--DOM2和DOM3

2024-04-27 15:06:00

字体：大中小

来源：转载

供稿：网友

选择符API

Selectors API是由W3C发起制定的一个标准。致力于让浏览器原生支持CSS查询。

querySelector()方法

此方法接收一个CSS选择符，返回与该模式匹配的第一个元素。如果没有找到返回null.

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

如果传入了不被支持的选择符，querySelector()方法会抛出错误。

querySelectorAll()方法

接收的参数与querySelector()方法一样，但是返回的是一个NodeList的实例。

//取得所有<p>元素中的所有<strong>元素var strongs = document.querySelectorAll("p strong");

matchesSelector()方法

传入一个css选择符，如果调用元素与该选择符匹配，则返回true.很多浏览器还没有支持matchesSelector()方法，各个浏览器实现的方法不同。如果要用则写过包装函数。

元素遍历

对于元素间的空格，IE9及之前的版本不会返回文本节点，而其他浏览器都会返回文本节点。为了弥补这一差异，Element Traversal规范新定义了一组属性。 childElementCount:返回子元素（不包括文本节点和注释）的个数。 firstElementChild:指向第一个子元素 lastElementChild:指向最后一个子元素。 PReviousElementSibling:指向前一个同辈元素。 nextElementSibling:指向后一个同辈元素。

HTML5扩展DOM

getElementsByClassName()方法：接收一个参数，一个包含一或多个类名的字符串，返回带有指定类的所有元素的NodeList。var selected = document.getElementById("myDiv").getElementByClassName("selected");classList属性：HTML5新增了一种操作类名的方式。可以让操作更简单更安全。这个classList属性时新集合类型DOMTokenList的实例。DOMTokenList有个length属性，并有以下方法： add(value):将给定的字符串添加到列表中。 contains(value):表示列表中是否存在给定的值。 remove(value):从列表中删除指定的字符串。 toggle(value):如果存在则删除，不存在则添加。<div class="bd user disabled">...</div>div.classList.remove("disabled");div.classList.add("current");

支持classList属性的浏览器有Firefox3.6+和Chrome.

焦点管理

HMTL5也添加了管理DOM焦点的功能。 document.activeElement：这个属性始终会引用DOM中当前获得了焦点的元素。

var button = document.getElementById("muButton");button.focus();alert(document.activeElement == button);//true

document.hasFocus()方法：用于确定文档是否获得了焦点。

HTMLDocument的变化

HTML5扩展了HTMLDocument。 1. readyState属性：有两个可能的值：loading(正在加载文档（,complete(已经加载文档).

if(document.readyState == "complete"){ //执行操作}兼容模式为了区分页面的模式是标准的还是混杂的。IE为此给document添加了一个名为compatMode的属性。标准模式下，document.compatMode的值为”CSS1Compat”,混杂模式下为”BackCompat”.

document.head引用文档的元素。 document.charset:文档中实际使用的字符集。 document.defaultCharset:浏览器设置的文档默认的字符集。

自定义数据属性

HTML5规定可以为元素添加非标准的属性，但要添加前缀data-.

可以通过元素的dataset属性来访问自定义属性的值。

var appId = div.dataset.appId;var myName = div.dataset.myname;

插入文本

innerText:但firefox不支持 textContent:firefox支持

function getInnerText(element){ return (typeof element.textContent == "string")?element.textContent:element.innerText;}

css规则

CSSRule对象表示样式表中的每一条规则。

div.box{ background-color:blue; width:100px; height:200px;}假设这条规则位于页面中的第一个样式表中。var sheet = document.styleSheets[0];var rules = sheet.cssRules || sheet.rules;//取得规则列表var rule = ruless[0];alert(rule.selectorText);//div.boxalert(rule.style.cssText);//完整的CSS代码alert(rule.style.backgroundColor);//blue

创建规则

insertRule(规则文本，表示在哪里插入规则的索引).

sheet.insertRule("body{backgournd-color:silver}",0);

但IE8及更早版本不支持此方法，而是另外一个方法：

sheet.addRule("body{backgournd-color:silver}",0);

删除规则

deleteRule(pos):接受一个参数，要删除的规则的位置。 IE支持的方法removeRule()。

元素大小

偏移量。

offsetHeight:元素在垂直方向上占用的空间大小。以像素计。包括元素的高度，水平滚动条的高度、上边框高度和下边框高度。 offsetWidth:元素在水平方向上占用的空间大小。 offsetLeft:元素的左外边框至包含元素的左内边框之间的像素距离。 offsetTop:元素的上外边框至包含元素的上内边框之间的像素距离。 offsetParent:对包含元素的引用。取得元素的左偏移量(上偏移量类似原理)。

function getElementLeft(element){ var actualLeft = element.offsetLeft; var current = element.offsetParent; while(current != null){ acrualLeft += current.offsetLeft; current = current.offsetParent; } return actualLeft;}

所有这些偏移量都是只读的，而且每次访问他们都需要重新计算。因此尽量避免重复访问这些属性。 2. 客户区大小指的是元素内容及其内边距所占据的空间大小。 clientWidth:元素内容区域宽度加上左右内边距宽度。 clientHeight:元素内容高度加上上下内边距高度。 3. 滚动大小 scrollHeight:在没有滚动条的情况下，元素内容的总高度。 scrollWidth:在没有滚动条的情况下，元素内容的总宽度。 scrollLeft:被隐藏在内容区域左侧的像素数。通过设置这个属性可变改变元素的滚动位置。 scrollTop:被隐藏在内容区域上方的像素数。

遍历

“DOM2级遍历和范围”模块定义了两个用于完成顺序遍历DOM结构的类型：NodeIterator和TreeWalder. 能够基于给定的起点对DOM结构执行深度优先的遍历操作。检测浏览器是否支持：

var supportsTraversals = document.implementation.hasFeature("Traversal","2.0);var supportNodeIterator= (typeof document.createNodeIterator == "function");var supportTreeWalder = (typeof document.createTreeWalder == "function");

document.createNodeIterator()方法接收四个参数： root:想要作为搜索起点的树中的节点。 whatToShow:表示要访问那些节点的数字代码。 filter:一个NodeFilter对象，或者一个表示接受还是拒绝某种特定节点的函数。 entityReferenceExpansion:布尔值，表示是否要扩展实体引用。在HTML中没有用。 whattoShow参数是一个位掩码。

NodeFilter.SHOW_ALL:显示所有类型的的节点。 NodeFilter.SHOW_ELEMENT:显示元素节点。 NodeFilter.SHOW_TEXT:显示文本节点。等等。

可以使用按位或操作符来组合多个选型。

var whatToShow = NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT;

filter参数：可以传入一个NodeFilter对象或者一个函数。每个NodeFilter对象只有一个方法，及acceptNode()方法。如果应该访问给定的节点该方法返回NodeFilter.FILTER_ACCEPT,如果不应该访问则返回NodeFilter.FILGER_SKip。传入的函数与acceptNode()方法类似。

var filter = { acceptNode:function(node){ return node.tagName.toLowerCase() == "p"?NodeFilger.FILTER_ACCEPT:NodeFilter.FILTER_SKIP; }};var iterator = document.createNodeIterator(root,NodeFilter.SHOW_ELEMENT,filter,false);

NodeIterator对象有两个方法，nextNode()和previousNode()。第一次调用nextNode()返回根节点。

var div = document.getElementById("mydiv");var filter = function(node){ return node.tagName.toLowerCase() == "li"?NodeFilger.FILTER_ACCEPT:NodeFilter.FILTER_SKIP;};var iterator = document.createNodeIterator(root,NodeFilter.SHOW_ELEMENT,filter,false);var node = iterator.nextNode();while(node !== null){ alert(node.tagName); node = iterator.nextNode();}