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

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

JavaScript

十、DOM

       针对HTML和XML文档的一个API，javascript对其实现。

10.1 节点层次

10.1.1 Node类型

  • DOM1 级定义了一个Node接口，所有节点类型都实现该接口
  • 每个节点类型都有nodeType属性
           并不是所有节点类型都支持
    • Node.ELEMENT_NODE——1
    • Node.ATTRIBBUTE_NODE——2
    • Node.TEXT_NODE——3
    • Node.CDATA_SECTION_NODE——4
    • Node.ENTITY_REFERENCE_NODE——5
    • Node.ENTITY_NODE——6
    • Node.PROCESSING_INSTRUCTION_NODE——7
    • Node.COMMENT_NODE——8
    • Node.DOCUMENT_NODE——9
    • Node.DOCUMENT_TYPE_NODE——10
    • Node.DOCUMENT_FRAGMENT_NODE——11
    • Node.NOTATION_NODE——12
10.1.1.1 nodeName和nodeValue属性
  • 属性值取决于节点类型
    • 元素节点的nodeName为标签名，nodeValue为null
10.1.1.2 节点关系
  • childNodes
           保存NodeList对象，有序的，不是Array的实例，动态的
    • 两种访问方式
      • 方括号 childNodes[index]
      • item()方法 childNodes.item(index)
    • length属性
    • 使用Array.prototype.slice(someNode.childNodes,0)可以将NodeList对象转化为数组
    • 包含在childNodes列表中的所有节点都具有相同的父节点
  • parentNode
  • previousSibling和nextSibling
           子节点列表中的上一个和下一个节点
  • firstChild和lastChild
  • hasChildNodes()
  • ownerDocument
           指向最顶端的文档节点
10.1.1.3 操纵节点
  • appendChild(newNode)
           将新节点插入子节点列表的最后位置
  • insertBefore(newNode, accordingNode)
           将新节点插入某个节点之前
  • replaceChild(newNode, initialNode)
  • removeChild(initialNode)
10.1.1.4 其他方法
  • cloneNode(bool)
    • true
             深复制，包括子节点树、特性
    • false
             浅复制
  • normalize()
           将子节点的空文本节点删除或合并两个相邻的文本节点。

10.1.2 Document类型

  • Document类型表示整个文档
  • document对象是window对象的一个属性
  • Document节点的特征
    • 子节点可能是一个documentType（最多一个）、element（最多一个）、processingInstruction或Comment
10.1.2.1 document子节点
  • 指向<html>元素
    • document.documentElement
  • 指向<body>元素
    • document.body
  • 指向<!DOCTYPE>元素
    • document.doctype
  • Document类型是只读的，在document上调用appendChild()等方法操纵节点不起作用且不需要，因为只能有一个元素节点且一般都已存在
10.1.2.2 文档信息
  • document.title
           指向<title>元素
  • 网页请求
           HTTP请求头中的信息
    • document.URL
    • document.domain
             域名
      • 不同子域之间不能通讯
      • www.wrox.com和其内嵌框架的页面为p2p.wrox.com，可以将domain设置为wrox.com，则可以相互通信
      • 设置为wrox.com（松散）之后就无法再修改为p2p.wrox.com（紧绷）
    • document.referrer
             来源页面
10.1.2.3 查找元素
  • getElementById()
  • getElementsByTagName()
    • 返回值为HTMLCollection实例
      • item()
      • namedItem()
      • 方括号
        • number 内部调用item()
        • string 内部调用namedItem()
    • 返回所有元素 getElementsByTagName(" * ")
  • getElementsByName()
10.1.2.4 特殊集合

       HTMLCollection对象

  • document.anchors 所有带name特性的<a>元素
  • document.applets
  • document.forms
  • document.images
  • document.links 所有带href特性的<a>元素
10.1.2.5 DOM一致性检测

       检测浏览器对于DOM的实现

  • document.implementation属性
    • hasFeature(string feature, string version)
             浏览器支持给定名称和版本的功能，则返回true。
      • 浏览器可能在没有实现某些功能的情况下返回true，最好同时进行能力检测
