JavaScript学习笔记之DOM介绍

1、简介
2、方法
3、属性
4、访问节点
5、修改节点
6、添加节点
7、删除节点
8、替换节点
9、改变 CSS

1、简介

文档对象模型（Document Object Model，DOM）使 JavaScript 可以访问和操作 HTML 文档

当网页被加载时，浏览器会创建页面的文档对象模型，根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都被视为节点，而 HTML 文档则被视为节点树

2、方法

DOM 方法定义在节点上执行的动作，以下列出常用的 DOM 方法：

getElementById()：返回带有指定 ID 的节点
getElementsByTagName()：返回带有指定标签名称的节点列表
getElementsByClassName()：返回带有指定类名的节点列表
appendChild()：添加子节点
removeChild()：删除子节点
replaceChild()：替换子节点
createElement()：创建元素节点
createTextNode()：创建文本节点
createAttribute()：创建属性节点
getAttribute()：返回指定的属性值
setAttribute()：设置属性为指定的值

3、属性

DOM 属性是节点的值，以下列出常用的 DOM 属性：

innerHTML：获取元素内容
nodeName：规定节点名称，只读

nodeName	值
元素节点	与标签名相同
属性节点	与属性名相同
文本节点	#text
文档节点	#document

nodeValue：规定节点的值

nodeValue	值
元素节点	undefined 或 null
属性节点	属性值
文本节点	文本本身

nodeType：规定节点类型，只读

nodeType	值
元素节点	1
属性节点	2
文本节点	3
注释节点	8
文档节点	9

4、访问节点

（1）getElementById()

使用 getElementById() 方法可以返回带有指定 ID 的节点

<!DOCTYPE html>
<html>
    <body>
        <p>Hello World!</p>
        <p id="dom">Hello DOM!</p>
        <script>
        x = document.getElementById("dom");
        document.write("id 为 dom 的文本: " + x.innerHTML);
        </script>
    </body>
</html>

<!-- 页面内容：
    Hello World!
    Hello DOM!
    id 为 dom 的文本: Hello DOM!
-->

（2）getElementsByTagName()

使用 getElementsByTagName() 方法可以返回带有指定标签名称的节点列表

扫描二维码关注公众号，回复： 5176417 查看本文章

<!DOCTYPE html>
<html>
    <body>
        <p>Hello World!</p>
        <p>Hello DOM!</p>
        <script>
            x = document.getElementsByTagName("p");
            document.write("第一段文本: " + x[0].innerHTML);
        </script>
    </body>
</html>

<!-- 页面内容：
    Hello World!
    Hello DOM!
    第一段文本: Hello World!
-->

（3）getElementsByClassName()

使用 getElementsByClassName() 方法可以返回带有指定类名的节点列表

5、修改节点

（1）修改节点内容

修改节点内容最简单的方法是使用 innerHTML 属性

可以通过以下语法修改 HTML 元素的内容

document.getElementById("...").innerHTML = value;

（2）修改节点属性

可以通过以下语法修改 HTML 元素的属性

document.getElementById("...").attribute = value;

6、添加节点

如果需要添加新的节点，可以按照下面三个步骤进行：

创建新的节点
找到已存在的节点
将新的节点追加到已存在的节点 —— appendChild

// 创建新的元素节点 para
var para = document.createElement("p");
// 创建新的文本节点 text
var text = document.createTextNode("This is a new paragraph.");
// 将文本节点 text 添加到元素节点 para
para.appendChild(text);

// 找到已存在的元素节点 element
var element = document.getElementById("...");

// 将新的元素节点 para 追加到已存在的元素节点 element
element.appendChild(para);

7、删除节点

如果需要删除已经存在的节点，可以按照下面三个步骤进行：

找到待删除节点的父节点
找到待删除节点
从父节点中删除子节点 —— removeChild

// 找到待删除节点的父节点 parent
var parent = document.getElementById("div1");

