js011-DOM扩展

本章内容

理解Selecters API

使用HTML5 DOM扩展

了解转悠的DOM扩展

11.1选择符API

JS中最常用的一项功能，就是根据css选择符选择与某个模式匹配的DOM元素。

11.1.1 querySlector()方法

该方法接收一个css选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回null

取得body元素

var body = document.querySlector("body");

取得id为myDiv的元素

var myDiv = document.querySlector("#myDiv");

取得类为slected的元素

var slected = document.querySlector(".slected");

取得类为button的第一个图像元素

var button = document.querySlector("img.button");

11.1.2 querySlectorAll()方法

接收的参数和querySlector()一样，但是返回的不仅不仅是一个元素，而是一个NodeList的实例。

与

querySlector()一样能够调用querySlectorAll()方法的有document，element，DocumentFragment。例子如上面例子类似。

11.1.3 matchSlector()方法

该方法能接收一个参数：css操作符，如果调用元素与该选择符匹配，则返回true，否则返回false

11.2 元素遍历

Element Travesal规范新定义了一组属性。

Element Travesal API为DOM 元素新定义了一下5个属性：

childElementCount

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

firstElementChild

指向第一个子元素；firstchild的元素版

lastElementChild

指向最后一个子元素；lastchild的元素版

preciousElementSibling

指向前一个同辈元素preciousSibling的元素版

nextElementSibling

指向后一个同辈元素nextSibling的元素版

利用这些属性就不必担心空白文本节点，从而可以方便的查找DOM元素了、。

11.3 HTML5

11.3.1与类相关的扩充

1、getElementBYClassName()方法：接收一个参数：一个包含一个或多个类名的字符串，返回带有指定类的元素的NodeList，传入多个类是，类名的先后顺序不重要

2、classList属性

在操作类名时，需通过className属性添加、删除和替换类名，所以className是一个字符串，所以即使值修改字符串一部分，也必须每次都是指整个字符串的值。

 

11.3.2焦点管理

11.3.3 HTMLDocument的变化

1、readyState属性

两个可能值：

loading：正在加载文档；

complete：已经加载完文档。

2、兼容模式

3、head属性

作为对document.body引用过得文档<body>元素的不重，HTML5新增了document.head属性，引用文档的<head>元素

11.3.4字符集属性

charset属性

11.3.5自定义数据属性

添加非标准属性，前面添加前缀data-

11.3.6插入标记

1、inherHTML 属性

在读模式下，inherHTML属性返回与调用原色的所有子节点对应的HTML标记，在写模式下，inherHTML会根据指定的值，创建新的DOM树，然后用这个DOM树完全替换调用元素原先的所有子节点。

2、outerHTML属性

在读模式下，outerHTML属性返回与调用原色的所有子节点对应的HTML标签，在写模式下，inherHTML会根据指定的值，创建新的DOM树，然后用这个DOM树完全替换调用元素。

3、insertAdjacentHTML()方法

该方法接收两个参数：插入位置和要插入的HTML文本，第一个参数必须是以下值之一：

beforebegin

在当前元素之前插入一个紧邻的同辈元素；

afterbegin

在当前元素之下插入一个新的子元素或在第一个元素之前再插入一个新的子元素；

beforeend

在当前元素之下插入一个新的子元素或在最后一个元素之前再插入一个新的子元素；

afterend

在当前元素之后插入一个紧邻的同辈元素；

4、内存与性能问题

11.3.6 scrollIntoView()方法

页面滚动

11.4 专有扩展

11.4.1文档模式

11.4.2 children属性

11.4.3 contains()方法

11.4.4插入文本

1、innerText属性，可以操作元素中包含的所有文本内容，包括子文档树种的文本。

2、outerText属性

作用范围扩大到调用它的节点。其余的和innerText属性相似

11.4.5滚动

 

 

 

好冻。手已经冻的没办法正常打字了。。。

声明：该博客由http://www.cnblogs.com/lal-fighting/原创发表，未经作者允许，不得私自转载抄袭！！！

js011-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. android开发------第一个android程序

    好吧,现在我们就一起来写第一个android程序,看它带给了我们什么.sdk的使用和虚拟机的创建我就不说了.项目创建过程先略过,不太重要. 那第一个程序我们能学到什么知识呢?一起看吧.^-^ 在IDE ...

  2. Maven的内置变量

    Maven内置变量说明: ${basedir} 项目根目录(即pom.xml文件所在目录) ${project.build.directory} 构建目录,缺省为target目录 ${project. ...

  3. iOS常用---NSArray，NSMutabuleArray

    //    创建一个普通的数组,数组中可存储 id(任意)类型 NSArray *array =[[NSArray alloc]initWithObjects:",@"c" ...

  4. SwipeRefreshLayout 首次打开出现加载图标

    最近要实现如何如图效果: 主要是在初始化,代码如下: , getResources().getDimensionPixelSize(typed_value.resourceId));    refre ...

  5. oracle-day1

    今天的学习内容是oracle产品的三种安装方式,还有使用dbca静默建库 oracle产品的三种安装方式分别为: 1.图形化(Java向导)安装引导 2.使用应答文件静默安装 3.直接将装好的orac ...

  6. jsp内置对象作业1-用户登录

    题目:编写一个jsp程序,实现用户登录,当用户输入的用户名或密码错误时,将页面重定向到错误提示也,并在该页面显示30秒后,自动返回到用户登录页面. 1.用户登录页面 <%@ page langu ...

  7. caffe使用

    训练时, solver.prototxt中使用的是train_val.prototxt ./build/tools/caffe/train -solver ./models/bvlc_referenc ...

  8. 【ASP.NET Identity系列教程（一）】ASP.NET Identity入门

    注:本文是[ASP.NET Identity系列教程]的第一篇.本系列教程详细.完整.深入地介绍了微软的ASP.NET Identity技术,描述了如何运用ASP.NET Identity实现应用程序 ...

  9. ES6新特性：Javascript中的Reflect对象

    Reflect介绍: Reflect这个对象在我的node(v4.4.3)中还没有实现, babel(6.7.7)也没有实现 ,新版本的chrome是支持的, ff比较早就支持Proxy和Reflec ...

  10. GisUtil工具类：将WKT(wellKnownText)文本转换为ElasticSearch识别的空间对象字符串形式

    ElasticSearch中的Geo Shape Type: https://www.elastic.co/guide/en/elasticsearch/reference/1.4/mapping-g ...