读书笔记 - js高级程序设计 - 第十一章 DOM扩展
对DOM的两个主要的扩展
|
Selectors API
HTML5
Element Traversal 元素遍历规范
|
querySelector
|
var body = document.querySelector("body");
var myDiv = document.querySelector("#myDiv"); 取得id为myDiv的元素
var selected = document.querySelector(".selected") 取得类名为 selected 的第一个元素
var img = document.body.querySelector("img.button") 取得类名为button的第一个img元素
|
querySelectorAll
|
和上面方法一样,只是能获得所有的元素,返回值是一个NodeList的实例
|
取得p元素中的所有strong元素
|
document.querySelectorAll("p strong") ;
|
matchesSelector
|
document.documentElement.matchesSelector("body.page1");
|
Element Traversal
|
1 childElementCount
2 firstElementChild
3 lastElementChild
4 previousElementSibling
5 nextElementSibling
|
HTML5
|
1 getElementByClassName() 可能通过document和所有HTML元素调用这个方法,因为返回的是NodeList,所以和getElementByTagName()和NodeList的其它DOM方法 都具有同样的性能问题
2 classList
因为className是一个字符串,所以即使只修改字符串一部分,也必须每次都设置整个字符串的值
所有有了以下方法
div.classList.add()
div.classList.remove()
div.classList.toggle()
|
焦点管理
|
|
找DOM中获得焦点的元素
|
document.activeElement
|
元素获得焦点的方法有3种
|
页面加载
用户输入
在代码中调用focus()方法
|
判断文档中是否有焦点
|
document.hasFocus()
|
HTMLDocument的变化
|
1 readyState 有两个值 loading 和 complete 要借助onload方法
2 兼容模式 document.compatMode == "CSS1Compat" 而在混杂模式下 docuement.compatMode == "BackCompat";
3 head 属性
var head = document.head || document.getElementByTagName("head")[0] ;
|
字符集属性
|
document.charset = "UTF-8" ;
|
自定义数据属性
|
要以 data-开头 比如
<div id="myDiv" data-appId="123" data-myname="jeff" ></div>
取得自定义属性
var appId = div.dataset.appId ;
设置值
div.dataset.appId = "4" ;
|
innerHTML
|
返回调用它的元素的子节点标签
|
outerHTML
|
outerHTML 返回调用它的元素及所有子节点的HTML标签
|
inserAdjacentHTML方法
|
element.insertAdjacentHTML("beforebegin", <p>);
beforebegin
afterbegin
beforeend
afterend
|
内存和性能问题
|
innerHTML 比多次操作DOM强
但innterHTML也不要操作太多次
|
scrollIntoView
|
可在所有HTML元素上调用,通过滚动浏览器窗口或某个容器元素 调用元素就可以出现在视口中
如果传 true, 或者不传参,那么窗口滚动之后 会让调用元素的顶部与视口顶部尽可能平齐
如果传 false 调用元素会尽可能全部出现在视口中,不过项部不一定平齐
别的方法: 为某个元素设置焦点,也会导致浏览器滚动 并显示出获得焦点的元素
|
children属性
|
|
contains方法
|
|
滚动 |
scrollIntoViewIfNeeded
scrollByLines
scrollByPages
|
|
|
读书笔记 - js高级程序设计 - 第十一章 DOM扩展的更多相关文章
- 读书笔记 - js高级程序设计 - 第五章 引用类型
引用类型 和 类 不是一个概念 用typeof来检测属性是否存在 typeof args.name == "string" 需要实验 访问属性的方法 .号和[] 一般情况下要 ...
- 读书笔记 - js高级程序设计 - 第七章 函数表达式
闭包 有权访问另一个函数作用域中的变量的函数 匿名函数 函数没有名字 少用闭包 由于闭包会携带包含它的函数的作用域,因此会比其它函数占用更多的内存.过度使用闭包可能会导致内存占用过多,我们建议读者 ...
- 读书笔记 - js高级程序设计 - 第六章 面向对象的程序设计
EcmaScript有两种属性 数据属性 和 访问器属性 数据属性有4个特性 Configurable Enumerable Writable Value 前三个值的默认值都为false ...
- 读书笔记 - js高级程序设计 - 第四章 变量 作用域 和 内存问题
5种基本数据类型 可以直接对值操作 判断引用类型 var result = instanceof Array 执行环境 每个执行环境都有一个与之关联的变量对象,环境中定义的所有变量和函数都保存在这 ...
- 读书笔记 - js高级程序设计 - 第三章 基本概念
启用严格模式 "use strict" 这是一个 pragma 编译指示 让编码意图更清晰 是一个重要原则 5种简单数据类型 Undefined Null Boolean Num ...
- 读书笔记 - js高级程序设计 - 第十五章 使用Canvas绘图
读书笔记 - js高级程序设计 - 第十三章 事件 canvas 具备绘图能力的2D上下文 及文本API 很多浏览器对WebGL的3D上下文支持还不够好 有时候即使浏览器支持,操作系统如果缺缺 ...
- 读书笔记 - js高级程序设计 - 第十二章 DOM2和DOM3
Node类型的变化 访问元素的样式 myDiv.style.backgroundColor = "red" myDiv.style.width = "100px& ...
- 读书笔记 - js高级程序设计 - 第十章 DOM
文档元素 是文档的最外层元素,在Html页面中,文档元素始终都是<html>元素 在xml中,任何元素都可以是文档元素 Node类型 Node.ELEMENT_NODE 元素 Node ...
- 读书笔记 - js高级程序设计 - 第八章 BOM
BOM的核心对象是window 它表示浏览器的一个实例,在浏览器中,window对象有双重角色,它既是通过js访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象,这意味着在网 ...
随机推荐
- Address localhost:1099 is already in use(IDEA启动Tomcat报错1099 is already in use)
IDEA中启动Tomcat报错,Error running Tomcat7.0.52: Address localhost:1099 is already in use 或者是 java.rmi.se ...
- Day1-E-BZOJ1293
Description 小西有一条很长的彩带,彩带上挂着各式各样的彩珠.已知彩珠有N个,分为K种.简单的说,可以将彩带考虑为x轴,每一个彩珠有一个对应的坐标(即位置).某些坐标上可以没有彩珠,但多个彩 ...
- 八 Hibernate延迟加载&抓取策略(优化)
面试:Hibernate效率很低,如何优化? 缓存怎么弄的,语句怎么优化? 聊聊一级缓存,聊聊抓取策略和延迟加载,聊聊批量抓取 延迟加载: 一般不单独使用,和延迟加载一起使用 延迟加载:lazy(懒加 ...
- 在线关闭 CLOSE_WAIT状态TCP连接
1.查看某个端口的所有TCP连接: [root@Centos projects]# netstat -anp | tcp6 ::: :::* LISTEN /java tcp6 CLOSE_WAIT ...
- aforge视频录像,对界面进行重绘
由于项目需要,需要录像的时候在界面加多一个圆圈,并且一起录制下来. 只需要在NewFrame增加以下代码 private void videoSourcePlayer1_NewFrame(object ...
- python 文本文件操作
文件操作三步走:打开.读写.关闭. open(file, mode='r', buffering=-1, encoding=None, errors=None, newline=None, close ...
- android中的简单animation(一)shake
1.shake animation_1.xml: <?xml version="1.0" encoding="utf-8"?> <Linear ...
- Koa2+mongoose
为什么选择Koa koa是Express框架同个公司的产品,是开发者在node7.0版本之后使用promise的api把express再次封装了一次,起名Koa,==Koa=Express+Promi ...
- python重要函数eval
1.参数会作为一个 Python 表达式(从技术上说是一个条件列表)被解析并求值 >>> x = 1 >>> eval('x+1') 2 2.去除字符串两边的引号 ...
- hadoop安装文档
一.准备 该准备工作在三台机器上都需要进行,首先使用 vmvare 创建 1 个虚拟机,这台虚拟机是 master,一会需要把 master 克隆出两台 slave 点确定然后开启此虚拟机 然后添加/ ...