文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构(节点树)。
一、通过id获取元素
学过HTML/CSS样式,都知道,网页由标签将信息组织起来,而标签的id属性值是唯一的,就像是每人有一个身份证号一样,只要通过身份证号就可以找到相对应的人。那么在网页中,我们通过id先找到标签,然后进行操作。
语法:
document.getElementById(“id”)
二、innerHTML熟悉
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DOM操作</title> </head> <body> <h1 id="con">javascript</h1> <script type="text/javascript"> /* innerHTML 属性用于获取或替换 HTML 元素的内容。 语法: Object.innerHTML 注意: 1.Object是获取的元素对象,如通过document.getElementById("ID")获取的元素。 2.注意书写,innerHTML区分大小写。 */ var mychar = document.getElementById("con"); document.write("原标题:" + mychar.innerHTML + "<br>"); mychar.innerHTML = "JAVASCRIPT"; document.write("修改后的标题:" + mychar.innerHTML); </script> </body> </html> 三、改变 HTML 样式<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DOM操作</title> </head> <body> <h1 id="con">javascript</h1> <script type="text/javascript"> /* innerHTML 属性用于获取或替换 HTML 元素的内容。 语法: Object.innerHTML 注意: 1.Object是获取的元素对象,如通过document.getElementById("ID")获取的元素。 2.注意书写,innerHTML区分大小写。 */ var mychar = document.getElementById("con"); document.write("原标题:" + mychar.innerHTML + "<br>"); mychar.innerHTML = "JAVASCRIPT"; document.write("修改后的标题:" + mychar.innerHTML); /* 改变 HTML 样式 HTML DOM 允许 JavaScript 改变 HTML 元素的样式。如何改变 HTML 元素的样式呢? 语法: Object.style.property=new style; 注意:Object是获取的元素对象,如通过document.getElementById("id")获取的元素。 基本属性表(property):注意:该表只是一小部分CSS样式属性,其它样式也可以通过该方法设置和修改。 */ mychar.style.color="red"; mychar.style.backgroundColor="#ccc"; mychar.style.width="300px" </script> </body> </html>
四、显示和隐藏(display属性)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DOM操作</title> </head> <body> <h1 id="con">javascript</h1> <script type="text/javascript"> /* innerHTML 属性用于获取或替换 HTML 元素的内容。 语法: Object.innerHTML 注意: 1.Object是获取的元素对象,如通过document.getElementById("ID")获取的元素。 2.注意书写,innerHTML区分大小写。 */ var mychar = document.getElementById("con"); document.write("原标题:" + mychar.innerHTML + "<br>"); mychar.innerHTML = "JAVASCRIPT"; document.write("修改后的标题:" + mychar.innerHTML); /* 改变 HTML 样式 HTML DOM 允许 JavaScript 改变 HTML 元素的样式。如何改变 HTML 元素的样式呢? 语法: Object.style.property=new style; 注意:Object是获取的元素对象,如通过document.getElementById("id")获取的元素。 基本属性表(property):注意:该表只是一小部分CSS样式属性,其它样式也可以通过该方法设置和修改。 */ mychar.style.color="red"; mychar.style.backgroundColor="#ccc"; mychar.style.width="300px" /* 显示和隐藏(display属性) 网页中经常会看到显示和隐藏的效果,可通过display属性来设置。 语法: Object.style.display = value 注意:Object是获取的元素对象,如通过document.getElementById("id")获取的元素。 value取值:
*/ function hidetext(){ var mychar = document.getElementById("p"); mychar.style.display = "none"; } function showtext(){ var mychar = document.getElementById("p"); mychar.style.display = "block"; }
/* 控制类名(className 属性) className 属性设置或返回元素的class 属性。 语法: object.className = classname var p1 = document.getElementById("p1"); p1.className="one"; 作用: 1.获取元素的class 属性 2. 为网页内的某个元素指定一个css样式来更改该元素的外观 */</script>
<p id="p" style="color: #35ab1d;background-color: antiquewhite;width: 200px">大家好我是军哥!</p>
<form>
<input type="button" οnclick="hidetext()" value="隐藏内容" />
<input type="button" οnclick="showtext()" value="显示内容" />
</form></body></html>