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. 初窥async，await

    首先是一道今日头条的面试题:(听说是今日头条的并且已经烂大街了) async function async1() { console.log( 'async1 start' ) await async ...

  2. alpha冲刺（6/10）

    前言 队名:旅法师 作业链接 队长博客 燃尽图 会议 会议照片 会议内容 陈晓彬(组长) 今日进展: 召开会议 撰写博客 召集大家分析了一下后续的问题 问题困扰: 工程量太大,这周考试又很多,周末我让 ...

  3. SQL-索引-012

    什么是索引?

  4. 664. Strange Printer

    class Solution { public: int dp[100][100]; int dfs(const string &s, int i,int j) { if(i>j)ret ...

  5. MySQL Error--The Table is full

    问题描述 在MySQL 错误日志中发下以下错误信息:[ERROR] /export/servers/mysql/bin/mysqld: The table '#sql-xxxx-xxx' is ful ...

  6. Linux 开机启动 php socket

    问题 php socket 服务在服务器重启后无法自动启动,需要添加开机启动脚本.有以下问题 开机延迟3分钟后,再启动socket服务 socket服务有3个模块需要按照先后顺序启动  registe ...

  7. easyUI默认图标的使用

    使用格式如下: <table id="table" class="easyui-datagrid" style="width:600px;hei ...

  8. centos 7.x开放端口

    1. 查看已打开的端口 # netstat -anp 2. 查看想开的端口是否已开 # firewall-cmd --query-port=666/tcp 若此提示 FirewallD is not ...

  9. c++11 tuple实现

    实现一个简易版的c++11 tuple. 我使用的编译器是gcc,codeblocks13.12自带的,哪个版本我不熟gcc也没去查. 大致看了下他家的tuple实现,多继承,tuple之上还有2个辅 ...

  10. 【python】如何将ipdb的python解释器路径切换至虚拟环境中

    背景: 利用virtualenv构建一个python3.5的虚拟环境,在该虚拟环境中使用ipdb调试程序,结果报错找不到某一个模块. 程序的所有依赖模块都已经成功安装在虚拟环境中. 在虚拟环境中,te ...