JavaScript高级程序设计DOM学习笔记资源-CSDN文库

148 浏览量 2020-10-28 09:33:30 上传评论收藏 171KB PDF 举报

根据给定的文件信息，以下是关于JavaScript中DOM（文档对象模型）的相关知识点详解： DOM是文档对象模型（Document Object Model）的缩写，它是一个跨平台的接口，由W3C组织制定标准，用于在HTML或XML文档中创建和管理树状结构的节点。通过DOM提供的API，开发者可以使用JavaScript等脚本语言操作HTML文档，实现对文档内容、结构及样式的动态修改。 ### 节点层次 1. **文档节点（document）**：是每个HTML或XML文档的根节点，代表整个文档。 2. **文档元素（html元素）**：这是文档中最外层的元素，也是文档节点的第一个子节点。通常指的是<html>标签。 3. **Node类型**：Node是DOM中各种节点类型的基类，其他类型的节点均继承自Node。Node类型的属性和方法被其他节点类型共享，包括以下几种： - **nodeType属性**：每个节点类型都有一个对应的常量值，如Node.ELEMENT_NODE为1，Node.TEXT_NODE为3等。 - **nodeName和nodeValue属性**：这两个属性表示节点的名字和值。 - **childNodes属性**：保存了节点的所有子节点信息，并且是一个NodeList对象。NodeList对象类似于数组，但不是Array的实例。 - **parentNode属性**：指向节点的父节点。 - **previousSibling和nextSibling属性**：分别表示节点的前一个和下一个兄弟节点。 - **firstChild和lastChild属性**：表示节点的第一个和最后一个子节点。 - **hasChildNodes()方法**：检查节点是否有子节点。 - **appendChild()方法**：向childNodes列表末尾添加一个子节点。 - **insertBefore()方法**：在已存在的子节点前插入一个新节点。 - **replaceChild()方法**：用新节点替换指定子节点。 - **removeChild()方法**：移除指定的子节点。 - **cloneNode()方法**：复制节点，可进行深度复制或浅复制。 - **normalize()方法**：合并文档树中的相邻文本节点。 ### Document类型 Document类型表示整个文档，它继承自Node类型。Document类型是HTMLDocument类型的实例，代表整个HTML页面。document对象是window对象的一个属性，因此它是全局对象，可以不使用window前缀直接访问。 1. **documentElement属性**：该属性始终指向文档的<html>元素。 2. **body属性**：直接指向文档中的<body>元素。 3. **doctype属性**：用来访问文档的<!DOCTYPE>声明，但各浏览器对此的支持不一致，使用上有限制。 4. **title属性**：用于获取和设置文档的标题。 5. **URL属性**：返回文档的URL地址。 6. **domain属性**：返回文档的域名，某些情况下也可以设置，但有浏览器的安全限制。 7. **referrer属性**：保存了链接到当前页面的那个页面的URL。 8. **getElementById()方法**：根据元素ID获取单个元素节点。 9. **getElementsByTagName()方法**：根据元素名获取一组元素节点，返回的是NodeList对象。在HTML中，这个方法返回的是HTMLCollection对象。通过这些DOM API，开发者可以灵活地操作和控制页面元素，如添加、删除、修改元素内容，动态生成新的HTML结构，以及响应用户事件等。掌握DOM操作是进行前端开发的必备技能之一。

资源推荐

资源详情

资源评论

JavaScript高级程序设计高级程序设计 DOM学习笔记学习笔记

DOM是针对XML和HTML文档的一个API：即规定了实现文本节点操控的属性、方法，具体实现由各自浏览器实

现。

第十章 DOM

DOM是针对XML和HTML文档的一个API：即规定了实现文本节点操控的属性、方法，具体实现由各自浏览器实现。

1. 节点层次

1) 文档节点：document，每个文档的根节点。

2) 文档元素：即<html>元素，文档最外层元素，文档节点第一个子节点。

3) Node类型：

①Node是DOM中各种节点类型的基类型，共享相同的基本属性和方法。

□ Node.Element_NODE(1);

□ Node.ATTRIBUTE_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);

每种节点的nodeType属性返回上述类型之一，为一常量。

