码迷,mamicode.com
首页 > Web开发 > 详细

HTML DOM学习之二

时间:2016-10-29 11:53:11      阅读:166      评论:0      收藏:0      [点我收藏+]

标签: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>

 

HTML DOM学习之二

标签:efi   名称   获取   doc   define   最简   htm   rip   other   

原文地址:http://www.cnblogs.com/hqutcy/p/5999230.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!