// 找到待删除节点 child
var child = document.getElementById("p1");

// 从父节点 parent 中删除子节点 child
parent.removeChild(child);

也可以先找到待删除节点，然后通过 parentNode 属性查找待删除节点的父节点

// 找到待删除节点 child
var child = document.getElementById("p1");

// 通过 parentNode 属性查找待删除节点的父节点，然后从父节点中删除子节点 child
child.parentNode.removeChild(child);

8、替换节点

替换节点与添加和删除节点类似，需要四个步骤：

创建新的节点
找到待替换节点的父节点
找到待替换节点
从父节点中替换子节点成新的节点 —— replaceChild

// 创建新的元素节点 para
var para = document.createElement("p");
// 创建新的文本节点 text
var text = document.createTextNode("This is a new paragraph.");
// 将文本节点 text 添加到元素节点 para
para.appendChild(text);

// 找到待替换节点的父节点 parent
var parent = document.getElementById("div1");

// 找到待替换节点 child
var child = document.getElementById("p1");

// 从父节点 parent 中替换子节点 child 成新的节点 para
parent.replaceChild(para,child);

同样的，可以通过 parentNode 属性查找待替换节点的父节点

9、改变 CSS

HTML DOM 允许通过 JavaScript 改变 HTML 元素的样式

可以通过以下语法修改 HTML 元素的样式

document.getElementById("...").style.property = value;

Background 属性

background：在一行中设置所有的背景属性
backgroundColor：设置元素的背景颜色
backgroundImage：设置元素的背景图像
backgroundPosition：设置背景图像的起始位置
backgroundRepeat：设置背景图像是否重复
backgroundAttachment：设置背景图像是否固定

Border 属性

border：在一行中设置四个边框的所有属性
borderTop：在一行中设置顶边框的所有属性
borderRight：在一行中设置右边框的所有属性
borderBottom：在一行中设置底边框的所有属性
borderLeft：在一行中设置左边框的所有属性
borderColor：设置所有四个边框的颜色
borderStyle：设置所有四个边框的样式
borderWidth：设置所有四个边框的宽度

Margin 属性

margin：在一行中设置元素的边距
marginTop：设置元素的上边距
marginRight：设置元素的右边距
marginBottom：设置元素的下边距
marginLeft：设置元素的左边距

Padding 属性

padding：在一行中设置元素的填充
paddingTop：设置元素的上填充
paddingRight：设置元素的右填充
paddingBottom：设置元素的下填充
paddingLeft：设置元素的左填充

Outline 属性

outline：在一行中设置元素轮廓的所有属性
outlineColor：设置围绕元素的轮廓颜色
outlineStyle：设置围绕元素的轮廓样式
outlineWidth：设置围绕元素的轮廓宽度

List 属性

listStyle：在一行中设置列表的所有属性
listStyleType：设置列表项标记的类型
listStyleImage：设置列表项标记为图像
listStylePosition：设置列表项标记的位置

Table 属性

borderCollapse：设置表格边框是否合并为单边框
borderSpacing：设置分隔单元格边框的距离
captionSide：设置表格标题的位置
emptyCells：显示空单元格的显示
tableLayout：设置显示表格单元格、行以及列的算法

Text 属性

color：文本颜色
font：在一行中设置字体的所有属性
fontFamily：字体系列
fontSize：字体大小
fontWeight：字体粗细
fontStyle：字体样式
fontStretch：紧缩或伸展字体
fontVariant：小型大写字母
letterSpacing：字间距
wordSpacing：词间距
lineHeight：行间距
textAlign：文本对齐
textIndent：文本缩进
textDecoration：文本修饰
textShadow：文本阴影
textTransform：文本大写
whiteSpace：空白显示

参考资料：

http://www.w3school.com.cn/js/index.asp

http://www.w3school.com.cn/htmldom/index.asp

http://www.w3school.com.cn/jsref/dom_obj_style.asp