JavaScript中如何基于Dom操作实现查找、修改HTML元素的内容
短信预约 -IT技能 免费直播动态提醒
小编给大家分享一下JavaScript中如何基于Dom操作实现查找、修改HTML元素的内容，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。HTML DOM 模型被构造为对象的树。
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。例如：改变HTML元素，改变HTML属性，改变CSS样式，事件响应。
效果图：
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>Javascript HTML DOM</title>
<head>
<style type="text/css">
body {background-color:#eeeeee}
</style>
</head>
<body>
<h4>(一)通过 id 查找 HTML 元素</h4>
<p id = "hw">Hello world!</p>
<script>
x = document.getElementById("hw");
document.write('<p>id="hw"的段落的文本是：'+x.innerHTML+'</p>');
</script>
<button onclick = "setCurrentTime()">将id="hw"的文字改为当前时间</button>
<script>
function setCurrentTime(){
x = document.getElementById("hw");
x.innerHTML = Date()
}
</script>
<h4>(二)通过 标签名 查找 HTML 元素</h4>
<div id = "mainDiv">
<p>This is a paragragph.</p>
<p>This is another paragragph.</p>
<p>Yes you're right! This is also paragragph.</p>
</div>
<script>
xx = document.getElementById("mainDiv");
tagContents = xx.getElementsByTagName("p");
document.write("<p>使用Javascript查找id为mainDiv下的p标签的内容</p>");
for(i=0;;i++){
var tag = tagContents[i]
if(tag!=null){
document.write("<p>"+tag.innerHTML+"</p>")
}else{
document.write("<p>共有"+i+"条内容</p>")
break;
}
}
</script>
<h4>(三)修改 HTML 的属性</h4>
<img id = "bol" class="lazy" data-src = "images/eg_bulboff.gif" width="70px" height="120px"/>
<p><button onclick = "changeclass="lazy" data-src()">改变图片资源</button></p>
<script>
function changeclass="lazy" data-src(){
x = document.getElementById("bol");
if (x.class="lazy" data-src.match("eg_bulboff.gif")){
x.class="lazy" data-src = "images/eg_bulbon.gif"
}else{
x.class="lazy" data-src = "images/eg_bulboff.gif"
}
}
</script>
<h4>(四)修改 CSS 样式</h4>
<p>
<span id = "para_1">This is a test paragraph.</span>
<button onclick="changeTextColor()">改变文字颜色</button>
</p>
<p>
<span id = "para_2">This is another paragraph.
<button onclick="changeTextFont()">改变字体</button>
</p>
<p>
<span id = "para_3">This is HELLO WORLD.</span>
<button onclick="changeTextSize()">改变字号</button>
</p>
<p>
<button onclick="changeVisibility()">显示/隐藏</button>
<span id = "para_4">示例文字</span>
</p>
<script>
function changeTextColor(){
ele_1 = document.getElementById("para_1");
ele_1.style.color = "red";
}
function changeTextFont(){
ele_2 = document.getElementById("para_2");
ele_2.style.fontFamily = "Arial";
}
function changeTextSize(){
ele_3 = document.getElementById("para_3");
ele_3.style.fontSize = "larger";
}
document.getElementById("para_4").style.visibility = "visible"
function changeVisibility(){
ele_4 = document.getElementById("para_4");
if(ele_4.style.visibility.match("visible")){
ele_4.style.visibility = "hidden"
}else{
ele_4.style.visibility = "visible"
}
}
</script>
</body>
</html>以上是“JavaScript中如何基于Dom操作实现查找、修改HTML元素的内容”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网行业资讯频道！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
