JavaScript高级程序设计-第三版（DOM扩展）

于 2020-03-02 23:25:44 发布
阅读量416 收藏
点赞数
分类专栏： javascript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37112587/article/details/104602712
版权

JavaScript

十一、DOM扩展

11.1 选择符API

       根据CSS选择符选择与某个模式匹配的DOM元素

11.1.1 querySelector()

  • CSS选择符
    • # ID
    • .className
    • tagName
  • 返回匹配的第一个元素

11.1.2 querySelectorAll()

  • 返回NodeList（所有匹配的元素）
  • 底层实现类似于一组元素的快照，不是动态的

11.1.3 matchesSelector()

       方法的调用者与CSS选择符匹配则返回true

11.2 元素遍历

       部分浏览器会将元素间的空格当作文本节点。

  • childElementCount 不包括文本节点和注释
  • firstElementChild
  • lastElementChild
  • previousElementSibling
  • nextElementSibling
var i,
	len,
	child=element.firstElementChild;
//遍历元素所有的直接子节点
while(child!=element.lastElementChild){
	processChild(child);
	child=child.nextElementSibling;
}

11.3 HTML5

  • HTML5对新增标记定义了大量javascript API
  • 之前的版本主要用于定义标记，与javascript相关内容都交给DOM规范

11.3.1 与类相关的扩充

11.3.1.1 getElementsByClassName()方法
  • 接收包含一个或多个类名的字符串
  • 多个类名对应设定了多个class的元素
11.3.1.2 classList属性
  • className属性
    • 没有修改单个类的方法，只能全部覆盖。
  • classList属性
    • DOMTokenList类型
    • 该类型具有的方法
      • add(class)
      • contains(class)
      • remove(class)
      • toggle(class) 有则删，无则增

11.3.2 焦点管理

  • document.activeElement
           返回当前获取焦点的元素
    • 页面加载完时指向document.body
    • 正在加载返回null
  • document.hasFocus() 判断Document是否具有焦点

11.3.3 HTMLDocument

  • HTML 5对HTMLDocument进行了拓展，增加了新功能
11.3.3.1 readyState属性

       文档加载状态

  • loading
  • complete
11.3.3.2 兼容模式

       渲染页面的模式分为标准和混杂

  • document.compatMode
    • CSS1Compat 标准
    • BackCompat 混杂
11.3.3.3 head属性
  • document.head 指向<head>元素

11.3.4 字符集属性

  • document.charset
           实际使用的字符集，也可用来指定新字符集
  • document.defaultCharset
           根据默认浏览器及操作系统的设置，当前文档默认的字符集

11.3.5 自定义数据属性

  • dataset属性
           返回DOMStringMap实例，保存自定义属性的键值对
    • 每个data-name形式的属性都会有一个对应的属性，属性名没有data-前缀
    • div.dataset.appId

11.3.6 插入标记

  • 需要插入大量标记，而DOM操作比较麻烦
  • 直接将字符串解析为HTML标记
11.3.6.1 innerHTML属性
  • 可以读取调用者的子节点对应的HTML标记字符串
  • 可以写入HTML标记，并替换调用者的子节点树
  • 不是所有元素都包含innerHTML属性
11.3.6.2 outerHTML属性
  • 可以读取调用者节点以及子节点对应的HTML标记字符串
  • 可以写入HTML标记，并替换调用者及其子节点树
11.3.6.3 insertAdjacentHTML()
  • 传入参数
    • 插入位置
      • beforebegin
      • afterbegin
      • beforeend
      • afterend
    • HTML文本
11.3.6.4 内存与性能问题
  • 删除带有事件处理程序或引用了其他javascript对象子树时，元素与事件处理程序之间的绑定关系在内存中没有一并删除
  • 在使用innerHML、outerHTML、insertAdjustmentHTML()前，最好手工删除要替换的元素的所有事件处理程序和javascript对象属性
  • 设置大量HTML标记时，效率高，每次会创建一个HTML解析器，但创建和销毁解析器有性能损失，不应频繁创建

11.3.7 scrollIntoView()

       使调用者元素出现在视口中

  • 传入参数
    • true或不传入参数：元素顶部与视口平齐

11.4 专有扩展

  • 指IE的专有拓展

