您的位置：首页 > Web前端 > JavaScript

JavaScript基础——DOM扩展

2015-11-30 16:29 246 查看
虽然DOM为与XML及HTML文档交互指定了一系列核心API，但仍然有几个规范对标准的DOM进行了扩展。

这些扩展中有很多原来是浏览器专有的，但后来成了事实标准，于是其他浏览器也都提供了相同的实现。

其中比较常用的三个规范如下：

1）Selectors API,定义了两个方法，让开发人员能够基于CSS选择符从DOM中取得元素，

这两个方法是querySelector()和querySelectorAll().

2）Element Traversal,为DOM元素定义了额外的属性，让开发人员能够更方便地从一个元素跳到另一个元素。

之所以会出现这个扩展，是因为浏览器处理DOM元素间空白符的方式不一样。

3）HTML5，为标准的DOM定义了很多扩展功能。其中包括在innerHTML属性这样的事实标准基础上提供的标准定义，

以及为管理焦点、设置字符集、滚动页面规定的扩展API。

虽然目前DOM扩展的数量还不多，但随着Web技术的发展，相信一定还会涌现出更多扩展来。

很多浏览器都在试验专有的扩展，而这些扩展一旦获得认可，就能成为“伪”标准，

甚至会被收录到规范的更新版本中。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM扩展</title>
</head>
<body class="page1">
<div id="myDiv" data-appId="12345" data-myname="Jason">
<em>第一</em>
<em>第二</em>
<em>第三</em>
<div class="selected"></div>
</div>
<img class="button"/>
<p>
<strong>querySelectorAll()方法</strong>接收的参数与<strong>querySelector()方法</strong>一样，都是一个CSS选择符，
但返回的是所有匹配的元素而不仅仅是一个元素。这个方法返回的是一个<strong>NodeList的实例。</strong>
</p>
<div class="username"></div>
<div class="current"></div>
<div class="current2"></div>
<div class="user bd disabled"></div>
<button id="myButton"></button>
<ul class="ul"></ul>
<form>
<label>姓名：</label><input type="text"/>
</form>
<script src="l11.js"></script>
</body>
</html>


/*
* DOM扩展
*/
function cl(x){
console.log(x);
}
/**
* 11.1 选择符API
*/
//11.1.1 querySelector()方法
//取得body元素
var body=document.querySelector("body");
//取得id为"myDiv"的元素
var myDiv=document.querySelector("#myDiv");
//取得类为"selected"的第一个元素
var selected=document.querySelector(".selected");
//取得类为"button"的第一个图像元素
var img=document.body.querySelector("img.button");

//11.1.2 querySelectorAll()方法
var ems=document.getElementById("myDiv").querySelectorAll("em");
var selecteds=document.querySelector(".selected");
var strongs=document.querySelectorAll("p strong");
//取得返回的NodeList中的每一个元素，可以使用item()方法，也可以使用[]
var i,len,strong;
for(i=0,len=strongs.length;i<len;i++){
strong=strongs[i]; //或者strongs.item(i)
strong.className="important";
}

//11.1.3 matchesSelector()方法(有浏览器兼容性问题)
function matchesSelector(element,selector){
if(element.matchesSelector){
return element.matchesSelector(selector);
}else if(element.msMatchesSelector){
return element.msMatchesSelector(selector);
}else if(element.mozMatchesSelector){
return element.mozMatchesSelector(selector);
}else if(element.webkitMatchesSelector){
return element.webkitMatchesSelector(selector);
}else{
throw  new Error("不支持");
}
}
if(matchesSelector(document.body,"body.page1")){
cl("有page1这个类");
}

/**
* 11.2 元素遍历
*/
//Element Traversal规范为DOM元素添加了以下5个元素：(IE9+)
//childElementCount:返回子元素(不包括文本节点和注释)的个数。
//firstElementChild：指向第一个子元素
//lastElementChild：指向最后一个子元素
//previousElementSibling：指向前一个同辈元素
//nextElementSibling：指向后一个同辈元素
//遍历子元素
var element=document.querySelector("#myDiv");
var i,len,child=element.firstElementChild;
while(child!=element.lastElementChild){
child=child.nextElementSibling;
}

