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. es6学习日记3

    函数的扩展 ES6 之前,不能直接为函数的参数指定默认值,只能采用变通的方法. function log(x, y) { y = y || 'World'; console.log(x, y); } ...

  2. linux基础之系统管理类命令

    系统管理类命令 1.reboot.halt.poweroff命令 基本介绍 reboot命令.halt命令.poweroff命令:都表示重启或者关闭系统 基本语法 reboot/halt/powero ...

  3. Zuul 跨域

    JS访问会出现跨域问题的解决, 一.对单个接口,处理跨域,只需要在被调用的类或或方法增加注解 CoossOrigin 如下设置 allowCredenticals=true,表示运行Cookie跨域 ...

  4. Hadoop与MPP是什么关系?有什么区别和联系?

    HADOOP与MPP是什么关系?有什么区别和联系? 适用范围.应用领域分别是什么? 其实MPP架构的关系型数据库与Hadoop的理论基础是极其相似的,都是将运算分布到节点中独立运算后进行结果合并.个人 ...

  5. Spring+SpringMVC+Mybatis+Maven+CXF+WebService整合之服务端

    WebService服务端项目结构: <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="h ...

  6. c语言fork 多进程

    fork函数的作用 一个进程,包括代码.数据和分配给进程的资源.fork()函数通过系统调用创建一个与原来进程几乎完全相同的进程,也就是两个进程可以做完全相同的事,但如果初始参数或者传入的变量不同,两 ...

  7. Azure CosmosDB (1) 概述

    <Windows Azure Platform 系列文章目录> Azure CosmosDB是一个全球分布式数据库服务(Global Distributed Database),提供低延迟 ...

  8. windows server 2008 r2 x64 enterprise service pack1中aspjpeg.dll安装

    官网地址:http://persits.com/ 64位:http://www.persits.com/aspjpeg64.exe sn:lptn9dQO1enAePAXB2wFaCZawYWzfm0 ...

  9. CentOS7和CentOS6怎样开启MySQL远程访问

    CentOS6开启MySQL远程访问 1.开放MySQL访问端口3306 修改防火墙配置文件 vi /etc/sysconfig/iptables  加入端口配置      -A INPUT -m s ...

  10. 常用命令npm，gulp, node

    npm常用命令: 检查npm模块的安装情况:(以常用模块 grunt为例说明) 1) 检查是否全局安装了模块Grunt: $npm list -g grunt 2) 列出所有已经全局安装的模块:$np ...