首页 > 代码库 > dom入门
dom入门
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。
//显示,改变html内容 document.getElementById("p1").innerHTML="New text!"; //显示,改变html属性 document.getElementById("image").src="http://www.mamicode.com/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>
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。