JavaScript 操作 HTML DOM

JavaScript 操作 HTML DOM

JavaScript HTML DOM - 改变 HTML
改变 HTML 输出流
<script>
document.write(Date());
</script>

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

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

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

实例:
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>

改变 HTML 样式
document.getElementById(id).style.property=new style

实例:
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
</script>

实例:
<h1 id="id1">My Heading 1</h1>
<button type="button" onclick="document.getElementById('id1').style.color='red'">
点击这里
</button>

JavaScript HTML DOM 事件
onclick=JavaScript

实例:
<h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>

实例:
<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="谢谢!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">请点击该文本</h1>
</body>
</html>

HTML 事件属性
<button onclick="displayDate()">点击这里</button>

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

onload 和 onunload 事件
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。

实例:
<body onload="checkCookies()">

onchange 事件
onmouseover 和 onmouseout 事件
onmousedown、onmouseup 以及 onclick 事件

JavaScript HTML DOM 元素（节点）

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

实例:
<div id="div1">
<p id="p1">这是一个段落</p>
<p id="p2">这是另一个段落</p>
</div>

<script>
var para=document.createElement("p"); //建新的 <p> 元素
var node=document.createTextNode("这是新段落。"); //先创建文本节点
para.appendChild(node); //向 <p> 元素追加这个文本节点

var element=document.getElementById("div1"); //找到一个已有的元素
element.appendChild(para); //向这个已有的元素追加新元素
</script>

删除已有的 HTML 元素

实例:
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

<script>
var parent=document.getElementById("div1"); //找到 id="div1" 的元素
var child=document.getElementById("p1"); //找到 id="p1" 的 <p> 元素
parent.removeChild(child); //从父元素中删除子元素
</script>

DOM 需要清楚您需要删除的元素，以及它的父元素。
可以简化为：
var child=document.getElementById("p1");
child.parentNode.removeChild(child);

参考原文： http://www.w3school.com.cn/js

JavaScript 操作 HTML DOM

猜你喜欢