第十章：DOM

第十章 DOM

10.1节点层次 html元素通过元素节点表示,特性节点通过特性节点表示,文档类型节点通过文档类型节点访问,这些类型都继承一个基类型. 10.1.1 Node类型 JavaScript中的所有节点类型都承自Node类型,因此所有节点类型都共享着相同的基本属性和方法 nodeType属性表明节点的类型每个节点都有一个childNodes属性,保存着一个Nodelist类数组对象,可以使用Array.prototype.slice()方法将其转换为数组 parentNode属性指向文档树中的父节点…

JavaScript高级程序设计学习笔记第十章--DOM

1.DOM:文档对象模型,是针对 HTML 和 XML 文档的一个 API(应用程序编程接口). 2.DOM 可以将任何 HTML 或 XML 文档描绘成一个由多层节点构成的结构. 3.文档节点是每个文档的根节点.在这个例子中,文档节点只有一个子节点,即<html>元素,我们称之为文档元素.文档元素是文档的最外层元素,文档中的其他所有元素都包含在文档元素中.每个文档只能有一个文档元素.在 HTML 页面中,文档元素始终都是<html>元素.在 XML 中,没有预定义的元素,因此任何…

JAVASCRIPT高程笔记-------第十章 DOM对象

10.1.1 node类型 --除IE外所有浏览器都可以访问到这个类型 :JS中所有的节点类型都继承自Node类型 nodeName 与nodeValue 如果是一个元素那么nodeName中保存的是标签名称,而nodeValue默认为空节点关系-每个节点都有一个childNodes属性 ,其中保存着nodeList对象, 注意的是nodeList对象并不是Array实例,而是基于DOM结构动态执行查询的结果:因此在删除或者添加nodeChild时特别注意下标的变化 parentNode…

第十章—DOM(0)—NODE类型

DOM1定义了一个node接口,该接口由DOM的所有节点类型实现. 所有的节点都存在这样或那样的关系.在HTML中,head,body可以看出是html的子元素,html是head,body的父元素,而head,body互为同胞元素. 这里要注意一个概念:nodeList 输出: 如下例子: <div id="myDiv"> </div> <script> var div = document.getEleme…

第十章—DOM(一)——Document类型

DOCUMENT类型 JS通过document类型表示文档,在文档中document对象是HTMLDocument的一个实例,表示整个HTML页面.document对象是window对象的一个属性,因此可以将其作为全局对象来访问. document节点的特征: 在这里,可以使用documentElement和document.body来分别取得对html元素和body元素的引用. 在这里对于html的引用是有条件的.如果文档前面有<!DOCTYPE html>的话,或者body里有内容的话,就…

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

文档元素是文档的最外层元素,在Html页面中,文档元素始终都是<html>元素在xml中,任何元素都可以是文档元素 Node类型 Node.ELEMENT_NODE 元素 Node.ATTRIBUTE_NODE 属性 Node.TEXT_NODE 文本元素 Node.CDATA_SECTION_NODE Node.ENTITY_REFERENCE_NODE Node.ENTITY_NODE Node.PROCESSING_INSTRUCTION_NODE; Node.COMMENT_…

第十章—DOM（三）——Text类型

文本节点由TEXT类型表示,包含纯文本内容,Text节点具有以下特征: 看看下面的代码: div元素开始和结束标签只要存在内容,就会创建一个文本节点.可以使用以下代码来访问元素的这些文本子节点: 访问元素的文本节点的代码但是这里有几个小问题: <body> <div></div> <script> var div = document.getElementsByTagName('div')[0];//这里没有这句,只是单独使用div会导致异常1 var t…

第十章—DOM（二）——Element类型

Element类型用于表现HTML和XML,提供了对元素标签名,子节点和特效的访问.Element节点具有以下特征: 要访问元素的标签名,可以使用nodeName属性,也可以使用tagName属性.这两个属性都返回相同的值. 这里输出的是大写的DIV 在HTML中,标签名始终是以大写形式表示:在XML中,标签名始终和源代码保持一致. 实际操作,以上面这种方式为准每个HTML元素都存在以下标准特性: 也可以修改对应的每个特性: 取得特性操作特性的方法主要有三个: 注意:传递给getAttrib…

