JavaScript学习笔记之DOM介绍
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
最新文章
- hdu3247Resource Archiver(ac自动机+spfa)
- JS 点击复制Copy (share)
- hdu 2053
- cp: omitting directory”错误的解释和解决办法
- JS 回车提交
- Angle
- python xlrd,xlwt 读写excel文件
- SDN基础理解
- swfobject.js IE兼容问题
- hdoj 1728 逃离迷宫
- JQuery获取当前屏幕的高度宽度
- OCP-1Z0-053-V12.02-512题 【转】
- SGU 248. Integer Linear Programming( 背包dp )
- IntelliJ IDEA 设置Output (输出窗口)窗口字体大小
- express和cors跨域
- CSS难点 为什么height设置100%会失效,分栏目等高布局(高度自适用布局)的实现方案
- 工作随笔—static关键字
- 深入理解CSS绝对定位absolute
- 3.Python爬虫入门三之Urllib和Urllib2库的基本使用
- @Html.EditorFor() 用法
热门文章
- Cocos2d-x可以实现的效果总结
- [转载]目标检测的图像特征提取之(一)HOG特征(zouxy09@qq.com)
- 【POJ 1716】 Integer Intervals
- 【Codeforces 670C】 Cinema
- la3211
- eclipse.ini启动参数配置的解析及方法
- BigInteger、BigDecimal类的使用详解
- C# System.Environment.GetFolderPath的使用 [转]
- $Vijos P1250$
- 【BZOJ2762】[JLOI2011]不等式组(树状数组)