1、选择符API，selectors API

可以使用CSS选择符匹配查找节点

　　1)  querySelector(selector)，接受一个CSS选择符，返回调用该函数的节点后代中第一个匹配的元素节点，没有匹配，返回null；

2)  querySelectorAll(selector)，接受一个CSS选择符，返回调用该函数的节点后代中所有匹配的元素节点集合（NodeList），没有匹配，返回空的NodeList；

这两个方法可以通过Document 和 Element 类型的实例调用。

浏览器支持： IE8+ 、Firefox 3.5+ 、Safari 3.1+、Chrome、Opera 10+；

2、元素遍历

Element Traversal API 为 DOM，可以更方便地访问DOM元素

1）childElementCount ：返回子元素节点（不包括文本节点和注释节点）的个数；

2）firstElementChild : 第一个子元素节点

3）lastElementChild : 最后一个子元素节点

4）previousElementSibling ：前一个同胞元素

5）nextElementSibling ：后一个同胞元素

浏览器支持：IE9+、FireFox 3.5+、 Safari 4+、Chrome、 Opera 10+。

3、 HTML5 扩展

1）getElementsByClassName(class) ，

参数是包含一个或多个类名的字符串，传入多个类名时，顺序没关系。可以通过 document 对象和所有的HTML元素调用该方法，返回在其后代中匹配的元素集合（NodeList）。

浏览器支持：IE9+、FireFox 3+、 Safari 3.1+、Chrome、 Opera 9.5+。

2）元素节点的 classList 属性，值是一个DOMTokenList 实例对象。

元素节点本来有一个 className 属性，其值是一个字符串，操作不便。多个类名，需要拆分字符串: ele.className.split(/\s+/)

DOMTokenList 属性和方法：

DOMTokenList.length 包含个数
DOMTokenList.item(index) 返回特定项
DOMTokenList[index] 返回特定项
DOMTokenList.add(str) 将str添加到集合中，已存在，则不添加
DOMTokenList.contains(str) 是否包含指定str, true、false
DOMTokenList.remove(str) 删除指定项
DOMTokenList.toggle(str) 集合存在就删除，不存在就添加

浏览器支持：IE10+、FireFox 3.6+、Chrome。

3）document.activeElement， DOM中当前获得焦点的元素，文档加载期间为null，刚加载完成时是document.body 。浏览器支持：IE4+、FireFox 3+、 Safari 4+、Chrome、 Opera 8+。

4）document.hasFocus() ,确定文档是否获得了焦点（只要文档中的元素获得焦点，true），可用于用户是不是在与页面交互。浏览器支持：IE4+、FireFox 3+、 Safari 4+、Chrome、 Opera 8+。

5）document.readyState ，文档加载状态， 值：“loading” （正在加载文档），“complete” （加载完成）。浏览器支持：IE4+、FireFox 3.6+、 Safari 、Chrome、 Opera 9+。

6）document.compatMode，页面渲染模式， 值：“CSS1Compat” （标准模式），“BackCompat” （混杂模式）。浏览器支持：IE6+、FireFox 、 Safari 3.1、Chrome、 Opera 。

7）document.head 属性，引用文档中的<head>元素。 浏览器支持：IE9+、FireFox 、 Safari 5、Chrome、 Opera 。

8）document.charset ，获取、设置文档实际使用的字符集。 //IE、Chrome、Firefox、Safari、Opera

9）document.defaultCharset，默认字符集，// IE、Safari

10）document.characterSet，字符集   // IE9+、Chrome、Firefox

11）元素节点的 dataset 属性，HTML5中，可以获取 在元素上自定义的的属性（以“data-”前缀）

类似   ele.getAttribute("attr")，

 <div id="test" name="test" title="" class="a b c" data-id="8" data-name="somename" account= "account" ></div>

var div = document.getElementById("test");

var dataId = div.dataset.id;  //

var dataName =  div.dataset.name; // somename

浏览器支持：IE11、FireFox 6+、 Safari 、Chrome、 Opera 。

12）是元素节点的 innerHTML 属性

读模式：返回该元素所有的子节点（包括元素节点、注释节点、文本节点）的HTML，各个浏览器返回的值可能不一样，IE8-会将标签转换为大写形式

写模式：根据HTML字符串创建新的DOM树，并替换元素的原来的所有子节点。（系统会创建和销毁HTML解析器，会有资源消耗）

大多数浏览器都支持 innerHTML 属性，但对部分元素并不是完全支持innerHTML属性： <col>、<colgroup>、<frameset>、<head>、<html>、<style>、<table>、<tbody>、<thead>、<tfoot>、<tr>

在IE9-，只支持这些的读模式，写模式不支持（其他浏览器的早期版本可能也不支持）。在IE8-中<title>元素是没有innerHTML属性的。

