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. Excel——将内容导入

    1.写入Excel文件的操作引入Microsoft.Office.Tools.Excel.dll 程序集 List<Person> list = new List<Person> ...

  2. 360demo--关于WM_GETMINMAXINFO

    在duilib的demo中,看到这么一段: LRESULT OnGetMinMaxInfo(UINT uMsg, WPARAM wParam, LPARAM lParam, BOOL& bHa ...

  3. linux基础-第十一单元 系统监控

    第十一单元 系统监控 系统监视和进程控制工具-top和free top命令的功能 TOP是一个动态显示过程,即可以通过用户按键来不断刷新当前状态.如果在前台执行该命令,它将独占前台,直到用户终止该程序 ...

  4. Beta项目冲刺 --第二天

    在几kb的上传速度中苦苦挣扎的程序员... 队伍:F4 成员:031302301 毕容甲 031302302 蔡逸轩 031302430 肖阳 031302418 黄彦宁 会议内容: 1.站立式会议照 ...

  5. Flexbox 布局

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  6. SpringMVC自定义视图 Excel视图和PDF视图

    一.自定义视图-Excel视图 1.Maven依赖 引入POI <dependency> <groupId>org.apache.poi</groupId> < ...

  7. Android自定义PopupWindow显示在控件上方或者下方

    记录学习之用 View view = mInflater.inflate(R.layout.layout_popupwindow, null); PopUpwindowLayout popUpwind ...

  8. ActiveMQ(七)_伪集群和主从高可用使用

      一.本文目的         介绍如何在同一台虚拟机上搭建高可用的Activemq服务,集群数量包含3个Activemq,当Activemq可用数>=2时,整个集群可用.         本 ...

  9. 时间复杂度---我又要想起初中数学老师的脸了xxxxx

    时间复杂度: 常用的时间复杂度有:常数级,对数级,线性级 线性对数级 平方级,立方级别,多项式级别,指数级别,阶乘级别 这里我们主要探讨对数级,线性级,平方级,指数级---为什么不讨论其他的?别的我也 ...

  10. Eclipse 中 安装 SVN 插件

    方法一:使用Eclipse 安装向导安装 1.测试所指环境  Eclipse 4.5/Mars 2.svn 插件的官方网站: http://subclipse.tigris.org 3.打开eclip ...