2021/10/17 前端开发之JavaScript+jQuery入门 第四章JavaScript DOM操作

目录

1.DOM

        1.1 DOM core(DOM核心操作)

        1.2 HTML-DOM

        1.3 CSS-DOM

2.节点和节点关系

3.节点信息

nodeName(节点名称)

noneValue(节点值)

noneType(节点类型)

4.访问节点

        4.1 通过getElement系列方法访问指定节点

        4.2 通过节点的层次关系访问节点

        4.3 element属性

5.设置元素样式

        5.1 style属性设置样式

        5.2 样式属性

        5.3 ClassName属性设置样式

6.获取元素的样式

        6.1 getComputedStyle() 这个方法接收两个参数，需要获取样式的属性值

        6.2 currentStyle对象，它包含了所有元素的style对象的特征和任何未被覆盖的CSS规则的style特征

本章总结

---

1.DOM

Document Object Model（文档对象模型）

        1.1 DOM core(DOM核心操作)

DOM core定义了一套标准的针对任何结构化文档的对象，包括HTML、XHTML和XML。XML DOM定义了一套标准的针对XML文档的对象。HTML DOM定义了一套标准的针对HTML文档的对象。

        1.2 HTML-DOM

使用JavaScript和DOM为HTML文档写脚本时，有许专属的HTML-DOM属性。

        1.3 CSS-DOM

CSS-DOM是针对CSS的操作

2.节点和节点关系

 

• 整个文档是一个文档节点。
• 每个HTML标签是一个元素节点。
• 包含在HTML元素中的文本是文本节点。
• 每个HTML属性是一个属性节点。
• 注释属于注释节点。

3.节点信息

        每个节点都拥有包含节点某些信息的属性。这些属性是：

1. nodeName(节点名称)

   1. nodeName属性含有某个节点的名称，元素  节点的nodeName是标签名称。属性节点的nodeName是属性名称。文本节点的nodeName永远是#text。文档节点的nodeName永远是#document

2. noneValue(节点值)

   1. 对于文本节点，nodeValue属性包含文本，对属性节点，nodeValue属性包含属性值。nodeValue属性对于文档节点和元素节点是不可用的。

3. noneType(节点类型)

   1. nodeType属性可返回节点的类型

元素类型	节点类型
元素element	1
属性attr	2
文本text	3
注释comments	8
文档document	9

4.访问节点

        4.1 通过getElement系列方法访问指定节点

•  getElementById()方法: 返回按属性查找到的第一个对象的引用。
•  getElementsByName()方法: 按指定名称name查找对象的集合。由于一个文档中可能对有多个同名节点(如复选框丶单选按钮)，所以返回的是元素数组。
•  getElementsByTagName()方法 返回指定标签名称TagName查找对象集合。由于一个文档中可能对有多个同类型的标签节点(如图片丶文本输入框)，所以返回的是元素数组。

        4.2 通过节点的层次关系访问节点

                                                                                                               节点属性

属性类型	描述
parentNode	返回当前节点的父节点
childNodes	返回子节点集合
firstChild	返回节点的第一个子节点，通常用于访问文本节点
lastChild	返回节点的最后一个节点
nextSibling	返回下一个节点
previousSibling	返回上一个节点

注意：在JavaScript中提供了一组可以兼容不同浏览器的element属性，可以消除因为换行或者空行无法准确访问到节点的情况。所以尽量使用带elemen关键字的属性。

        4.3 element属性

属性类型	描述
firstElementChild	返回节点的第一个子节点，通常用于访问文本节点
lastElementChild	返回节点的最后一个子节点
nextElementSibling	返回指定节点的下一个兄弟节点
previousElementSibling	返回指定节点的上一个兄弟节点

5.设置元素样式

        5.1 style属性设置样式

        在HTML DOM中，style是一个对象，代表一个单独的样式声明，可通应用样式的文档或者元素访问style对象，语法如下：

//在页面中有一点id为main的div，要改变div中的字体颜色为红色，字体大小为13px，代码如下所示。
HTML 元素.style.样式属性='值';
document.getElementById("main").style.color="red";
document.getElementById("main").style.fontSize="13px";

        5.2 样式属性

                text(文本)

属性	描述
fontSize	设置元素的字体大小
fontWeight	设置字体的粗细
textAlign	排列文本
color	设置文本的颜色
textDecoration	设置文本的修饰

                background(背景)

属性	描述
backgroundColor	设置元素的背景颜色
backgroundImage	设置元素背景图像
backgroundRepeat	设置图和重复背景图片

                padding(边距)

属性	描述
padding	设置元素的填充
paddingTop	设置元素上填充
paddingBottom	设置元素下填充
paddingLeft	设置元素左填充
paddingRight	设置元素右填充

                border(边框)

属性	描述
border	设置四个边框的属性
borderTop	设置上边框的属性
borderBottom	设置下边框的属性
borderLeft	设置组左边框的属性
borderRight	设置右边框的属性

        5.3 ClassName属性设置样式

        在HTML DOM中 ，ClassName属性可设置或返回元素中的class样式

HTML 元素.className='样式名称';
function aaa (book) {
	var node=document.getElementById(book);
	node.className="c";
}

6.获取元素的样式

        6.1 getComputedStyle() 这个方法接收两个参数，需要获取样式的属性值

                注：IE浏览器不支持此属性

document.defaultView.getComputedStyle(元素,null).属性 

        6.2 currentStyle对象，它包含了所有元素的style对象的特征和任何未被覆盖的CSS规则的style特征

HTML 元素.currentStyle.样式属性

本章总结

1. DOM操作分为DOMCore丶HTML-DOM和CSS-DOM三个方面。
2. 在HTML DOM中查找节点的标准方法是getElement系列方法，也可以使用parentNode丶firstChild丶lastChild丶nextSibling丶previousSibling按层次关系查找节点。
3. 为解决浏览器兼容性问题，也使用firstElementChild丶lastElementChild丶nextElementSibling丶previousElementSibling按层次关系查找节点。
4. 使用JavaScript改变样式的两种方法是使用style属性和className属性。
5. 使用style对象获取内联样式属性值，使用currentStyle对象在IE浏览器中获取样式中的属性值，DOM提供了getComputedStyle()方法以获取样式中的属性值。
6. 在IE6~IE8浏览器下需要使用currentStyle对象获取样式的属性值。

练习小作业：

1. 画一颗DOM树
2. 访问手机页面内容
3. 实现Tab切换效果
4. 获取手机列表页面信息