首页 > 代码库 > HTML DOM学习之二
HTML DOM学习之二
1.HTML DOM属性：
**innerHTML属性-获取元素内容的最简单方法是使用innerHTML属性，innerHTML属性对于获取或替换HTML元素的内容很有用
<html>
<body>
<p id="intro">Hello world!</p>
<script>
var txt=document.getElementById("intro").innerHTML;
document.write(txt);
</script>
</body>
</html>
2.nodeName属性规定节点的名称：
**nodeName是只读的；
**元素节点的nodeName与标签名相同；
**属性节点的nodeName与属性名相同；
**文本节点的nodeName始终是#text
**文档节点的nodeName始终是#document
3.nodeValue属性：
**元素节点的nodeValue是undefine或null；
**文本节点的nodeValue是文本本身；
**属性节点的nodeValue是属性值；
<html>
<body>
<p id="intro">Hello world!</p>
<script type="text/javascript">
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script>
</body>
</html>
4.访问HTML元素（节点）：
**通过使用getElementById()方法：返回带有指定ID的元素
document.getElementById("intro");
语法：node.getElementById("id");
**通过使用getElementsByTagName()方法：返回带有指定标签名的所有元素
document.getElementByTagName("p");
document.getElementById("main").getElemetstByTagName("p");
语法：node.getElementsByTagName("tagname");
**通过使用getElementByClassName()方法：返回带有相同类名的所有HTML元素
5.HTML DOM 修改：改变HTML内容，改变CSS样式，改变HTML属性，创建新的HTML元素，删除已有的HTML元素，改变事件（处理程序）
**创建HTML内容：改变元素内容最简单的方法就是使用innerHTML属性
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
</body>
</html>
**改变HTML样式：通过HTML DOM，能够访问HTML元素的样式对象；
<html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
</script>
</body>
</html>
**创建新的HTML元素：必须首先创建该元素（元素节点），然后把它追加到已有元素上
<div id="d1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph</p>
</div>
<script>
var para=document.createrElement("p");
var node=document.creatTextNode("This is new.");
para.appendChild(node);
var element=document.getElementById("d1");
element.appendChild(para);
</script>
6.修改HTML内容：改变元素内容的最简单的方法就是使用innerHTML属性；
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
</body>
</html>
7.改变HTML样式：通过HTML DOM，能够访问HTML对象的样式对象；
<html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
</script>
</body>
</html>
8.使用事件：HTML DOM允许您在事件发生时执行代码；当HTML元素“有事件发生”时，浏览器就会生成事件：
**在元素上点击
**加载页面
**改变输入字段
<html>
<body>
<input type="button" onclick="document.body.style.backgroundColor=‘lavender‘;" value="http://www.mamicode.com/Change background color"/>
</body>
</html>
<html>
<body>
<script>
function ChangeBackground(){
document.body.style.backgroundColor="lavender";
}
</script>
<input type="button" onclick="ChangeBackground()" value="http://www.mamicode.com/Change background color"/>
</body>
</html>
HTML DOM学习之二