对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扩展的更多相关文章

  1. 读书笔记 - js高级程序设计 - 第五章 引用类型

      引用类型 和 类 不是一个概念 用typeof来检测属性是否存在 typeof args.name == "string"  需要实验 访问属性的方法 .号和[] 一般情况下要 ...

  2. 读书笔记 - js高级程序设计 - 第七章 函数表达式

      闭包 有权访问另一个函数作用域中的变量的函数 匿名函数 函数没有名字 少用闭包 由于闭包会携带包含它的函数的作用域,因此会比其它函数占用更多的内存.过度使用闭包可能会导致内存占用过多,我们建议读者 ...

  3. 读书笔记 - js高级程序设计 - 第六章 面向对象的程序设计

      EcmaScript有两种属性 数据属性 和 访问器属性 数据属性有4个特性 Configurable Enumerable Writable Value   前三个值的默认值都为false   ...

  4. 读书笔记 - js高级程序设计 - 第四章 变量 作用域 和 内存问题

      5种基本数据类型 可以直接对值操作 判断引用类型 var result = instanceof Array 执行环境 每个执行环境都有一个与之关联的变量对象,环境中定义的所有变量和函数都保存在这 ...

  5. 读书笔记 - js高级程序设计 - 第三章 基本概念

    启用严格模式 "use strict" 这是一个 pragma 编译指示 让编码意图更清晰  是一个重要原则 5种简单数据类型 Undefined Null Boolean Num ...

  6. 读书笔记 - js高级程序设计 - 第十五章 使用Canvas绘图

    读书笔记 - js高级程序设计 - 第十三章 事件   canvas 具备绘图能力的2D上下文 及文本API 很多浏览器对WebGL的3D上下文支持还不够好   有时候即使浏览器支持,操作系统如果缺缺 ...

  7. 读书笔记 - js高级程序设计 - 第十二章 DOM2和DOM3

      Node类型的变化   访问元素的样式 myDiv.style.backgroundColor = "red" myDiv.style.width = "100px& ...

  8. 读书笔记 - js高级程序设计 - 第十章 DOM

      文档元素 是文档的最外层元素,在Html页面中,文档元素始终都是<html>元素 在xml中,任何元素都可以是文档元素 Node类型 Node.ELEMENT_NODE 元素 Node ...

  9. 读书笔记 - js高级程序设计 - 第八章 BOM

      BOM的核心对象是window 它表示浏览器的一个实例,在浏览器中,window对象有双重角色,它既是通过js访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象,这意味着在网 ...

随机推荐

  1. 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 ...

  2. Day1-E-BZOJ1293

    Description 小西有一条很长的彩带,彩带上挂着各式各样的彩珠.已知彩珠有N个,分为K种.简单的说,可以将彩带考虑为x轴,每一个彩珠有一个对应的坐标(即位置).某些坐标上可以没有彩珠,但多个彩 ...

  3. 八 Hibernate延迟加载&抓取策略(优化)

    面试:Hibernate效率很低,如何优化? 缓存怎么弄的,语句怎么优化? 聊聊一级缓存,聊聊抓取策略和延迟加载,聊聊批量抓取 延迟加载: 一般不单独使用,和延迟加载一起使用 延迟加载:lazy(懒加 ...

  4. 在线关闭 CLOSE_WAIT状态TCP连接

    1.查看某个端口的所有TCP连接: [root@Centos projects]# netstat -anp | tcp6 ::: :::* LISTEN /java tcp6 CLOSE_WAIT ...

  5. aforge视频录像,对界面进行重绘

    由于项目需要,需要录像的时候在界面加多一个圆圈,并且一起录制下来. 只需要在NewFrame增加以下代码 private void videoSourcePlayer1_NewFrame(object ...

  6. python 文本文件操作

    文件操作三步走:打开.读写.关闭. open(file, mode='r', buffering=-1, encoding=None, errors=None, newline=None, close ...

  7. android中的简单animation(一)shake

    1.shake animation_1.xml: <?xml version="1.0" encoding="utf-8"?> <Linear ...

  8. Koa2+mongoose

    为什么选择Koa koa是Express框架同个公司的产品,是开发者在node7.0版本之后使用promise的api把express再次封装了一次,起名Koa,==Koa=Express+Promi ...

  9. python重要函数eval

    1.参数会作为一个 Python 表达式(从技术上说是一个条件列表)被解析并求值 >>> x = 1 >>> eval('x+1') 2 2.去除字符串两边的引号 ...

  10. hadoop安装文档

    一.准备 该准备工作在三台机器上都需要进行,首先使用 vmvare 创建 1 个虚拟机,这台虚拟机是 master,一会需要把 master 克隆出两台 slave 点确定然后开启此虚拟机 然后添加/ ...