第10章DOM笔记

第十章 DOM 一 Node类型共有12种节点类型,每个节点都有nodeType属性,用于表明节点类型,nodename 表示标签名称 nodeValue始终为null 1.操作节点 a) appendChild()方法用于向childNodes的列表最后添加节点,添加后相应的节点都会得到更新.如果出入到appendChild()中的节点已经是文档的一部分了,那结果就是将该节点从原来的位置移到新位子. b) 如果要把节点放到childNodes列表中某个特定的位置,而不是末尾.可以使用in…

js-JavaScript高级程序设计学习笔记6

第八章 BOM 1.BOM的核心对象是window,他表示浏览器的一个实例.在浏览器中,window对象有双重角色,它既是通过JS访问浏览器窗口的一个接口,又是ES规定的Global对象. 2.定义全局变量与在window对象上直接定义属性还是有一点差别:全局变量不能通过delete操作符删除,而直接在window对象上的定义的属性可以. 3.由于浏览器差异,无法确定浏览器窗口本身的大小,但可以取得页面视口的大小: var pageWidth=window.innerWidth, pageHei…

JavaScript高级程序设计读书笔记

第一章 JavaScript 简介第二章 Html中使用JavaScript 第三章基本概念第四章变量,作用域,内存第五章引用类型第六章面向对象第七章函数表达式第八章 BOM 第九章客户端检测能力检测怪癖检测用户代理检测第十章 DOM DOM2 DOM3 DOM扩展第13章事件第14章表单脚本第15章使用Canvas 绘图第16章 HTML5 脚本编程第17章错误处理与调试第20章 JSON 第21章 Ajax 与 Comet 第22章高级技…

自学JavaScript笔记

最近看了一段时间的<JavaScipt高级编程设计>由于记性不是很好,经常性的看了又忘记:想一些文字整理在自己的博客上,方便没事都可以拿出来看一下: 第一章 JavaScript概述第二章使用JavaScript 第三章语法.关键保留字及变量第四章数据类型第五章运算符第六章流程控制语句第七章函数第八章对象和数组第九章时间与日期第十章正则表达式第十一章 Function类型第十二章变量作用域及内存第十三章基本包装类型第十四章内置对象第十五章 …

《JavaScript高级程序设计》阅读计划

第一周第1章 JavaScript简介 1 第2章在Html中使用JavaScript 1 第3章基本概念 3 第二周第4章变量.作用域和内存问题 1.5 第5章引用类型 2 第6章面向对象的程序设计 1 第7章函数表达式 1 第三周第八章 BOM 1 第九章客户端检测 1 第十章 DOM 2 第十一章 DOM扩展 1 第四周第十二章 DOM2和D…

《JavaScript 高级程序设计》读书笔记

文章目录第三章基本语法第四章变量.作用域和内存问题第五章应用类型 1. Array 类型 2. RegExp 类型 3. Function 类型 4. String 类型第六章面向对象的程序设计 6.1 理解对象 1. 属性类型 2. 读取属性 6.2 创建对象 1. 构造函数模式 2. 原型模式 3.组合使用构造函数和原型模式(主要使用方式) 6.3 继承 1. 原型链 2. 组合继承(主要使用方式) 3. 原型链继承第七章函数表达式 *闭包是指有权访问另一个函数作用域中的…

JavaScript DOM编程艺术-学习笔记（第十章、第十一章）

第十章 1.动画中,因为js的效率高,所以看不见过渡效果 2.题外话:①国外人写书,总是先感谢一遍亲朋好友,最后感谢自己的家人. 3."除非允许用户'冻结'移动的内容,否则应该避免让内容在页面中移动" 4.动画经常遇到的问题:鼠标来回移动,则动画就会出问题. 原因:队列事件积累. 解决:判断,如果此时有动画,则清空队列. 5.小知识点:①ceil 向上取整 ②floor 向下取整 ③round 取最近的整数第十一章 1."html5 问世背后的明争暗斗就像是一步韩国肥皂剧&…