通过节点nodeType属性与数字值比较，可得节点类型。

②nodeName和nodeVlue属性。

③每个节点的子节点信息保存在childNodes属性中，childNodes属性中保存一个NodeList对象。

□ NodeList对象，类数组对象，有length属性，但非Array的实例。

□ 访问NodeList中的节点，可以通过方括号，也可以使用item()方法。

var firstChild = someNode.ChildNodes[0];

var secondChild = someNode.ChildNodes.item(1);

var count = someNode.childNodes.length;

□ 将NodeList转为数组对象。

function convertToArray(nodes){

var array = null;

try{

array = Array.prototype.slice.call(nodes,0); //非IE

}catch(ex){

array = new Array();

for(var i = 0,len = nodes.length; i < len; i++){

array.push(nodes[i]);

}

return array;

}

④parentName属性：指向文档树中父节点。

⑤previousSibling属性和nextSibling属性：前一个/下一个同胞节点。

⑥firstChild属性和lastChild属性：前一个/后一个子节点。

⑦hasChildNodes()方法：含子节点返回true，反之返回false。

⑧appendChild()方法：向childNodes列表末尾添加一个子节点，返回新增节点。

⑨insertBefore()方法：两个参数：要插入的节点和作为参照的节点。返回新增节点。

⑩replaceChild()方法：两个参数：要插入的节点和要替换节点。返回新增节点。

⑾removeChild()方法：移除节点。

⑿cloneNode()方法：接受一个布尔值。true为深复制，复制节点及子节点。false为浅复制，仅复制本身节点。

⒀nomalize()方法：处理文档树中文本节点。

4) Document类型（针对document对象）

①Document类型表示文档，是HTMLDocument类型的一个实例，表示整个HTML页面。document对象是window对象的一个

属性，可作全局对象访问。

②documentElement属性；该属性始终指向HTML页面中的<html>元素。

③body属性；直接指向<body>元素。

④doctype属性：访问<!DOCTYPE>，各浏览器支持不一致。用处有限。

⑤title属性：可获得和设置title的文本。

⑥URL属性：地址栏中的URL。

⑦domain属性：页面的域名（可设置，有限制）

⑧referrer属性：保存链接到当前页面的那个页面的URL

⑨getElementById()方法：传入元素的ID，返回元素节点。

⑩getElementsByTagName()方法：传入元素名，返回NodeList。

□ 在HTML中返回一个HTMLCollection对象，与NodeList类似。

□ 访问HTMLCollection对象：方括号语法，item()方法，namedItem()方法，HTMLCollection对象还可通过元素的name特性取

得集合中的项。

⑾getElementsByName()方法：返回带有给定name特性的所有元素。

⑿特殊集合，这些集合都是HTMLCollection对象。

□ document.anchors:包含文档中所有带name特性的<a>元素。

□ document.applets:包含文档中所有的<applet>元素。

□ document.forms:包含文档中所有的<form>元素。

□ document.images:包含文档中所有的<img>元素。

□ document.links:包含文档中所有带href属性的<a>元素。

⒀DOM一致性检测：document.implementation属性就为此提供相应信息和功能的对象。

□ 此对象有一个方法：hasFeature()：两个参数：要检测的DOM功能的名称及版本号。

□ 功能：Core、XML、HTML、Views、StyleSheets、CSS、CSS2、Events、UIEvents、MouseEvents、MutationEvents、

HTMLEvents、Range、Traversal、LS、LS-Async、Validation

⒁将输出流写入网页：write()、writeln()、open()和close()。

5) Element类型

①用于表现XML或HTML元素，提供了对元素标签名、子节点及特性的访问。

②可用nodeName属性或tagName属性访问元素标签名。tagName会在HTML中返回大写标签名，在XML中会原样返回。

（1）HTML元素

■所有HTML元素都由Element类型子类HTMLElement类型表示，其属性如下：

□id：元素在文档中的唯一标识符。

□title：有关元素的附加说明信息，一般通过工具提示条显示出来。

□lang：元素内容的语言代码，很少使用。

□dir：语言的方向，值为“ltr”或“rtl”，很少使用。

□className：与元素的class特性对应，即为元素指定的css类。

