html百度百科(html教程)
DOM由W3C制定，定义了访问XML文档和HTML文档的标准，我们这里只讲解HTML DOM。DOM为前端开发者提供了如下的编程接口：对页面的事件进行响应；查询HTML元素；修改HTML元素、属性、CSS样式；删除HTML元素；添加HTML元素。正是因为DOM的存在，才使得JavaScript如虎添翼。DOM是Document Object Model的缩写，即“文档对象模型”的缩写。DOM由W3
DOM由W3C制定，定义了访问XML文档和HTML文档的标准，我们这里只讲解HTML DOM。DOM为前端开发者提供了如下的编程接口：对页面的事件进行响应；查询HTML元素；修改HTML元素、属性、CSS样式；删除HTML元素；添加HTML元素。正是因为DOM的存在，才使得JavaScript如虎添翼。
DOM是Document Object Model的缩写，即“文档对象模型”的缩写。 DOM由W3C（World Wide Web Consortium，万维网联盟）制定，定义了访问XML文档和HTML文档的标准，我们这里只讲解HTML DOM。 DOM是HTML文档的对象模型。 一个HTML文档中的所有元素，通过DOM，可以表示成一个个的对象，并且这些对象之间的关系可以用树形数据结构来表示。 例如，下面是某个HTML文档的数据结构： 在DOM的概念里，整个HTML文档是一个Document对象，HTML中的元素是Document对象的成员对象。 DOM的本质作用，是提供了对HTML文档的编程接口。 DOM为前端开发者提供了如下的编程接口： （1）对页面的事件进行响应； （2）查询HTML元素； （3）修改HTML元素、属性、CSS样式； （4）删除HTML元素； （5）添加HTML元素。 正是因为DOM的存在，才使得JavaScript如虎添翼。 下面的HTML文档dom001.html，通过DOM实现对HTML元素样式的改变： dom001.html被浏览器打开后，效果如下： 当点击“修改样式”按钮后，页面变为： 下面的HTML文档dom002.html，实现每次加载文件时，都显示当前的时间： dom002.html被浏览器打开后，效果如下： 过一会儿，再次打开dom002.html，显示效果如下： 注意：例子中的这种JavaScript代码一般只能在网页加载的时候执行，因为网页加载完成后再执行上面的代码，将会冲掉整个HTML文档。 下面的HTML文档dom003.html，实现改变元素值的功能： dom003.html被浏览器打开后，效果如下： 点击“改变”按钮，效果如下： 再次点击新生成的“这是今日头条的链接”，可以发现，通过DOM生成的超级链接，可以被正常使用。 下面的HTML文档dom004.html，实现改变元素属性值的功能： dom004.html被浏览器打开后，效果如下： 点击图片，图片变为黑白版： 再次点击黑白版的图片，又会变为彩色版的图片。 我们对HTML文档dom004.html进行修改，得到HTML文档dom005.html文件： dom005.html被浏览器打开后，效果如下： 此时，我们的鼠标在图片上移来移去，图片没有任何变化。但是，当我们点击“分配事件”按钮后，当鼠标在图片上时，图片为彩色的，鼠标离开图片时，图片为黑白色的。 下面的HTML文档dom006.html，实现向HTML添加元素的功能： dom006.html被浏览器打开后，效果如下： 点击“添加当前时间”按钮，会将点击时的时间显示在界面上。这是点击过几次后的界面显示： 下面的HTML文档dom007.html，实现从HTML删除元素的功能： dom007.html被浏览器打开后，效果如下： 点击“删除条目2”按钮后，效果如下：1、DOM的数据结构表示
2、DOM的作用
3、通过DOM可以改变HTML元素样式
<!DOCTYPE html><html> <head> <title>dom001</title> <meta charset="utf-8" /> <script> function changeStyle(){ paragraph = document.getElementById("paragraph"); paragraph.style.color = "red"; paragraph.style.fontSize = "28px"; } </script> </head> <body> <p id="paragraph">我爱中国</p> <button onclick="changeStyle();">修改样式</button> </body></html>4、通过DOM可以在网页加载时动态显示信息
<!DOCTYPE html><html> <head> <title>dom002</title> <meta charset="utf-8" /> </head> <body> <script> document.write("<h1>"); document.write("当前时间是："); document.write(Date()); document.write("</h1>"); </script> </body></html>5、通过DOM可以改变元素的值
<!DOCTYPE html><html> <head> <title>dom003</title> <meta charset="utf-8" /> <script> function changeContent(){ theBoard = document.getElementById("theBoard"); theBoard.innerHTML = "<a href='头条的网址' target='_blank'>这是今日头条的链接</a>"; } </script> </head> <body> <div id="theBoard">这是普通文本</div> <div><button onclick="changeContent()">改变</button></div> </body></html>6、通过DOM可以改变元素属性的值
<!DOCTYPE html><html> <head> <title>dom004</title> <meta charset="utf-8" /> <script> function changeImg(){ theImg = document.getElementById("theImg"); if (theImg.src.match("dom004_1.jpg")){ theImg.src="dom004_2.jpg"; }else{ theImg.src="dom004_1.jpg"; } } </script> </head> <body> <img id="theImg" src="dom004_1.jpg" onclick="changeImg();"/> </body></html>7、通过DOM可以为元素分配事件
<!DOCTYPE html><html> <head> <title>dom005</title> <meta charset="utf-8" /> <script> function onMouseOverImg(){ theImg = document.getElementById("theImg"); theImg.src="dom004_1.jpg"; } function onMouseOutImg(){ theImg = document.getElementById("theImg"); theImg.src="dom004_2.jpg"; } function buttonClicked(){ theImg = document.getElementById("theImg"); theImg.onmouseover = onMouseOverImg; theImg.onmouseout = onMouseOutImg; } </script> </head> <body> <img id="theImg" src="dom004_2.jpg""/><br> <button onclick="buttonClicked();">分配事件</button> </body></html>8、通过DOM可以向HTML文档中添加元素
<!DOCTYPE html><html> <head> <title>dom006</title> <meta charset="utf-8" /> <script> function buttonClicked(){ timeList = document.getElementById("timeList"); listItem = document.createElement("li"); listItem.innerHTML = Date(); timeList.appendChild(listItem); } </script> </head> <body> <h1>时间列表</h1> <ul id="timeList"> </ul> <button onclick="buttonClicked();">添加当前时间</button> </body></html>9、通过DOM可以从HTML中删除元素
<!DOCTYPE html><html> <head> <title>dom007</title> <meta charset="utf-8" /> <script> function buttonClicked(){ theItem = document.getElementById("item2"); theItem.parentNode.removeChild(theItem); } </script> </head> <body> <h1>条目1</h1> <h1 id="item2">条目2</h1> <h1>条目3</h1> <h1>条目4</h1> <button onclick="buttonClicked();">删除条目2</button> </body></html>
