JS修改HTML元素属性,JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法...

本文实例讲述了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 DOM

body {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程序设计有所帮助。