innerHTML插入的<script>元素大多数浏览器（IE8- 可以）并不会执行其中的脚本，通过创建节点createElement("script")，appendChild()后可以立即执行。

innerHTML能够插入<style>和<link>元素，并能立即执行有效

testDiv.innerHTML = "_<style type='text/css'> body{background-color: yellowgreen}<\/style>";  // IE8- 需要在<style> <link>元素前添加一个有作用域元素，例如"_"

testDiv.innerHTML = '3<link rel="stylesheet" href="css/test.css">';  // 添加了数字3 作为作用域元素

testDiv.removeChild(testDiv.firstChild); //为了不影响页面布局，删除文本节点（下划线，“_”）

13）outerHTML，

读模式：返回该元素自身及其子节点的HTML标签代码，各个浏览器返回的值可能不一样，IE8-会将标签转换为大写形式

写模式：根据HTML字符串创建新的DOM树，并替换元素的该元素节点本身。（系统会创建和销毁HTML解析器，会有资源消耗）

浏览器支持：IE4+、FireFox 8+、 Safari 4+、Chrome、 Opera 8+。

14）insertAdjacentHTML(model,htmlString)，插入同胞元素，或子元素

model有四个可选值：

“beforebegin”：在当前元素之前插入同胞元素

“afterbegin”：在当前元素之下的第一个子元素之前插入

”beforeend“：在当前元素之下的最后一个子元素之后插入

“afterend”：在当前元素之后插入同胞元素

var testDiv = document.getElementById("test");

testDiv.insertAdjacentHTML("beforebegin","<p>Hello world</p>");

testDiv.insertAdjacentHTML("afterbegin","<p>Hello world</p>");

testDiv.insertAdjacentHTML("afterend","<p>Hello world</p>");

testDiv.insertAdjacentHTML("afterbegin","<p>Hello world1</p>");

testDiv.insertAdjacentHTML("beforeend",'<table border="1" cellpadding="0" cellspacing="0" id="table">\n' +

    '        <tr>\n' +

    '            <td>dsdfsfd</td>\n' +

    '            <td>dsfdsdf</td>\n' +

    '            <td>dsfsf</td>\n' +

    '        </tr>\n' +

    '\n' +

    '    </table>');

浏览器支持：IE、FireFox 8+、 Safari 、Chrome、 Opera 。

15）scrollIntoView()，所有的HTML元素都可以调用，使元素出现在视口中。

传入true或者不传参数：元素顶部和视口顶部尽肯能齐平

false：元素底部和视口底部尽可能齐平

让元素获取焦点也会导致页面滚动，并显示出元素

浏览器支持：IE、FireFox 、 Safari 、Opera，Chrome不支持 。

16）children属性，返回某个元素节点的所有子元素节点（IE8- 也包括注释节点，nodeType是8），HTMLCollection集合

var childCount = ele.children.length;

var firstChild = ele.children[0];

浏览器支持：IE、FireFox 、 Safari 、Opera 、Chrome。

17）contains()，判断节点的后代中是不是有某个节点

document.documentElement.contains(document.body);   // true, body元素是html元素的后代节点

浏览器支持：IE、FireFox 9+ 、 Safari 、Opera 、Chrome。

18）innerText 属性

读模式：由浅入深的顺序将文档数中的所有文本拼接起来返回

写模式：会删除所有子节点，插入包含文本的文本节点

浏览器支持：IE4+、 Safari 3+、Opera 8+、Chrome，Firefox（高版本）。

还有一个类似的属性 textContent，与innerText 功能一样，支持的浏览器：IE9+、Safari 3+、Opera 10+、Chrome、Firefox

function getInnerText(element){

    return (typeof element.innerText == "string") ? element.innerText : element.textContent;

}

function setInnerText(element,text){

    if(typeof element.innerText == "string"){

        element.innerText = text;

    }else{

        element.textContent = text;

    }

}

19）outerText 属性，将作用范围扩大到包含调用他的节点

读模式：由浅入深的顺序将文档数中的所有文本拼接起来返回，与 innerText 结果一样

写模式：用新文本节点替换整个元素，即整个元素就在文档中删除了

浏览器支持：IE4+、 Safari 3+、Opera 8+、Chrome，Firefox不支持。

