dom入门

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

//显示,改变html内容
document.getElementById("p1").innerHTML="New text!"; //显示,改变html属性
document.getElementById("image").src="landscape.jpg"; //显示,改变html CSS
document.getElementById("p2").style.color="blue"; //使用 HTML DOM 来分配事件
document.getElementById("myBtn").onclick=function(){displayDate()};
<!--
增加HTML元素
首先添加元素,然后添加文本节点,随后在之前的元素上追加文本节点,
最后在已有的元素上追加之前创建的DOM元素
--> <!DOCTYPE html>
<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> </body>
</html>
<!--
删除已有的HTML元素
先找出该元素的父元素,然后再找出该元素,
在父元素的基础上删除
--> <!DOCTYPE html>
<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);
/*
或这么写,不用找父元素
var child=document.getElementById("p1");
child.parentNode.removeChild(child);
*/
</script> </body>
</html>
上一篇:Redis 网络通信及连接机制学习


下一篇:UOJ Round #1 [数论 | DP 排列]