上述这些属性都可以用来取得或修改相应的特性值。

（2）取得特性

①getAttribute()方法：可以取得公认特性和自定义特性的值。

□任何元素的所有特性，也可以通过DOM元素本身的属性来访问。alert(div.id);alert(div.align);

□只有公认的（非自定义的）特性才会以属性的形式添加到DOM对象中。

□style特性通过getAttribute()访问得特性值CSS文本。通过属性访问得一个对象。

□onclick特性：getAttribute()，返回JS代码字符串。通过属性访问返回一个函数。

□一般通过属性取得特性，只有在取自定义特性值时，才用getAttribute()。

（3）设置特性

①setAttribute()：两个参数，要设置的特性名和值。如果特性已经存在，setAttribute()会以指定的值替换现有的值；如果特性

不存在，setAttribute()则创建该属性并设置相应的值。

□此方法既可以操作HTML特性也可以操作自定义特性。

□所有公认特性都是属性，因此直接给属性赋值可以设置特性的值。

□IE6、IE7中，setAttribute()设置class、style，事件处理程序会每没有任何效果。但不建议通过属性设置特性。

②removeAttribute()：彻底删除元素的特性（IE6不支持）。

（4）attributes属性

①此属性包含一个NameNodeMap对象（类似NodeList的“动态”集合）。元素的每一个特性有一个Attr节点表示，每个节点保存

在NameNodeMap对象中。

□getNameItem(name)：返回返回nodeName属性等于name的节点

□removeNameItem(name)：从列表中移除nodeName属性等于name的节点。

□setNameItem(node)：向列表中添加节点，以节点的nodeName属性为索引。

□item(pos)：返回位于数字pos位置的节点。

（5）创建元素

①使用document.createElement()方法可以创建新元素。参数：标签名。

②IE中createElement()可传入完整的元素标签，防止IE7以及IE6问题：

□不能设置动态创建的<iframe>元素的name特性

□不能通过表单的reset()方法重设动态创建的<input>元素。

□动态创建的type特性值为“reset”的<button>元素重设不了表单。

□动态创建的一批name相同的单选按钮彼此毫无关系。

if(client.browser.ie&&client.brower.ie<=7){

var iframe = document.createElement("<iframe name = \"myframe\"></iframe>");

}

（6）元素的子节点

①元素的childNode属性中包含了它的所有子节点：元素、文本节点、注释或处理指令。

□一般浏览器解析childNodes时会把元素节点空间的空白符解析为文本节点，而IE不会。因此遍历执行操作需要检查nodeType

属性。

For(var i= 0, len = element.childNode.length; i> len; i++){

If(element.childNodes[i].nodeType == 1){

//执行某些操作

}

□元素节点支持getElementByTagName()方法。

剩余11页未读，继续阅读

评论收藏

内容反馈

weixin_38605144

粉丝: 6
资源: 945

JavaScript高级程序设计 DOM学习笔记

最新资源

JavaScript高级程序设计 DOM学习笔记

DOM学习笔记

DOM - 学习笔记

JavaScript DOM 高级程序设计

JavaScript高级程序设计2，学习笔记---第一篇

JavaScript高级程序设计 学习笔记之DOM基础(五)

HTML5高级程序设计学习笔记

Javascript高级程序设计---笔记.pdf

Javascript高级程序设计---笔记归类.pdf

JavaScript DOM高级程序设计

毕设&课设&项目&实训-基于JavaScript高级程序设计第四版的学习笔记.zip

传播智客扬中科老师讲的DOM 学习笔记

对javascript的一点点认识总结《javascript高级程序设计》读书笔记

JavaScript DOM高级程序设计 Part I

[JavaScript.DOM高级程序设计]

JavaScript.DOM高级程序设计]（下）

韩顺平javascript笔记（最全整理 dom编程 oop 基础语法）

JavaScript练习程序学习笔记.rar

Javascript权威指南学习笔记二

《JavaScript程序设计》笔记（基础1）

JavaScript高级程序设计（第3版）学习笔记 概述

最新资源

JavaScript高级程序设计学习笔记之DOM基础(五)

JavaScript高级程序设计（第3版）学习笔记概述