11.4.1 文档模式

  • IE的文档模式
    • IE5 混杂模式
    • IE6
    • IE8
    • IE9
  • 强制浏览器以某种模式渲染页面
    • <meta http-equiv=“X-UA-Compatible” content=“IE=IEVersion”/>
      • IEVersion的值
        • Edge 忽略文档类型声明，始终以最新的文档模式来渲染页面
        • EmulateIE9 如果有文档类型声明，则以IE9标准模式渲染页面
        • EmulateIE8
        • EmulateIE7
        • EmulateIE5
        • 9 忽略文档声明，强制以IE9标准模式渲染页面
        • 8
        • 7
        • 5
  • 不是必须设置的，浏览器默认会根据文档类型声明选择最佳的可用文档模式还是混杂模式
  • document.documentMode
    • 返回使用的文档模式的版本号

11.4.2 children属性

  • HTMLCollection类型
  • 只返回元素的element类型的子节点，忽略空白符的文本节点及注释节点
  • 与childNodes基本类似

11.4.3 contains()方法

  • contains(childNode) 返回bool
  • compareDocumentPosition(givenNode)
    • 确定两个节点间的关系
    • 调用者 参考节点
    • 参数 给定节点
    • 返回位掩码值
      • 1 无关
      • 2 同胞居前（参考节点之前）
      • 4 同胞居后
      • 8 祖先
      • 16 后代

11.4.4 插入文本

11.4.4.1 innerText属性
  • 可以读取调用者的所有子节点的文本内容
  • 只能写入一个文本节点，并替换调用者的所有子节点
  • 会对文本进行HTML编码
11.4.4.1 outerText属性
  • 读取时与innerText相同
  • 写入时会替换调用者，相当于将调用者及其所有子节点替换为一个文本节点

11.4.5 滚动

  • scrollIntoViewIfNeeded()
    • 当不可见时才滚动页面至可见，否则什么都不做
    • 传入true 垂直居中
  • scrollByLines(lineCount)
    • 自身内容滚动指定行高
  • scrollByPages(pageCount)
    • 滚动指定页面高度
