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. JavaScript的理解记录（2）

    一.表达式与运算符: 1.对于属性访问表达式: var arr = {first:"hh","second":"gg",third:null ...

  2. ContentProvider详解

    作用:把一个App中的数据库通过Url的形式共享出来,供其他App使用. 首先在App1中创建一个数据库,用SQLiteOpenHelper public class MyOpenHelper ext ...

  3. python内置数据类型-字典和列表的排序 python BIT sort——dict and list

    python中字典按键或键值排序(我转!)   一.字典排序 在程序中使用字典进行数据信息统计时,由于字典是无序的所以打印字典时内容也是无序的.因此,为了使统计得到的结果更方便查看需要进行排序. Py ...

  4. php上传文件

    php部分: <?php /* 注释:允许用户上传文件是一个巨大的安全风险. 请仅仅允许可信的用户执行文件上传操作. */ header("Content-type: text/htm ...

  5. Day Six(Beta)

    站立式会议 站立式会议内容总结 331 今天:完成闹钟功能,远程数据库采用bmob的解决方案,应用初始化bmob 遇到问题:闹钟没有取消提醒 以及多次设置提醒的问题 明天:修改闹钟问题,完成文件下载( ...

  6. PHPStorm2016如何安装主题

    今天放出如何安装phpstorm 主题教程,教程如下: 下载主题 地址:phpstoorm-themes.com 安装主题 PhpStorm and WebStorm themes can be in ...

  7. QMenu，contextmenuevent，窗体透明

    void MainWindow::contextMenuEvent(QContextMenuEvent *event) { QMenu *menu=newQMenu; menu->addActi ...

  8. angular指令大全

    这篇文章的案例都是来自官方,引用的cdn来自bootcss, 因为angular的官方网站被屏了, 所以要翻, 不过我把整个文档下回来了,方便大家下载可以点击: 打开下载英文版 angular的指令 ...

  9. Java反序列化测试

    前言:有没有想过,如何将对象进行“加密”后写入磁盘?序列化帮你实现! 1.概念 序列化 (Serialization)将对象的状态信息转换为可以存储或传输的形式的过程.在序列化期间,对象将其当前状态写 ...

  10. Sublime Text快捷键和常用插件推荐

    Sublime Text快捷键: Ctrl+Shift+P:打开命令面板 Ctrl+P:搜索项目中的文件 Ctrl+G:跳转到第几行 Ctrl+W:关闭当前打开文件 Ctrl+Shift+W:关闭所有 ...