<div class="wrap"> <ul id="ul"> <li>01</li> <li>02</li> <li>03</li> <li>04</li> </ul> </div> <script> var ul = document.getElementById('ul'); var lis=documen…

读《编写可维护的JavaScript》第九、十章总结

第九章将配置数据从代码中分离出来 9.2 抽离配置数据这章比较好理解,也非常常见,作者给的俩个例子就能说明一切: // 将配置数据藏在代码中 function validate(value) { if (!value) { alert("Invalid value"); location.href = "/errors/invalid.php"; } } function toggleSelected(element) { if (hasClass(elemen…

《JavaScript DOM编程艺术》读后总结

这是我读的第一本关于JS的书,刚开始我为了选择合适的学习JS的书,看了网上许多人的意见,基本上都是推荐先读这本书.书的内容挺简单的,确实很适合初学者看,阅读的过程中不会产生什么障碍.内容虽然简单,但我觉得还是挺有收获的,之前我主要是通过看视频学习JS的,看了好些视频,了解了好些概念,但对好多概念都是似懂非懂的,认识的不是很真切.通过阅读这本书,使我对前面了解的那些概念有了更清楚的认识,同时,书中还反复强调了几个重要的思想,我觉得这也是很有价值的,很具有指导意义. 书中的第一章是介绍JS的简史的,…

JS基础DOM篇之二：ＤＯＭ级别与节点层次？

通过上一篇我们大致了解了什么是DOM,今天我们继续深入了解. 1.DOM级别在大家阅读DOM标准的时候,可能会看到DOM(0/1/2/3)级的字眼,这就是DOM级别.但实际上,DOM0级标准是不存在的:所谓DOM0级只是DOM历史坐标中的一个参照点而已.具体说来,DOM0级指的是Internet Explorer 4.0和Netscape Navigator 4.0最初支持的DHTML.那下面就介绍一下这存在的三个级别. DOM1级(DOM Level 1)于1998年10月成为W…

《Django By Example》第十章中文翻译（个人学习，渣翻）

书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者注:翻译本章过程中几次想放弃,但是既然都到第十章了,怎么能放弃!) 第十章创建一个在线学习平台(e-Learning Platform) 在上一章,你添加国际化到你的在线商店项目中.你还构建了一个优惠券系统和一个商品推荐引擎.在这章中,你会创建一个新项目.你将构建一个在线学习平台创建一个定制内容管理系统. 在这章中,你会学习以下操作:…

javascript高级程序设计第3版——第10章 DOM

第十章,DOM DOM是语言中立的API,用于访问和操作HTML 和XML 文档.DOM1 级将HTML 和XML 文档形象地看作一个层次化的节点树,可以使用JavaScript 来操作这个节点树,进而改变底层文档的外观和结构. 1.DOM由各种节点构成,基本节点类型Node,所有其他类型都继承自Node类型 2.Document 类型表示整个文档,是一组分层节点的根节点 3.Element 节点表示文档中的所有HTML 或XML 元素 4.另外还有一些节点类型,分别表示文本内容.注释.文档类型…

JavaScript 工作原理之十－使用 MutationObserver 监测 DOM 变化

原文请查阅这里,略有删减,本文采用知识共享署名 4.0 国际许可协议共享,BY Troland. 本系列持续更新中,Github 地址请查阅这里. 这是 JavaScript 工作原理的第十章. 网络应用在客户端日益复杂,这是由很多因素的造成的,比如需要更加丰富的界面交互以提供更加复杂的应用功能,实时计算等等. 网络应用的日益复杂导致无法知晓其生命周期中指定时刻准确的交互界面状态. 如果你正在构建一些框架或者一个库,这会更加的困难,比如,你无法通过监测 DOM 来响应并执行一些特定的操作. 概述…

读js DOM编程艺术总结

