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. 献给那些每次调试时都要启动很多WEB项目的苦逼程序猿

    当一个解决方案包含多个WEB项目的时候,只要按F5调试,其它用不着的WEB项目也会自动添加到托盘里.很多新手都不知道如何解决这个问题,我也是刚知道. 在网上找了很多资料看到有2种解决方法: 1.把WE ...

  2. ssh全屏退出的办法

    在使用ssh的时候遇到,不知道碰到哪里了,突然xshell就全屏了 解决方法 按下键盘 Alt+Enter就好了

  3. [转]领域驱动设计系列文章（2）——浅析VO、DTO、DO、PO的概念、区别和用处

    原文地址:http://www.blogjava.net/johnnylzb/archive/2010/05/27/321968.html 上一篇文章作为一个引子,说明了领域驱动设计的优势,从本篇文章 ...

  4. Git error on commit after merge - fatal: cannot do a partial commit during a merge

    Git error on commit after merge - fatal: cannot do a partial commit during a merge this answer is : ...

  5. Linux_RPM_查询

    一.查询是否安装 rpm  -q 包名 选项:     -q  查询(query) 查询所有已安装的RPM包 rpm -qa      -a  所有(all) 二.插叙软件包的详细信息 rpm -qi ...

  6. eclipse安装ADT

    ADT安卓开发工具安装 ADT(Android Development Tools)安卓开发工具,是安卓在Eclipse IDE环境中的开发工具,为Android开发提供开发工具的升级或者变更,简单理 ...

  7. 系统间通信（8）——通信管理与RMI 上篇

    1.概述 在概述了数据描述格式的基本知识.IO通信模型的基本知识后.我们终于可以进入这个系列博文的重点:系统间通信管理.在这个章节我将通过对RMI的详细介绍,引出一个重要的系统间通信的管理规范RPC, ...

  8. OneThink学习笔记02----数据字典（即OneThink项目数据库里的表及其字段）

    action 字段 类型 注释 id int(11) unsigned 自增主键 name char(30) 行为唯一标识 title char(80) 行为说明 remark char(140) 行 ...

  9. [51nod1685]第k大区间

    Description 定义一个长度为奇数的区间的值为其所包含的的元素的中位数. 现给出$n$个数,求将所有长度为奇数的区间的值排序后,第$k$大的值为多少. Input 第一行两个数$n$和$k$. ...

  10. 【BZOJ-3252】攻略 DFS序 + 线段树 + 贪心

    3252: 攻略 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 339  Solved: 130[Submit][Status][Discuss] D ...