本文实例讲述了JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法。分享给大家供大家参考,具体如下:
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。HTML DOM 模型被构造为对象的树。
通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。例如:改变HTML元素,改变HTML属性,改变CSS样式,事件响应。
效果图:
代码:
/p>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Javascript HTML DOMbody {background-color:#eeeeee}
(一)通过 id 查找 HTML 元素
Hello world!
x = document.getElementById("hw");
document.write('
id="hw"的段落的文本是:'+x.innerHTML+'
');将id="hw"的文字改为当前时间
function setCurrentTime(){
x = document.getElementById("hw");
x.innerHTML = Date()
}
(二)通过 标签名 查找 HTML 元素
This is a paragragph.
This is another paragragph.
Yes you're right! This is also paragragph.
xx = document.getElementById("mainDiv");
tagContents = xx.getElementsByTagName("p");
document.write("
使用Javascript查找id为mainDiv下的p标签的内容
");for(i=0;;i++){
var tag = tagContents[i]
if(tag!=null){
document.write("
"+tag.innerHTML+"
")}else{
document.write("
共有"+i+"条内容
")break;
}
}
(三)修改 HTML 的属性
改变图片资源
function changeSrc(){
x = document.getElementById("bol");
if (x.src.match("eg_bulboff.gif")){
x.src = "images/eg_bulbon.gif"
}else{
x.src = "images/eg_bulboff.gif"
}
}
(四)修改 CSS 样式
This is a test paragraph.
改变文字颜色
This is another paragraph.
改变字体
This is HELLO WORLD.
改变字号
显示/隐藏
示例文字
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"
}
}
希望本文所述对大家JavaScript程序设计有所帮助。