第一章主要介绍一些历史性问题,javascript是Netcape和sun公司合作开发的. 第二章JavaScript语法: 1,数据类型:(弱类型)字符串,数值,布尔值(只有true和false,不是字符串)数组,对象 2,函数: 3,对象:(属性和方法),包括内建对象,自定义对象还有浏览器提供的预定义的宿主对象(Form,Image,Element) 第三章DOM: 1,D(document)O(object)M(model)文档对象模型 2,节点分为,元素节点,文本节点,属性节点. 3,获…

关于DOM的操作以及性能优化问题-重绘重排

写在前面: 大家都知道DOM的操作很昂贵. 然后贵在什么地方呢? 一.访问DOM元素二.修改DOM引起的重绘重排一.访问DOM 像书上的比喻:把DOM和JavaScript(这里指ECMScript)各自想象为一个岛屿,它们之间用收费桥梁连接,ECMAScript每次访问DOM,都要途径这座桥,并交纳"过桥费",访问DOM的次数越多,费用也就越高.因此,推荐的做法是尽量减少过桥的次数,努力待在ECMAScript岛上.我们不可能不用DOM的接口,那么,怎样才能提高程序的效率? 既…

读书笔记：JavaScript DOM 编程艺术（第二版）

读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Netscape公司与Sun公司合作开发,在JavaScript之前,web浏览器只是显示文本文档的软件,JavaScript之后,网页内容不再局限于枯燥的文本,交互性显著改善.在JavaScript的第一个版本,即JavaScript 1.0版本,出现在1995年推出的Netscape Navigator…

页面嵌入dom与被嵌入iframe的攻防

1.情景一:自己的页面被引入(嵌入)至别人的页面iframe中 if(window.self != window.top){ //url是自己页面的url window.top.location.href = url } 通过顶层框架的判断,得知自己所在的框架是否是顶层框架.来判断自己页面所在的情况. 知识点:不同域中的iframe不能相互访问. 比如我们的页面在别人的页面iframe中,我们的页面跟别人的页面就在不同的域中. 这时候我们通过window.top.location是无法访问loc…

通俗易懂的来讲讲DOM

DOM是所有前端开发每天打交道的东西,但是随着jQuery等库的出现,大大简化了DOM操作,导致大家慢慢的“遗忘”了它的本来面貌.不过,要想深入学习前端知识,对DOM的了解是不可或缺的,所以本文力图系统的讲解下DOM的相关知识,如有遗漏或错误,还请大家指出一起讨论^ ^. 一.DOM是什么? DOM(文档对象模型)是针对HTML和XML文档的一个API,通过DOM可以去改变文档. 这个说法很官方,大家肯定还是不明白. 举个例子:我们有一段HTML,那么如何访问第二层第一个节点呢,如何把最后一个节…

HTML DOM 介绍

本篇主要介绍DOM内容.DOM 节点.节点属性以及获取HTML元素的方法. 目录 1. 介绍 DOM:介绍DOM,以及对DOM分类和功能的说明. 2. DOM 节点:介绍DOM节点分类和节点层次. 3. HTML DOM 节点属性:介绍HTML DOM节点属性,如:innerHTML.innerText.nodeName.nodeValue以及nodeType等. 4. 获取 HTML 元素节点方法:介绍文档节点(document).元素节点可以通过getElementById.getEleme…

HTML DOM 对象

本篇主要介绍HTML DOM 对象:Document.Element.Attr.Event等4个对象. 目录 1. Document 对象:表示文档树的根节点,大部分属性和方法都是对元素进行操作. 2. Element 对象:表示文档中的元素,可包含为元素节点.文本节点以及注释节点. 3. Attr 属性对象:表示一个Element节点的属性.可获取.添加.修改指定的属性. 4. Event 对象:表示事件发生时的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态等等.…

重撸js_2_基础dom操作

1.node 方法返回含义 nodeName String 获取节点名称 nodeType Number 获取节点类型 nodeValue String 节点的值(注意:文本也是节点) 2.innerText和innerHTML 方法含义 innerText 设置或返回表格行的开始和结束标签之间的文本(剥离html) innerHTML 设置或返回表格行的开始和结束标签之间的HTML 3.遍历操作方法返回含义 firstChild Node 返回子节点列表中的第一个节点 lastCh…

【第十章：DOM】的更多相关文章