标签:efi 名称 获取 doc define 最简 htm rip other
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="Change background color"/>
</body>
</html>
<html>
<body>
<script>
function ChangeBackground(){
document.body.style.backgroundColor="lavender";
}
</script>
<input type="button" onclick="ChangeBackground()" value="Change background color"/>
</body>
</html>
标签:efi 名称 获取 doc define 最简 htm rip other
原文地址:http://www.cnblogs.com/hqutcy/p/5999230.html