HTML 中 DOM的使用，知道这些就够了

TML DOM (文档对象模型)

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 定义了用于 HTML 的一系列标准的对象，以及访问和处理 HTML 文档的标准方法。通过 DOM，你可以访问所有的 HTML 元素，连同它们所包含的文本和属性。

HTML DOM 模型被构造为对象的树：

查找 HTML 元素

//通过 id 查找 HTML 元素
var x=document.getElementById("intro");

//通过标签名查找 HTML 元素
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

//通过类名找到 HTML 元素
var x=document.getElementsByClassName("intro");

HTML DOM 改变 HTML 内容

//改变 HTML 输出流
document.write(Date());
//绝对不要在文档加载完成之后使用,用btn点击事件执行 document.write()。这会覆盖该文档。

//改变 HTML 内容
document.getElementById(id).innerHTML=new HTML

//改变 HTML 属性
document.getElementById(id).attribute=new value

HTML DOM 改变 CSS

//改变 HTML 样式
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";

<h1 id="id1">我的标题 1</h1>
<button type="button" onclick="document.getElementById('id1').style.color='red'">
点我!</button>

HTML DOM 事件

//对事件做出反应
<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>

<script>
function changetext(id){
	id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">点击文本!</h1>
</body>


//HTML 事件属性
<body>
<p>点击按钮执行 <em>displayDate()</em> 函数.</p>
<button onclick="displayDate()">点我</button>
<script>
function displayDate()
{
	document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>


//使用 HTML DOM 来分配事件
document.getElementById("myBtn").onclick=function(){displayDate()};

//onchange 事件
<script>
function myFunction(){
	var x=document.getElementById("fname");
	x.value=x.value.toUpperCase();
}
</script>
</head>
<body>
输入你的名字: <input type="text" id="fname" onchange="myFunction()">
<p>当你离开输入框后，函数将被触发，将小写字母转为大写字母。</p>
</body>

HTML DOM 事件监听器

//addEventListener() 方法
<body>
<p>该实例使用 addEventListener() 方法在按钮中添加点击事件。 </p>
<button id="myBtn">点我</button>
<p id="demo"></p>
<script>
document.getElementById("myBtn").addEventListener("click", displayDate);
function displayDate() {
    document.getElementById("demo").innerHTML=Date();
}
</script>
</body>

//向原元素添加事件句柄
<body>
<p>该实例使用 addEventListener() 方法在按钮中添加点击事件。 </p>
<button id="myBtn">点我</button>
<script>
document.getElementById("myBtn").addEventListener("click", function(){
    alert("Hello World!");
});
</script>

//向同一个元素中添加多个事件句柄
<body>
<p>该实例使用 addEventListener() 方法向同个按钮中添加两个点击事件。</p>
<button id="myBtn">点我</button>
<script>
var x=document.getElementById("myBtn");
x.addEventListener("click", myFunction);
x.addEventListener("click", someOtherFunction);
function myFunction() {
    alert ("Hello World!")
}
function someOtherFunction() {
    alert ("函数已执行!")
}
</script>
</body>

HTML DOM 元素

在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性，分别是：

nodeName : 节点的名称
nodeValue ：节点的值
nodeType ：节点的类型

创建新的 HTML 元素

<body>
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("这是一个新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</script>

删除已有的 HTML 元素

<body>
<div id="div1">
	<p id="p1">这是一个段落。</p>
	<p id="p2">这是另一个段落。</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>
</body>

以上内容整理于网络，如有侵权请联系删除。

所有内置的JavaScript对象

所有浏览器对象

所有HTML DOM对象

JavaScript 对象参考手册

参考手册描述了每个对象的属性和方法，并提供了在线实例。

Array 对象
Boolean 对象
Date 对象
Math 对象
Number 对象
String 对象
RegExp 对象
全局属性和函数

Browser 对象参考手册

参考手册描述了每个对象的属性和方法，并提供了在线实例。

Window 对象
Navigator 对象
Screen 对象
History 对象
Location 对象

HTML DOM 参考手册

参考手册描述了 HTML DOM 的属性和方法，并提供在线实例。

HTML Document
HTML Element
HTML Attributes
HTML Events

HTML DOM 元素对象参考手册

参考手册描述了每个对象的属性和方法，并提供了在线实例。

Anchor 对象
Area 对象
Base 对象
Body 对象
Button 对象
Form 对象
Frame/IFrame 对象
Frameset 对象
Image 对象
Input Button 对象
Input Checkbox 对象
Input File 对象
Input Hidden 对象
Input Password 对象
Input Radio 对象
Input Reset 对象
Input Submit 对象
Input Text 对象
Link 对象
Meta 对象
Object 对象
Option 对象
Select 对象
Style 对象
Table 对象
td / th 对象
tr 对象
Textarea 对象

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

OM节点获取

var oLi=document.getElementsByTagName("li");
var oLi=document.getElementById("cssLi");
var oLi=document.getElementsByName("myInput");

操作属性：

document.getElementById(id).attribute=new value

实例

本例改变了 <img> 元素的 src 属性：

<!DOCTYPE html>
<html>
<body>
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
</body>
</html>

操作内容

修改 HTML 内容的最简单的方法时使用 innerHTML 属性和innerText（IE支持） outerText outerHTML

区别描述如下：

innerHTML 设置或获取位于对象起始和结束标签内的 HTML

outerHTML 设置或获取对象及其内容的 HTML 形式

innerText 设置或获取位于对象起始和结束标签内的文本

outerText 设置(包括标签)或获取(不包括标签)对象的文本

document.getElementById(id).innerHTML=new HTML

实例一

本例改变了 <p> 元素的内容：

<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
</body>
</html>

实例二：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>innerHTML、outerHTML、innerText、outerHTML之间的区别</title>
<script language="JavaScript" type="text/javascript">
　　//.innerHTML
　　function innerHTMLDemo()
　　{
　　　id1.innerHTML="<i><u>设置或获取位于对象起始和结束标签内的 HTML.</u></i>";
　　}
　　//.innerText
　　function innerTextDemo()
　　{
　　　id2.innerText="<i><u>设置或获取位于对象起始和结束标签内的文本.</u></i>";
　　}
　　//.outerHTML
　　function outerHTMLDemo()
　　{
　　　id3.outerHTML="<font size=9pt color=red><i><u>设置或获取对象及其内容的 HTML 形式.</u></i></font>";
　　}
　　//.outerText
　　function outerTextDemo()
　　{
　　　id4.outerText="<br></br><i><u>设置(包括标签)或获取(不包括标签)对象的文本.</u></i>";
　　}
　　</script>
　　</head>
　　<body>
　　<ul>
　　<li id="id1" onclick="innerHTMLDemo()">innerHTML效果.</li>
　　<li id="id2" onclick="innerTextDemo()">innerText效果.</li>
　　<li id="id3" onclick="outerHTMLDemo()">outerHTML效果.</li>
　　<li id="id4" onclick="outerTextDemo()">outerText效果.</li>
　　</ul>
　　</body>
　　</html>

简单的说innerHTML和outerHTML、innerText与outerText的不同之处在于：

　　1)、innerHTML与outerHTML在设置对象的内容时包含的HTML会被解析，而innerText与outerText则不会。

　　2)、在设置时，innerHTML与innerText仅设置标签内的文本，而outerHTML与outerText设置包括标签在内外的文本(多个标签)。

特别说明：

　　innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器，因此，尽可能地去使用innerHTML，而少用innerText，

　　如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签，

　　下面是一个简单的符合W3C标准的示例：

<a href="javascript：alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">无HTML,符合W3C标准</a>

操作样式

如需改变 HTML 元素的样式，请使用这个语法：

document.getElementById(id).style.property=new style

CSS样式的个别属性采用驮峰式写法(如：backgroundColor), 且不带横线。

document.body.style.backgroundColor="red";

如：

<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
</script>
document.getElementById(id).className="类名"；
document.getElementById(id).className="类名1 类名2"；
document.getElementById(id).className+=" 类名3"；//注意要留有空格

<!DOCTYPE HTML>
<html>
<head>
<title>追加CSS类别</title>
<style type="text/css">
.myUL1{
color:#0000FF;
font-family:Arial;
font-weight:bold;
}
.myUL2{
text-decoration:underline;
}
</style>
<script language="javascript">
function check(){
var oMy=document.getElementsByTagName("ul")[0];
oMy.className +=" myUL2"; //追加CSS类,注意要留有空格
}
</script>
</head>
<body>
<ul onclick="check()" class="myUL1">
<li>HTML</li>
<li>JavaScript</li>
<li>CSS</li>
</ul>
</body>
</html>

注意：追加CSS类,注意要留有空格;

ul标记已经设定了.myUL1类的样式的情况下,oMy.className="myUL1 myUL2"不等同于oMy.className +=" myUL2",

oMy.className="myUL1 myUL2"表现形式与oMy.className="myUL2"一样; 因此应当采用oMy.className +=" myUl2";

改变 HTML 样式

通过 HTML DOM，您能够访问 HTML 元素的样式对象。

下面的例子改变一个段落的 HTML 样式：

如需向 HTML DOM 添加新元素，您首先必须创建该元素（元素节点），然后把它追加到已有的元素上。

<div id="d1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
var element=document.getElementById("d1");
element.appendChild(para);
</script>

注意:经过测试证明,para.appendChild(node);调换至最后一行,运行正常

最可行的方法:添加节点的顺序,由内到外(个人习惯);

在线咨询

上一篇：七层网络模型是什么？三分钟绘制好看模型图
下一篇：HTML5开发常见的7个框架，你知道几个？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML 中 DOM的使用，知道这些就够了

TML DOM (文档对象模型)

查找 HTML 元素

HTML DOM 改变 HTML 内容

HTML DOM 改变 CSS

HTML DOM 事件

HTML DOM 事件监听器

HTML DOM 元素

您的项目需求