小。。。小的我
关注
专栏目录
JavaScript高级程序设计 第4版（中文高清）扫描版
bsegebr的博客
03-08 1万+
1. JavaScript组成 核心ECMAScript 文档对象模型DOM 浏览器对象模型BOM 1.2.1 ECMAScript 定义语言的基础 规定了语言的组成部分：语法、类型、语句、关键字、保留字、操作符、对象 js nodejs 都实现了ECMAScript 1.2.2 DOM 文档对象模型 Document Object Model 针对XML但经扩展用于HTML的应用程序编程接口(API) 把整个页面映射为多层节点结构，每个节点包含不同类型的数据。 借助DOM API，可删除，添加，替换，
JavaScript高级程序设计（第三版）红宝书第一章总结
weixin_43723083的博客
10-10 467
JavaScript 简介 JavaScript 发明的最初的目的就是提前在客户端对表单数据进行验证，避免多次与服务器进行数据交换 JavaScript 简史 Netscape 公司的 Brendan Eich 为即将发布的 Netscape Navigator2 开发名为 LiveScript 脚本语言，为了尽快发布与 Sun 公司合作，在发布之前临时改名 JavaScript（为了和 J...
JavaScript DOM 高级程序设计
08-19
本书注重理论与实践的结合，全面讲述高级的DOM脚本编程。全书分为3个部分：第一部分“深入理解DOM脚本编程”，涉及W3CDOM规范的各方面，包括非标准的浏览器支持和不支持的内容；第二部分“浏览器外部通信”，以Ajax和客户端—服务器端通信为主题；第三部分“部分高级脚本编程资源”，集中介绍了一批第三方脚本编程资源，包括库和API。同时，每部分的最后一章都为案例研究，将学到的内容应用于实践。通过学习全书内容，读者将能构建起属于自己的DOM实用方法库。　本书适合有Web开发和设计经验的读者阅读和参考
《JavaScript高级程序设计 第三版》学习笔记 （十）DOM详解
前端小白
09-01 1151
一、节点 1.节点层次 （1）节点是浏览器中的基础类型，所有DOM对象都是特殊的节点，继承自node，可以使用节点自带的方法。 （2）可以通过somenode.childNodes[0];somenode.childNodes.item(0);somenode.firstChild;somenode.lastChild迭代当前节点的子节点。 （3）可以通过somenode.parentNo
JavaScript DOM高级程序设计笔记__(一)
Get Things Done
08-09 1765
第一章 遵循最佳实践 1.1不唐突和渐进增强   不唐突:         a.你的脚本对用户来说必须是不唐突的,即消除了不必要的行为和令人讨厌的功能.          b.脚本本身也是不唐突的,即便在没有javascript的情况下,能使页面和标记持续有效,虽然不再那么优雅.    不唐突相关的两个术语___渐进增强和平稳退化             当浏览器能够支持时,文档会
JavaScript高级程序设计-第三版（DOM）
qq_37112587的博客
03-01 1219
JavaScript十、DOM10.1 节点层次10.1.1 Node类型10.1.2 Document类型10.1.3 Element类型10.1.4 Text类型10.1.5 Comment类型10.1.6 CDATASection类型10.1.7 DocumentType类型10.1.8 DocumentFragment类型10.1.9 Attr类型10.2 DOM操作技术10.2.1 动态...
24-JavaScript高级程序设计-DOM扩展
dandan666dandan的博客
07-13 172
一、DOM扩展 对 DOM 的两个主要的扩展是 Selectors API（选择符 API）和 HTML5。 1. 选择符 API querySelector() 接收一个 CSS 选择符，返回匹配的第一个元素，没有找到返回 null。 querySelectorAll() 接收一个 CSS 选择符，返回所有匹配的元素。（实际上是带有所有属性和方法的 NodeList 对象） 取得返回的 Node...
js高级程序设计第三版(高清中文含源码压缩)JavaScript 超级畅销书的最新版
04-13
js高级程序设计第三版(高清中文含源码压缩)JavaScript 超级畅销书的最新版。 本书是 JavaScript 超级畅销书的最新版。ECMAScript 5 和 HTML5 在标准之争中双双胜出，使大量 专有实现和客户端扩展正式进入规范，同时...
javascript高级程序设计(第三版)
最新发布
07-19
《JavaScript高级程序设计》（第三版）是一本经典的JavaScript技术书籍。此书由Nicholas C. Zakas撰写，涵盖了广泛的主题，适合有一定JavaScript基础的读者。本书详细介绍了JavaScript语言的各个方面，包括基本语法...
[JavaScript.DOM高级程序设计]
01-30
本书注重理论与实践的结合，全面讲述高级的DOM 脚本编程。全书分为3 个部分：第一部分“深入理解DOM 脚本编程”，涉及W3C DOM 规范的各方面，包括非标准的浏览器支持和不支持的内容；第二部分“浏览器外部通信”，以Ajax 和客户端—服务器端通信为主题；第三部分“部分高级脚本编程资源”，集中介绍了一批第三方脚本编程资源，包括库和API。同时，每部分的最后一章都为案例研究，将学到的内容应用于实践。通过学习全书内容，读者将能构建起属于自己的DOM 实用方法库。 本书适合有Web 开发和设计经验的读者阅读和参考。
[JavaScript.DOM高级程序设计]（加）桑贝斯.扫描版.part1.rar
04-01
第一部分　深入理解DOM脚本编程 　第1章　遵循最佳实践　 　　1.1　不唐突和渐进增强　 　　1.2　让JavaScript运行起来　 　　　1.2.1　把行为从结构中分离出来　 　　　1.2.2　不要版本检测　 　　　1.2.3　通过平稳退化保证可访问性　 　　　1.2.4　为重用命名空间而进行规划　 　　　1.2.5　通过可重用的对象把事情简化　 　　　1.2.6　一定要自己动手写代码　 　　1.3　JavaScript语法中常见的陷阱　 　　　1.3.1　区分大小写　 　　　1.3.2　单引号与双引号　　 　　　1.3.3　换行　 　　　1.3.4　可选的分号和花括号　 　　　1.3.5　重载（并非真正的重载）　 　　　1.3.6　匿名函数　 　　　1.3.7　作用域解析和闭包　 　　　1.3.8　迭代对象　 　　　1.3.9　函数的调用和引用（不带括号）　 　　1.4　实例：WYSIWYGJavaScript翻转图　 　　1.5　小结　 　第2章　创建可重用的对象　 　　2.1　对象中包含什么　 　　　2.1.1　继承　 　　　2.1.2　理解对象成员　 　　　2.1.3　window对象中的一切　 　　　2.1.4　理解作用域和闭包是根本　 　　2.2　创建你自己的对象　 　　　2.2.1　一变多：创建构造函数　 　　　2.2.2　添加静态方法　 　　　2.2.3　向原型中添加公有方法　 　　　2.2.4　公有、私有、特权和静态成员真那么重要吗　 　　　2.2.5　对象字面量　 　　2.3　this是什么　 　　2.4　try{}、catch{}和异常处理　 　　2.5　实例：你自己的调试日志　 　　　2.5.1　为什么需要JavaScript日志对象　 　　　2.5.2　myLogger（）对象　 　　2.6　小结　 　第3章　DOM2核心和DOM2 HTML　 　　3.1　DOM不是JavaScript，它是文档　 　　3.2　DOM的级别　 　　　3.2.1　DOM 0 级　 　　　3.2.2　DOM 1 级　 　　　3.2.3　DOM 2 级　 　　　3.2.4　DOM 3 级　 　　　3.2.5　哪个级别适合你　 　　3.3　创建示例文档　 　　　3.3.1　创建DOM文件　 　　　3.3.2　选择一个浏览器 　　3.4　DOM核心　 　　　3.4.1　继承在DOM中的重要性　 　　　3.4.2　核心Node对象　 　　　3.4.3　核心Element对象　 　　　3.4.4　核心Document对象　 　　　3.4.5　遍历和迭代DOM树　 　　3.5　DOM HTML　 　　　3.5.1　DOM2 HTML 的HTMLDocument对象　 　　　3.5.2　DOM2 HTML 的HTMLElement对象　 　　3.6　实例：将手工HTML代码转换为DOM代码　 　　　3.6.1　DOM生成工具的HTML文件　 　　　3.6.2　使用示例HTML片段进行测试　 　　　3.6.3　扩充ADS库　 　　　3.6.4　generateDOM对象的框架　 　　3.7　小结　 　第4章　响应用户操作和事件　 　　4.1　DOM2级事件　 　　4.2　事件的类型　 　　　4.2.1　对象事件　 　　　4.2.2　鼠标移动事件　 　　　4.2.3　鼠标单击事件　 　　　4.2.4　键盘事件　 　　　4.2.5　表单相关的事件　 　　　4.2.6　针对W3C DOM的事件　 　　　4.2.7　自定义事件　 　　4.3　控制事件流和注册事件侦听器　 　　　4.3.1　事件流　 　　　4.3.2　注册事件　 　　　4.3.3　在事件侦听器中访问事件对象　 　　　4.3.4　跨浏览器的事件属性和方法　 　　4.4　小结　 　第5章　动态修改样式和层叠样式表　 　　5.1　W3CDOM2样式规范　 　　　5.1.1　CSSStyleSheet对象　 　　　5.1.2　CSSStyleRule对象　 　　　5.1.3　CSSStyleDeclaration对象　 　　　5.1.4　支持的匮乏　 　　5.2　当DOM　脚本遇到样式　 　　5.3　把样式置于DOM脚本之外　 　　　5.3.1　style属性　 　　　5.3.2　基于className切换样式　 　　　5.3.3　切换样式表　 　　　5.3.4　修改CSS规则　 　　5.4　访问计算样式　 　　5.5　Microsoft的filter属性　 　　5.6　实例：简单的渐变效果　 　　5.7　小结　 　第6章　案例研究：图像裁剪和缩放工具　 　　6.1　测试文件　 　　6.2　imageEditor对象　 　　　6.2.1　调用imageEditor工具　 　　　6.2.2　imageEditor载入事件　 　　　6.2.3　创建编辑器标记和对象　 　　　6.2.4　向imageEditor对象添加事件侦听器　 　　　6.2.5　缩放图像　 　　　6.2.6　裁剪图像　 　　　6.2.7　未完成的图像编辑器　 　　6.3　小结　 第二部分　浏览器外部通信 　第7章　向应用程序中加入Ajax　 　　7.1　组合的技术　 　　　7.1.1　语义化XHTML和DOM　 　　　7.1.2　JavaScript和XMLHttpRequest对象　 　　　7.1.3　XML　 　　　7.1.4　一个可重用的对象　 　　　7.1.5　Ajax是正确的选择吗　 　　7.2　为什么Ajax会破坏网站及如何解决　 　　　7.2.1　依赖JavaScript生成内容　 　　　7.2.2　通过script标签绕过跨站点限制　 　　　7.2.3　后退按钮和书签功能　 　　　7.2.4　完成请求的赛跑　 　　　7.2.5　增加资源占用　 　　　7.2.6　问题解决了吗　 　　7.3　实例：Ajax增强的相册　 　　7.4　小结　 　第8章　案例研究：实现带进度条的异步文件上传功能　 　　8.1　信息载入时的小生命　 　　8.2　起点　 　　8.3　完成整合：上传进度指示器　 　　　8.3.1　addProgressBar（）对象的结构　 　　　8.3.2　载入事件　 　　　8.3.3　addProgressBar（）对象　 　　8.4　小结　 第三部分　部分高级脚本编程资源 　第9章　通过库来提高生产力　 　　9.1　选择合适的库　 　　9.2　增强DOM操作能力　 　　　9.2.1　连缀语法　 　　　9.2.2　通过回调函数进行过滤　 　　　9.2.3　操纵DOM文档　 　　9.3　处理事件　 　　　9.3.1　注册事件　 　　　9.3.2　自定义事件　 　　9.4　访问和操纵样式　 　　9.5　通信　 　　9.6　小结　 　第10章　添加效果增强用户体验　 　　10.1　自己动手实现效果　 　　　10.1.1　让我看到内容　 　　　10.1.2　提供反馈　 　　10.2　几个视觉效果库简介　 　　10.3　视觉盛宴　 　　　10.3.1　MOO式的CSS属性修改　 　　　10.3.2　通过Script.aculo.us实现视觉效果　 　　　10.3.3　通过Moo.fx实现逼真的运动效果　 　　　10.3.4　圆角效果　 　　　10.3.5　其他库　 　　10.4　行为增强　 　　10.5　小结　 　第11章　丰富的Mashup！运用API添加地图、搜索及更多功能　 　　11.1　API密钥　 　　11.2　客户端API：离不开JavaScript　 　　　11.2.1　地图中的Mashup应用　 　　　11.2.2　Ajax搜索请求　 　　　11.2.3　地图与搜索的Mashup应用　 　　11.3　服务器端API：需要代理脚本　 　　　11.3.1　通过Basecamp构建集成的To-Do列表　 　　　11.3.2　通过Flickr取得个性头像　 　　11.4　小结　 　第12章　案例研究：用DOM设计选择列表　 　　12.1　经典的感觉　 　　12.2　构建更好的选择列表　 　　12.3　策略？我们不需要臭哄哄的策略　 　　　12.3.1　相关的文件　 　　　12.3.2　FauxSelect对象　 　　　12.3.3　开始创建人造select元素　 　　　12.3.4　查找select元素　 　　　12.3.5　构建DOM元素　 　　12.4　添加事件——为人造select赋予生命　 　　12.5　让表单绽放光彩　 　　12.6　行为修正　 　　　12.6.1　z-index来救急　 　　　12.6.2　键盘控制及其他细节　 　　　12.6.3　select太大了吗　 　　12.7　最后的细节　 　　12.8　继续替换select的冒险　 　　12.9　小结
javascript DOM 高级程序设计源码（1）
07-17
javascript DOM 高级程序设计源码（1）
JavaScript+DOM编程艺术（清晰中文版）.pdf
08-29
一本我喜欢的书
《JavaScript高级程序设计》学习笔记——DOM
weixin_30929195的博客
09-01 129
Author：chemandy 第十章 DOM DOM是针对XML和HTML文档的一个API：即规定了实现文本节点操控的属性、方法，具体实现由各自浏览器实现。 1. 节点层次 1) 文档节点：document，每个文档的根节点。 2) 文档元素：即<html>元素，文档最外层元素，文档节点第一个子节点。 3) Node类型： ①Node是DOM中各种...
JavaScript DOM 高级程序设计 第１章 遵循最佳实践 摘记
TROUBLE I AM IN
09-02 635
第一章摘录
JavaScript DOM高级程序设计
weixin_33775582的博客
05-17 95
司徒正美推荐的 第一部分 深入理解DOM脚本编程第1章 遵循最佳实践1.1 不唐突和渐进增强1.2 让JavaScript运行起来1.2.1 把行为从结构中分离出来1.2.2 不要版本检测1.2.3 通过平稳退化保证可访问性1.2.4 为重用命名空间而进行规划1.2.5 通过可重用的对象把事情简化1.2.6 一定要自己动手写代码1.3 JavaScript语法中常见的陷阱1.3.1 区...
JavaScript高级程序设计9--DOM扩展
木槿花开
12-15 462
一、选择符API Selectors API Level1的核心是两个方法：querySelector()和querySelectorAll()，在兼容的浏览器中可以通过Document及Element类型的实例调用它们。 1.querySelector()方法 querySelector()方法接收一个CSS选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回null。 /
JavaScript高级程序设计核心笔记-ECMAScript与DOM解析
"《JavaScript高级程序设计》笔记涵盖了JavaScript的基础到高级概念，包括其历史、实现方式、在HTML中的使用，以及基本语法、数据类型、操作符、语句和最佳实践。JavaScript起源于Netscape公司的开发，由ECMAScript...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值