当前位置: 首页 > 最新文章 > 正文

html百度百科(html教程)

DOM由W3C制定,定义了访问XML文档和HTML文档的标准,我们这里只讲解HTML DOM。DOM为前端开发者提供了如下的编程接口:对页面的事件进行响应;查询HTML元素;修改HTML元素、属性、CSS样式;删除HTML元素;添加HTML元素。正是因为DOM的存在,才使得JavaScript如虎添翼。DOM是Document Object Model的缩写,即“文档对象模型”的缩写。DOM由W3

admin

DOM由W3C制定,定义了访问XML文档和HTML文档的标准,我们这里只讲解HTML DOM。DOM为前端开发者提供了如下的编程接口:对页面的事件进行响应;查询HTML元素;修改HTML元素、属性、CSS样式;删除HTML元素;添加HTML元素。正是因为DOM的存在,才使得JavaScript如虎添翼。


DOM介绍

DOM是Document Object Model的缩写,即“文档对象模型”的缩写。

DOM由W3C(World Wide Web Consortium,万维网联盟)制定,定义了访问XML文档和HTML文档的标准,我们这里只讲解HTML DOM。

1、DOM的数据结构表示

DOM是HTML文档的对象模型。

一个HTML文档中的所有元素,通过DOM,可以表示成一个个的对象,并且这些对象之间的关系可以用树形数据结构来表示。

例如,下面是某个HTML文档的数据结构:


DOM介绍


在DOM的概念里,整个HTML文档是一个Document对象,HTML中的元素是Document对象的成员对象。

2、DOM的作用

DOM的本质作用,是提供了对HTML文档的编程接口。

DOM为前端开发者提供了如下的编程接口:

(1)对页面的事件进行响应;

(2)查询HTML元素;

(3)修改HTML元素、属性、CSS样式;

(4)删除HTML元素;

(5)添加HTML元素。

正是因为DOM的存在,才使得JavaScript如虎添翼。

3、通过DOM可以改变HTML元素样式

下面的HTML文档dom001.html,通过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>

dom001.html被浏览器打开后,效果如下:


DOM介绍


当点击“修改样式”按钮后,页面变为:


DOM介绍


4、通过DOM可以在网页加载时动态显示信息

下面的HTML文档dom002.html,实现每次加载文件时,都显示当前的时间:

<!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>

dom002.html被浏览器打开后,效果如下:


DOM介绍


过一会儿,再次打开dom002.html,显示效果如下:


DOM介绍


注意:例子中的这种JavaScript代码一般只能在网页加载的时候执行,因为网页加载完成后再执行上面的代码,将会冲掉整个HTML文档。

5、通过DOM可以改变元素的值

下面的HTML文档dom003.html,实现改变元素值的功能:

<!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>

dom003.html被浏览器打开后,效果如下:


DOM介绍


点击“改变”按钮,效果如下:


DOM介绍


再次点击新生成的“这是今日头条的链接”,可以发现,通过DOM生成的超级链接,可以被正常使用。

6、通过DOM可以改变元素属性的值

下面的HTML文档dom004.html,实现改变元素属性值的功能:

<!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>

dom004.html被浏览器打开后,效果如下:


DOM介绍


点击图片,图片变为黑白版:


DOM介绍


再次点击黑白版的图片,又会变为彩色版的图片。

7、通过DOM可以为元素分配事件

我们对HTML文档dom004.html进行修改,得到HTML文档dom005.html文件:

<!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>

dom005.html被浏览器打开后,效果如下:


DOM介绍


此时,我们的鼠标在图片上移来移去,图片没有任何变化。但是,当我们点击“分配事件”按钮后,当鼠标在图片上时,图片为彩色的,鼠标离开图片时,图片为黑白色的。

8、通过DOM可以向HTML文档中添加元素

下面的HTML文档dom006.html,实现向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>

dom006.html被浏览器打开后,效果如下:


DOM介绍


点击“添加当前时间”按钮,会将点击时的时间显示在界面上。这是点击过几次后的界面显示:


DOM介绍


9、通过DOM可以从HTML中删除元素

下面的HTML文档dom007.html,实现从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>

dom007.html被浏览器打开后,效果如下:


DOM介绍


点击“删除条目2”按钮后,效果如下:


DOM介绍


上一篇: 核心词汇promise用法分析 下一篇:repair拼写prepare是什么单词(prepare是什么单词)
返回顶部