目录
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() 方法可以返回带有指定标签名称的节点列表
- <!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
来源: http://www.bubuko.com/infodetail-2958006.html