第一：DOM 简介
文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。下面主要从方法，属性，事件三个方面讲解DOM
第二：DOM 方法
常用用的方法名跟描述如下:
方法 描述
getElementById() 返回带有指定 ID 的元素。
getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点 数组）。
getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。
appendChild() 把新的子节点添加到指定节点。
removeChild() 删除子节点。
replaceChild() 替换子节点。
insertBefore() 在指定的子节点前面插入新的子节点。
createAttribute() 创建属性节点。
createElement() 创建元素节点。
createTextNode() 创建文本节点。
getAttribute() 返回指定的属性值。
setAttribute() 把指定属性设置或修改为指定的值。
第三：DOM 属性
一些常用的 HTML DOM 属性：
1.innerHTML - 节点（元素）的文本值
2.parentNode - 节点（元素）的父节点
3.childNodes - 节点（元素）的子节点
4.attributes - 节点（元素）的属性节点
第四：DOM 事件
(一) 常用事件：
1. onclick 事件
2. onload 事件
3.onunload 事件
4.onchange 事件
5.onmouseover事件
6.onmouseout 事件
7.onmousedown事件
8.onmouseup 事件
(二) 事件的几种常用的与法
1.标签形式如：<input type="text" id="fname" οnchange="upperCase()">
2.程序形式如：
<script>
document.getElementById("myBtn").οnclick=function(){displayDate()};
</script>
第四：实例
实例一：
<!DOCTYPE html>
<html>
<body>
<p id="intro">Hello World!</p>
<p>本例演示 <b>getElementById</b> 方法！</p>
<script>
x=document.getElementById("intro");
document.write("<p>来自 intro 段落的文本：" + x.innerHTML + "</p>");
</script>
</body>
</html>
实例二：
<html>
<body>
<p id="intro">Hello World!</p>
<script>
var txt=document.getElementById("intro").innerHTML;
document.write(txt);
</script>
</body>
实例三：
<html>
<body>
<p id="intro">Hello World!</p>
<script type="text/javascript">
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script>
</body>
</html>
</html>
总结：DOM主要从上面列主的三个方法云学习，思路简单，概括性强。三个方面可以包括所有的DOM的用法与知识点（PHP开发、web前端、UI设计、VR开发专业培训机构-v客IT学院版权所有，转载请注明出处，谢谢合作！）
扫一扫
2390
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