10.1.2.6 文档写入
  • document.write() 和document.writeln()
    • 字符串中的html标记也将被正确解析为html
    • 在页面加载过程中写入则是添加
    • 在页面加载完毕后写入则是重写页面，window.onload
<html>
	<head>
		<script>
			window.onload=function(){
				document.write("<p>重写页面</p>");
			}
		</script>
	</head>
	<body>
		<p>test</p>
		<script>
			document.write("<p>添加内容</p>");
		</script>
	</body>
</html>
  • document.open()和document.close()
    • 打开和关闭网页输出流

10.1.3 Element类型

  • tagName和nodeName
           HTML中以全部大写表示，XML中与源码一致
10.1.3.1 HTML元素
  • 每个HTML元素都存在的标准特性
    • id
    • title
    • lang
    • dir
             语言的方向，ltr 为从左到右
    • className
10.1.3.2 取得特性
  • getAttribute(name)
    • 接收的特性名称参数不区分大小写
    • 返回字符串表示的特性值
    • 任何元素的公认特性会以属性的形式添加到DOM对象中，可以不调用getAttribute()方法直接获得特性值
      • div.id
    • style和onclick等，用特性获取到的是相应的字符串表示，而用属性则获取到的是对象
10.1.3.3 设置特性
  • setAttribute(name, value)
    • 若特性名称不存在，则创建它
    • 也可以通过给DOM对象的相应属性赋值的方式设置特性值
  • removeAttribute(name)
10.1.3.4 attributes属性

       返回一个NamedNodeMap对象，元素的每一个特性都由一个节点表示。主要用于遍历元素特性

  • getNamedItem(name)
  • removeNamedItem(name)
  • setNamedItem(node)
  • item(pos)
  • specified
           如果对元素的某个特性进行了设置，则返回true
10.1.3.5 创建元素
  • document.createElement(tagName)
           只创建元素，未将元素添加进文档树中
10.1.3.6 元素子节点
  • 元素也支持getElementsByTagName() 方法，但只返回当前元素的后代

10.1.4 Text类型

  • 访问文本
    • nodeValue和data
  • 修改文本
           会对输入文本进行HTML编码，默认一个元素只有一个文本节点。
    • appendData(text)
    • deleteData(offset, count)
    • insertData(offset, text)
    • replaceData(offset, count, text)
    • splitText(offset)
             按指定位置将文本节点分割为两个文本节点，该方法返回一个新文本节点。0~offset为原文本节点
    • substringData(offset, count)
  • 文本长度
    • 文本节点的length属性
    • nodeValue及data的length属性
  • 默认情况下，每个可以包含内容的元素最多只能有一个文本节点，且必须确实有内容存在
10.1.4.1 创建文本节点
  • document.createTextNode(text)
    • 多次调用可以创建多个文本节点并添加到父节点中，这种情况只出现在DOM操作中
10.1.4.2 规范化文本节点
  • element.normalize()
10.1.4.3 分割文本节点
  • element.splitText(offset)

10.1.5 Comment类型

  • 注释节点，与文本节点类似，除了没有与splitText()对应的方法之外
    没有子节点
  • 注释节点必须是<html>元素的后代才能保证访问得到
  • document.createComment()

10.1.6 CDATASection类型

  • 只针对XML文档，表示CDATA（Unparsed Character Data）区域，类似文本节点，除了没有与splitText()对应的方法之外

10.1.7 DocumentType类型

  • 不能动态创建，只能通过解析文档代码的方式创建
  • name
           文档类型的名称，例如HTML或XML
  • entities
           HTML下为空的NamedNodeMap对象
  • notations
           HTML下为空的NamedNodeMap对象

10.1.8 DocumentFragment类型

  • 在文档中没有对应的标记
  • 父节点为null
  • 可作为仓库使用，在里面保存可能会添加到文档中的节点
  • document.createDocumentFragment()
  • 用于一次性添加多个节点，避免多次渲染

