最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
时间:2017-02-09 编辑:简简单单 来源:一聚教程网
本文实例讲述了JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法。分享给大家供大家参考,具体如下:
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。HTML DOM 模型被构造为对象的树。
通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。例如:改变HTML元素,改变HTML属性,改变CSS样式,事件响应。
效果图:
代码:
代码如下 | 复制代码 |
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
body {background-color:#eeeeee}
(一)通过 id 查找 HTML 元素
Hello world!
x = document.getElementById("hw"); document.write(' id="hw"的段落的文本是:'+x.innerHTML+' ');
functionsetCurrentTime(){ 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++){ vartag = tagContents[i] if(tag!=null){ document.write(" "+tag.innerHTML+" ")}else{ document.write(" 共有"+i+"条内容 ")break; } }
(三)修改 HTML 的属性
functionchangeSrc(){ 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.
示例文字
functionchangeTextColor(){ ele_1 = document.getElementById("para_1"); ele_1.style.color ="red"; } functionchangeTextFont(){ ele_2 = document.getElementById("para_2"); ele_2.style.fontFamily ="Arial"; } functionchangeTextSize(){ ele_3 = document.getElementById("para_3"); ele_3.style.fontSize ="larger"; } document.getElementById("para_4").style.visibility ="visible" functionchangeVisibility(){ ele_4 = document.getElementById("para_4"); if(ele_4.style.visibility.match("visible")){ ele_4.style.visibility ="hidden" }else{ ele_4.style.visibility ="visible" } }
|
相关文章
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
- html area标签解读 10-31
- html使用表单标签实现注册页面代码展示 10-31
- 使用HTML截图并保存为本地图片的代码展示 10-31