/**
* 11.3 HTML5
*/
//11.3.1 与类相关的扩充
//11.3.1.1 getElementsByClassName()方法：返回带有指定类的所有元素的NodeList (IE9+)
var allCurrentUserNames=document.getElementsByClassName("username current");
var selected=document.getElementById("myDiv").getElementsByClassName("selected");
//11.3.1.2 classList属性:add(value)、contains(value)、remove(value)、toggle(value)。(Firefox3.6+和chrome)
var div=document.querySelector(".bd");
div.classList.remove("user");
div.classList.add("current");
div.classList.toggle("user");
if(div.classList.contains("bd")){
cl("包含这个类");
}

//11.3.2 焦点管理
//document.activeElement属性、document.hasFocus()方法
var button=document.getElementById("myButton");
button.focus();
cl(document.activeElement===button);
cl(document.hasFocus());

//11.3.3 HTMLDocument的变化
//11.3.3.1 readyState属性：两个值(loading和complete)
//11.3.3.2 兼容模式 document.compatMode属性：两个值(CSS1Compat和BackCompat)
if(document.compatMode=="CSS1Compat"){
cl("标准模式");
}else{
cl("混杂模式");
}
//11.3.3.3 head属性
if(document.head){
cl("存在head属性");
}

//11.3.4 字符集属性 charset属性和defaultCharset属性
cl(document.charset);
document.charset="UTF-8";
if(document.charset!=document.defaultCharset){
cl("属性不是默认属性");
}

//11.3.5 自定义数据属性
var div=document.getElementById("myDiv");
var appId=div.dataset.appId;
var myName=div.dataset.myname;
div.dataset.appId=23456;
div.dataset.myname="Jenny";
if(div.dataset.myname){
cl("Hello, "+div.dataset.myname);
}

//11.3.6 插入标记
//11.3.6.1 innerHTML属性
var current=document.querySelector(".current");
current.innerHTML="Hello & welcome,<b>\"reader\"!</b>";
//11.3.6.2 outerHTML属性
var current2=document.querySelector(".current2");
current2.outerHTML="<p>换成了一个段落</p>";
//11.3.6.3 insertAdjacentHTML()方法
//接收两个参数：插入位置和要插入的HTML文本。第一个参数必须是下列值之一：
//beforebegin、afterbegin、beforeend、afterend
var element=document.querySelector("#myDiv");
//作为前一个同辈元素插入
element.insertAdjacentHTML("beforebegin","<p>Hello world!</p>");
//作为第一个子元素插入
element.insertAdjacentHTML("afterbegin","<p>Hello world2!</p>");
//作为最后一个子元素插入
element.insertAdjacentHTML("beforeend","<p>Hello world3!</p>");
//作为后一个同辈元素插入
element.insertAdjacentHTML("afterend","<p>Hello world4!</p>");
//11.3.6.4 内存与性能问题
//将设置innerHTML或outerHTML的次数控制在合理的范围内
var itemsHtml="";
var values=['项目1','项目2','项目3'];
for(var i= 0,len=values.length;i<len;i++){
itemsHtml+="<li>"+values[i]+"</li>";
}
var ul=document.querySelector(".ul");
ul.innerHTML=itemsHtml;

//11.3.7 scrollIntoView()方法
//让元素始终可见
document.forms[0].scrollIntoView();

//11.4 专有扩展
//11.4.1 文档模式(IE8+)
//11.4.2 children属性
//11.4.3 contains()方法
//11.4.4 插入文本：innerText属性和outerText属性 (Firefox不支持)
//11.4.5 滚动 以下方法只有Safari和Chrome实现了
// scrollIntoViewIfNeeded(alignCenter)、scrollByLines(lineCount)、scrollByPages(pageCount)
//将页面主体滚动5行
//document.body.scrollByLines(5);
//当前元素不可见时，让它进入浏览器窗口
//document.images[0].scrollIntoViewIfNeeded();
//将页面主体往回滚动一页
//document.body.scrollByPages(-1);
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航