javascript之DOM对象操作HTML

来源：互联网发布：电脑背单词软件编辑：程序博客网时间：2024/05/17 06:54

HTML DOM：当网页被加载的时候，浏览器会创建页面的文档对象模型（document object model）。

DOM操作HTML：

（1）改变文档的输出流。document.write()，是改变整个文档。

（2）寻找元素。通过id寻找元素，document.getElementById("id名称")；通过标签获取元素，document.getElementsByTagName("标签名")，代码如下：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css"></style></head><body><div id="content">这是一个和盒子</div><p>这是</p><script type="text/javascript">var box = document.getElementById("content");box.innerHTML = "我要改变你";var p = document.getElementsByTagName("p")[0];p.innerHTML = "试试"</script></body></html>

（3）改变HTML中的内容。innerHTML可以改变html中的内容。

（4）改变HTML属性。代码如下：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css"></style></head><body><a href="http://www.baidu.com">进去试试</a><button id="btn">点击</button><script type="text/javascript">var a = document.getElementsByTagName("a")[0];console.log(a.href);var btn =document.getElementById("btn");btn.onclick = function(){a.href = "http://www.jikexueyuan.com";}</script></body></html>

阅读全文

0 0