js html DOM JavaScript HTML DOM - 改变CSS

innerHTML是以字符串形式返回该节点的所有子节点及其值。

通过 id 查找 HTML 元素

在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>菜鸟教程(runoob.com)</title>
 6 </head>
 7 <body>
 8 
 9 <p id="intro">你好世界!</p>
10 <p>该实例展示了 <b>getElementById</b> 方法!</p>
11 <script>
12 x=document.getElementById("intro");//表示调用document的getElementById方法返回ID为intro的对象
13 document.write("<p>文本来自 id 为 intro 段落: " + x.innerHTML + "</p>");//通过doucument把文档的内容输出
14 </script>
15 
16 </body>
17 </html>
//getElementById是HTML对象的一个方法，用来获取指定ID的对象

通过标签名查找 HTML 元素

本例查找元素中的所有 <p> 元素：

 1 <body>
 2 
 3 <p>你好世界!</p>
 4 <div id="main">
 5 <p> DOM 是非常有用的。</p>
 6 <p>该实例展示了  <b>getElementsByTagName</b> 方法</p>
 7 </div>
 8 <script>
 9 var x=document.getElementById("main");
10 var y=x.getElementsByTagName("p");
11 document.write('>].innerHTML);
12 </script>
13 
14 </body>

通过类名找到 HTML 元素

 1 <body>
 2 
 3 <p class="intro">你好世界!</p>
 4 <p>该实例展示了 <b>getElementsByClassName</b> 方法!</p>
 5 <script>
 6 x=document.getElementsByClassName("intro");
 7 document.write("<p>文本来自 class 为 intro 段落: " + x[0].innerHTML + "</p>");
 8 </script>
 9 
10 </body>

改变 HTML 内容

修改 HTML 内容的最简单的方法时使用 innerHTML 属性。

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

document.getElementById(id).innerHTML=新的 HTML

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

 1 <body>
 2 
 3 
 4 
 5 <p id="p1">Hello World!</p>
 6 
 7 <script>
 8 
 9 document.getElementById("p1").innerHTML="新文本!";
10 
11 </script>
12 
13 <p>以上段落通过脚本修改文本。</p>
//在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。

改变 HTML 属性

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

document.getElementById(id).attribute=新属性值

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

1 <body>
2 
3 <img id="image" src="smiley.gif" width="160" height="120">
4 <script>
5 document.getElementById("image").src="landscape.jpg";
6 </script>
7 <p>原图片为 smiley.gif,脚本将图片修改为 landscape.jpg</p>

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

改变 HTML 样式

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

document.getElementById(id).style.property=新样式

下面的例子会改变 <p> 元素的样式：

 1 <body>
 2  
 3 <p id="p1">Hello World!</p>
 4 <p id="p2">Hello World!</p>
 5 <script>
 6 document.getElementById("p2").style.color="blue";
 7 document.getElementById("p2").style.fontFamily="Arial";
 8 document.getElementById("p2").style.fontSize="larger";
 9 </script>
10 <p>以上段落通过脚本修改。</p>
11  
12 </body>

使用事件

HTML DOM 允许我们通过触发事件来执行代码。

1 <body>
2 
3 <h1 id="id1">我的标题 1</h1>
4 <button type="button" onclick="document.getElementById('id1').style.color='red'">
5 点我!</button>
6 
7 </body>

对事件做出反应

我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。

如需在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript 代码：

onclick=JavaScript

1 <body>
2 <h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>
3 </body>

addEventListener() 方法

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

语法

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型 (如 "click" 或 "mousedown").

第二个参数是事件触发后调用的函数。

第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

	注意:不要使用 "on" 前缀。例如，使用 "click" ,而不是使用 "onclick"。

创建新的 HTML 元素

如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。

 1 <body>
 2 
 3 <div id="div1">
 4 <p id="p1">这是一个段落。</p>
 5 <p id="p2">这是另一个段落。</p>
 6 </div>
 7 <script>
 8 var para=document.createElement("p");//这段代码创建新的<p> 元素
 9 var node=document.createTextNode("这是一个新段落。");//如需向 <p> 元素添加文本，您必须首先创建文本节点。这段代码创建了一个文本节点
10 para.appendChild(node);//然后您必须向 <p> 元素追加这个文本节点
11 var element=document.getElementById("div1");//最后您必须向一个已有的元素追加这个新元素。这段代码找到一个已有的元素：
13 element.appendChild(para);//代码在已存在的元素后添加新元素
14 </script>
15 
16 </body>

删除已有的 HTML 元素

1 <div id="div1">
2     <p id="p1">这是一个段落。</p>
3     <p id="p2">这是另一个段落。</p>
4 </div>//<div>元素中拥有2个字节点（两个 <p> 元素）
5 <script>
6 var parent=document.getElementById("div1");//找到  的元素
7 var child=document.getElementById("p1");//找到  的 <p> 元素
8 parent.removeChild(child);//从父元素中删除子元素
9 </script>