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. jq实时监测输入框内容改变

    $(document) .on('input propertychange','#telInput',function (e) { if (e.type === "input" | ...

  2. activiti学习第一天

    公司项目组在考虑工作流,首选了activiti,首先我们要明确为什么要使用activiti,有什么好处. 在工作中有些项目会用到工作流,如果简单的项目,我们就无需使用类似activiti.jbpm等工 ...

  3. robot framework程序运行过程中，遇到点击事件之后，未出现点击之后的效果（求解）

    1.click Element操作,在实际过程中偶然会出现,日志显示已点击成功,但是实际自动化页面,没有点击成功之后的操作 现象: 现象描述:程序执行到点击侧边栏的[人员信息]之后,日志显示已经点击成 ...

  4. python第三方模块的导入

    模块搜索路径 当我们尝试加载一个模块时,Python会在指定的路径下搜索对应的.py文件,如果找不到,就会报错: >>> import module1 Traceback (most ...

  5. Devexpress Winform MVVM

    归纳总结备忘 Devexpress Winform MVVM Practice 前言 MVVM Devexpress 正文 databindings及 UI Triggers Command 委托Co ...

  6. Property referenced in indexed property path is neither an array nor a List nor a Map

    记一次传参请求报错,没有解决 Invalid property 'distributeCars[0][ackStatus]' of bean class [com.api6.plate.prototy ...

  7. JavaScript图形库

    做前端少不了画图,html5 的 canva 很强大,可是如果所有需求都自己画图,恐怕会被 leader 炒掉.记录一下我用过的几个 2D 和 3D 的js图形库,各种功能.我就不分 2D 和 3D ...

  8. Hash 1.04 右键

    http://keir.net/hash.html Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\*\shell\Hash 1.04\ ...

  9. linux上静态库和动态库的编译和使用（附外部符号错误浅谈）

    主要参考博客gcc创建和使用静态库和动态库 对于熟悉windows的同学,linux上的静态库.a相当于win的.lib,动态库.so相当于win的.dll． 首先简要地解释下这两种函数库的区别,参考 ...

  10. Flask--（登录注册）抽取视图函数

    视图函数抽取: 在info目录下准备视图业务模块包:modules 在modules中添加首页模块包index 在index包的__init__中导入蓝图 在index的__init__创建蓝图 在i ...