DOM 扩展的更多相关文章

  1. DOM扩展-Selectors API(选择符 API)、元素遍历

    DOM扩展 对DOM的两个主要扩展是SelectorsAPI(选择符API)和HTML5 SelectorsAPI(选择符API)是由W3C发起制定的一个标准,致力于浏览器原生支持CSS查询,Sele ...

  2. HTML5部分新标签属性及DOM扩展元素

    HTML5定义了一系列新元素,如新语义标签.智能表单.多媒体标签等. 我们日常讨论的H5其实是一个泛称,它指的是由HTML5 + CSS3 + Javascript等技术组合而成的一个应用开发平台. ...

  3. dom扩展

    第十一章 DOM扩展 一.选择符API 1.querySelector()方法             接收一个CSS选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回null. 2. ...

  4. DOM扩展札记

    Selector API HTML5 DOM扩展 Element Traversal规范 Selector API 众多JavaScript库中,最常用的一个功能就是根据css选择符选择与某个模式匹配 ...

  5. 11. javacript高级程序设计-DOM扩展

    1. DOM扩展 1.1 选择符API l querySelector() 接收一个css选择符,返回与该模式匹配的第一个元素 l querySelectorAll() 接收一个css选择符,返回所有 ...

  6. js-DOM，DOM扩展

    DOM: 1. 了解节点的信息:nodeName(属性的标签名),nodeValue两个属性 在取得信息之前要进行判断是不是节点,节点类型由12个数值常量进行表示 2.每个节点都有一个childNod ...

  7. 《JAVASCRIPT高级程序设计》DOM扩展

    虽然DOM为XML及HTML文档交互制定了一系列的API,但仍然有几个规范对标准的DOM进行了扩展.这些扩展中,有很多是浏览器专有的,但后来成了事实标准,于是其他浏览器也提供了相同的实现:浏览器开发商 ...

  8. JavaScript基础笔记（八）DOM扩展

    DOM扩展 一.选择符API Selectors API是由W3C发起制定的一个标准,致力于让浏览器原生支持CSS查询. 一)querySelector() 在Document和Element类型实例 ...

  9. DOM扩展：DOM API的进一步增强[总结篇-上]

    DOM1级主要定义了文档的底层结构,并提供了基本的查询操作的API,总体而言这些API已经比较完善,我们可以通过这些API完成大部分的DOM操作.然而,为了扩展DOM API的功能,同时进一步提高DO ...

  10. js学习笔记----JavaScript中DOM扩展的那些事

    什么都不说,先上总结的图~   Selectors API(选择符API) querySelector()方法 接收一个css选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回null ...

随机推荐

  1. Python语法教程总结规范

    Python语法易错点记录 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar -- 心分享. ...

  2. css自定义checkbox和radio样式

    很常见的问题,也有许多人写过类似的文章,自己写来记录下 css代码如下: #myCheck + label,.myRadio + label{ width:16px; height:16px; bor ...

  3. robot framework中的timeout的关键词

    1.默认robotframework中的含有等待的关键词(如:Wait Until Element Is Enabled),未手动设置时默认该参数为5sec 2.关键词:sleep A)一般在调试的时 ...

  4. MySQL Execution Plan--IN查询计划

    对于IN查询,MySQL会根据当前表数据结构(索引)和数据分布(统计信息和预估)生成多种执行计划,并根据执行成本挑选出“最优执行计划”. 假设有查询 SELECT * FROM student ,,, ...

  5. 使用fpm 方便快速生成postgresql extension分发包

    fpm 是一个不错,而且强大的rpm.deb,系统启动服务工具包,我们可以用来快速的生成专业的软件分发包 演示一个pg 扩展包分发包的生成(rpm 以及deb) 安装fpm sudo gem inst ...

  6. 虚拟机安装及Oracle安装

    1.安装虚拟机(没难度,傻瓜装机) 新建虚拟机 自定义------下一步------- 稍后安装操作系统------下一步 下一步 下一步至完成 然后启动,就可以启动一个系统咯!!! 可以查一下虚拟机 ...

  7. ionic3使用cordova创建自定义插件

    1 安装 plugman 插件 npm --registry https://registry.npm.taobao.org install -g plugman 2 新建组件 新建一个插件文件夹,进 ...

  8. EasyMock 模拟对象测试

    一.EasyMock 使用动态代理实现模拟对象创建,一般可以满足以下测试需求 1.要测试的模块依赖于其它自己控制不了的模块,如第三方服务,其它组员在开发的服务等,它们都没办法配合你来测试: 2.涉及到 ...

  9. weakSelf 和 strongSelf的区别和用处

    block会copy要在block中使用的实变量,而copy会是变量的retainCount + 1,如若在不注意很容易造成循环引用.而所谓的循环引用的本质就是,两个对象相互引用,从而造成对象不能正常 ...

  10. .NET自动化测试工具链：Selenium+NUnit+ExtentReport

    Selenium可以执行UI的交互,ExtentReport用来生成测试报告,NUnit是我熟悉的基础测试框架,当然你也可以用MSTest.Xunit来代替.Selenium.NUnit没啥好讲的,网 ...