10.1.9 Attr类型

  • 存在于元素的attributes属性中的节点
  • 父节点为null
  • 不是DOM文档树中的一部分
  • name
  • value
  • specified
    • bool值，表示特性是否设置
  • document.createAttribute()

10.2 DOM操作技术

10.2.1 动态脚本

       通过DOM操作添加<script>元素插入javascript代码

  • 外部代码
    • 元素的src属性指定外部文件
    • 添加进DOM文档树后才会执行代码
  • 内部代码
    • 添加文本节点的方式设置内部代码
    • 元素的text属性设置内部代码
    • 类似eval()

10.2.2 动态样式

通过DOM操作嵌入CSS样式

  • 外部样式
    • 通过<link>元素引入样式文件
      • rel stylesheet
      • type text/css
      • href
  • 内部样式
    • 添加文本节点的方式设置内部样式代码
    • 元素的styleSheet属性的cssText属性设置内部样式

10.2.3 操作表格

  • <table>
    • caption
             表格标题
    • tBodies
    • tFoot
    • tHead
    • rows
    • createTHead()
    • createTFoot()
    • createCaption()
    • deleteTHead()
    • deleteTFoot()
    • deleteCaption()
    • deleteRow(pos)
    • insertRow(pos)
  • <tbody>
    • deleteRow(pos)
    • insertRow(pos)
  • <tr>
    • cells
    • deleteCell(pos)
    • insertCell(pos)

10.2.4 使用NodeList

  • 遍历NodeList、NamedNodeMap和HTMLCollection
    • 都是动态的
    • 在循环中进行改变NodeList长度的操作会造成无限循环
    • 用第二个变量将length的值获取并固定下来可以避免死循环
  • 每次访问NodeList都会运行一次基于文档的查询
