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. Tomcat7.0/8.0 详细安装配置图解，以及UTF-8编码配置

    Tomcat7.0/8.0 详细安装配置图解,以及UTF-8编码配置 2017年01月24日 10:01:48 阅读数:51265 标签: tomcattomcat安装tomcat配置tomcat编码 ...

  2. jq 绑定事件和解绑事件

    <!DOCTYPE html><html><head> <script src="http://cdn.static.runoob.com/libs ...

  3. 《从Lucene到Elasticsearch：全文检索实战》学习笔记二

    今天我给大家讲讲分词算法 分词算法概述:词是语义的最小单位.分词对搜索引擎的作用很大,可以促进搜索引擎程序自动识别语句的含义,可以提高搜索结果的匹配度,分析的质量也将直接影响了搜索结果的精确度.分词存 ...

  4. 一个nginx服务器配置多站点

    有时候你想在一台服务器上为不同的域名运行不同的站点.比如www.siteA.com作为博客,www.siteB.com作为论坛.你可以把两个域名的IP都解析到你的服务器上,但是没法在Nginx的根目录 ...

  5. PythonStudy——汇编语言 Assembly Language

    汇编语言 汇编语言(assembly language)是一种用于电子计算机.微处理器.微控制器或其他可编程器件的低级语言,亦称为符号语言.在汇编语言中,用助记符(Mnemonics)代替机器指令的操 ...

  6. LOJ 3059 「HNOI2019」序列——贪心与前后缀的思路+线段树上二分

    题目:https://loj.ac/problem/3059 一段 A 选一个 B 的话, B 是这段 A 的平均值.因为 \( \sum (A_i-B)^2 = \sum A_i^2 - 2*B \ ...

  7. angular的异步处理$q的使用(promise)

    Angular中的promise: Promise是一种异步方式处理值的方法.代表了一个函数最 终可能的返回值或者抛出的异常 在之前,通常都是使用闭包或者回调来响应非同步的有意义数据 使用promis ...

  8. Java环境配置之JDK安装

    一.下载 现在JDK的版本很多.我下载的是jdk1.7 以下链接是jdk1.8的 http://www.oracle.com/technetwork/java/javase/downloads/jdk ...

  9. Azure CosmosDB (1) 概述

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

  10. Android - 简单listview

    //MainActivity.java package com.example.zc.listviewdemo; import android.support.v7.app.AppCompatActi ...