读书笔记 - js高级程序设计 - 第十一章 DOM扩展
2024-09-06 06:12:03
|
对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
|
|
|
|
最新文章
- Redis3 本地安装集群的记录
- C/C++函数调用的几种方式及函数名修饰规则以及c++为什么不允许重载仅返回类型不同的函数
- VS2010在64位系统中连接64位Oracle出现的问题和解决方法
- z-index学习知识小结
- 安卓官方ViewPager与android.support.design.widget.TabLayout双向交互联动切换 。
- PHP 配置文件详解（php.ini 详解 )
- java的基本认识
- mybatis 使用resultMap实现数据库的操作
- [leetcode]_Palindrome Number
- bzoj 1028 暴力枚举判断
- Google测试精华文章(1) - 测试行为，而非实现
- Entity Framework 重写OnModelCreating，控制生成表名的单复数
- DataGridView显示数据的两种方法
- [BZOJ1000] A+B Problem
- SpringMVC进行文件上传
- 如何正确使用Espresso来测试你的Android程序
- 10款免费开源PHP框架
- Jmeter（三十四）Jmeter-Question之“Cookie获取”
- 对比深度学习十大框架：TensorFlow 并非最好？
- char类型