小。。。小的我
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
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高级程序设计（第三版）阅读笔记
qq_42543548的博客
01-07 592
再读JavaScript高级程序设计（第三版）阅读笔记
JavaScript_DOM编程艺术第二版高清（中文）
08-02
JavaScript的编程艺术，高清版本，详情述了javascript、dom 和html5 的基础知识， 重点介绍原理，非常适合web开发人员观看
JavaScript DOM编程艺术(第2版pdf)+源代码
02-26
JavaScript DOM编程艺术(第2版pdf)+源代码 中文版，入门推荐
Javascript 高级程序设计-第三版-中文版.pdf
04-26
Javascript 高级程序设计-第三版-中文版.pdf，内容经典
JavaScript 高级程序设计第三版中文版
12-19
《JavaScript 高级程序设计》第三版中文版是一本深入探讨这一语言精髓的重要教材。本书不仅适合初学者，也对有经验的开发者提供了丰富的高级概念和技术。 这本书首先从JavaScript的基础语法开始讲解，包括变量、...
Javascript 高级程序设计（第3版）超清中文PDF
10-20
《JavaScript高级程序设计》（第3版）是一本深入探讨该语言精髓的权威书籍，它为读者提供了全面且深入的JavaScript知识，包括语言核心、DOM操作、BOM处理、事件处理以及面向对象编程等多个方面。 在书中，作者详细...
JavaScript 高级程序设计（第3版）【附源代码】
05-03
《JavaScript高级程序设计（第3版）》是JavaScript学习者必备的经典教材，它深入讲解了JavaScript的核心概念、语法以及高级特性。这本书由资深JavaScript专家Nicholas C. Zakas撰写，为读者提供了全面且深入的...
JavaScript 高级程序设计(第三版)
09-23
**JavaScript 高级程序设计(第三版)** 在IT领域，JavaScript是一种不可或缺的脚本语言，尤其在Web开发中占据核心地位。随着HTML5和CSS3的广泛应用，JavaScript的重要性日益凸显，它使得网页不仅具有静态内容，还能...
JavaScript.DOM高级程序设计
02-28
第三部分“部分高级脚本编程资源”，集中介绍了一批第三方脚本编程资源，包括库和API。同时，每部分的最后一章都为案例研究，将学到的内容应用于实践。通过学习全书内容，读者将能构建起属于自己的DOM 实用方法库。 ...
JavaScriptDOM编程艺术（第2版）PDF版本下载.txt
07-17
JavaScriptDOM编程艺术（第2版）PDF版本下载
javascript DOM 高级程序设计源码（1）
07-17
javascript DOM 高级程序设计源码（1）
JavaScriptDOM高级程序设计
07-22
资源名称：JavaScript DOM高级程序设计内容简介：本书注重理论与实践的结合，全面讲述高级的DOM 脚本编程。全书分为3 个部分：第一部分“深入理解DOM 脚本编程”，涉及W3C DOM 规范的各方面，包括非标准的浏览器支持和不支持的内容；第二部分“浏览器外部通信”，以Ajax 和客户端—服务器端通信为主题；第三部分“部分高级脚本编程资源”，集中介绍了一批第三方脚本编程资源，包括库和A 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
【我的JS第三本】JavaScript_DOM编程艺术第二版读书笔记
Creabine的博客
12-14 5195
经过前一段时间HTML&CSS的学习，感觉视频加读书是一个比较不错的学习方法，两者相辅相成，互相补充，所以也准备看看关于JavaScript的书。       2015年12月14日，之前使用韩顺平老师的教学视频学习了JavaScript，复习了之前的学习笔记后，我发现看视频理解虽然没问题，但是很多细节，关键词，都没能记住，而且对于对象，DOM变成的理解都不够深入，只是简单的知道它们能够实现什么
《DOM编程艺术》三、最佳实践
PJ.Yu的博客
08-24 339
title: 《DOM编程艺术》三、最佳实践date: 2017-06-03 10:10:16tags: DOM编程艺术 1、平稳退化和渐进增强 什么是平稳退化 不管你想通过javascript个改变哪个网页的行为，都必须三思而后行，首先要确认，为这个网页增加这种额外的行为是否有必要。 在所有的javascript特效当中，最臭名昭著的莫过于那些在人们打开网页时弹出的广告窗口，不幸的是有不少用户
JavaScript DOM编程艺术：杨涛-电子书
春来草青
01-26 1940
内容简介： JavaScript是Web开发中重要的一门语言，它强大而优美。无论是桌面开发，还是移动应用。JavaScript都是必须掌握的技术。W3C的DOM标准是开发Web应用的基石。已经得到所有现代浏览器的支持，这使得跨平台Web开发成了一件轻松惬意的事。 《JavaScript DOM编程艺术》是超级畅销书的升级版，由倡导Web标准的领军人物执笔，揭示了前端开发的真谛，是学习JavaS...
javascript高级程序设计 第三版
REDJOLER的博客
07-25 828
网盘地址 提取码：vh81 笔记 第二章 2.1script标签 <script>元素属性：async、charset、defer、language、src、type async和defer只对外部脚本有效，language已废弃，type默认为“text/javascript” defer属性可以让脚本在文档完全呈现之后再执行，且按照指定的顺序执行 设置了async的脚本文件不一定按照书写顺序执行，所以文件间应该互不依赖；异步脚本会在页面的load事件前执行，但可能会在DOMContentL
javascript高级程序设计pdf_Javascript高级程序设计第四版详细测评
weixin_39593744的博客
11-17 8643
本文视频版【红宝书】Javascript高级程序设计第四版详细测评_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili​www.bilibili.com简介哈喽大家好， 我是大圣，上次做了一个js的书籍测评，评价还不错，在做css和node之前，再做几本书的详细推荐吧, 国庆今天又在家好好读了几本具有代表性的javascript高级程序设计【红宝书】javascript忍者秘籍你不知道的java...
javascript高级程序设计(第三版)
最新发布
07-19
### 回答1： 《JavaScript高级程序设计》（第三版）是一本经典的JavaScript技术书籍。此书由Nicholas C. Zakas撰写，涵盖了广泛的主题，适合有一定JavaScript基础的读者。本书详细介绍了JavaScript语言的各个方面，包括基本语法、DOM操作、BOM操作、事件处理、Ajax、浏览器兼容性问题等。 这本书的优点之一是作者对JavaScript的深刻理解和独特的教学方法。他将复杂的概念和技术变得简单易懂，通过实际的例子和案例来解释和演示。读者可以通过跟随书中的练习和项目，逐渐提升自己的JavaScript编程能力。 此外，本书还包含了一些高级主题，如函数、闭包、面向对象编程等。这些主题对于想要深入理解JavaScript的读者来说十分有价值。此外，作者还介绍了一些最佳实践和优化技巧，帮助读者编写更高效、可维护的JavaScript代码。 《JavaScript高级程序设计》（第三版）最大的优点之一是其综合性。它涵盖了JavaScript的各个方面，并且通过详细的目录、索引和附录，方便读者在需要时进行查找和参考。此外，书中还有大量的实例代码和详细的解释，使得读者能够更好地理解和应用所学的知识。 总结来说，《JavaScript高级程序设计》（第三版）是一本非常全面、详尽的JavaScript技术书籍。它不仅适合有一定基础的读者，也适合那些想要深入了解JavaScript编程的人。无论是作为学习教材还是作为参考书，这本书都是非常有价值的。阅读本书将有助于读者提升自己的JavaScript编程能力，并掌握一些高级技术和最佳实践。 ### 回答2： 《JavaScript高级程序设计(第三版)》是一本经典的JavaScript编程指南，由著名的JavaScript专家尼古拉斯·泽卡斯（Nicholas C. Zakas）撰写。该书自2009年首次出版以来，一直被广泛用作学习JavaScript的参考书籍。 这本书从基础知识讲起，逐渐引导读者深入了解JavaScript的各个方面。作者详细介绍了JavaScript的语法、数据类型、运算符、函数、对象、数组等核心概念，并通过大量的实例和案例进行讲解，帮助读者理解和应用这些知识。 《JavaScript高级程序设计(第三版)》特别关注JavaScript的高级特性和最佳实践。作者深入浅出地讲解了闭包、原型链、作用域链等概念，并详细探讨了JavaScript的错误处理、异步编程和模块化等重要主题。读者通过学习这些内容，可以编写出更加高效、可维护和可扩展的JavaScript代码。 此外，书中还介绍了如何在浏览器环境和服务器环境中使用JavaScript，包括DOM操作、事件处理、Ajax、Web存储等技术。作者还对跨浏览器兼容性进行了讨论，帮助读者解决在不同浏览器中遇到的兼容性问题。 总之，《JavaScript高级程序设计(第三版)》是一本非常全面和权威的JavaScript学习资料。它适合初学者学习JavaScript的基础知识，也适合有一定经验的开发者深入了解和掌握JavaScript的高级特性。无论是前端开发还是后端开发，读者都能从中获得宝贵的经验和知识。 ### 回答3： 《JavaScript高级程序设计》（第三版）是一本经典的JavaScript编程教材。该书由Nicholas C. Zakas撰写，对JavaScript的核心概念和高级技术进行了深入讲解。 该书主要分为三个部分。第一部分介绍了JavaScript语言的基础知识，包括语法、数据类型、流程控制、函数等内容。这一部分的目的是帮助读者建立对JavaScript基础的扎实理解，为后续的高级概念打下基础。 第二部分是该书的核心内容，讨论了JavaScript的面向对象编程和浏览器环境中的DOM操作。读者将学习使用构造函数、原型和继承等概念来开发复杂的JavaScript应用程序。此外，本书还给出了大量的示例代码和实践项目，帮助读者提升编程实战能力。 第三部分则涵盖了一些高级主题，如错误处理、数据存储、正则表达式、Ajax等。这些议题是现代Web开发中非常重要的部分，对于提升网页交互性和用户体验至关重要。 《JavaScript高级程序设计》（第三版）在内容上更为详尽全面，适合具备一定JavaScript基础的读者学习。此外，该书侧重于实践应用，深入浅出地讲解了一些复杂的概念，并通过实例和项目帮助读者学以致用。 总的来说，该书通过系统性的介绍和练习，帮助读者逐步掌握JavaScript的核心概念和高级技术，为他们成为出色的JavaScript开发者奠定坚实的基础。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值