DOM元素查找HTML元素

DOM元素

1.查找HTML元素

通常通过javascript ，需要操作HTML元素，可以通过id、类名、标签名来寻找要操作的HTML元素

  1. 1)   通过id来寻找HTML元素

getElementByld(id)这个方法返回一个对象，这个对象对应着document对象里一个独一无二的元素。（实际上，document中的每个元素都是一个对象。利用DOM提供的方法能得到任何一个对象）节点上设置id属性，id应该设置为独一无二的，但是你非得在html节点上加上两个相同的id，chrome上只会返回第一个。一般说来，用不着为文档里的每个元素都定义一个独一无二的对象。DOM提供了另一个方法来获取那些没有id属性的对象。

 

<div  id="demo">Hello JavaScript</div>

 

<script>

 

var  x=document.getElementById("demo");

 

document.write("查找id=demo的元素内容: " + x.innerHTML );

 

</script>

 

  1. 2)   通过标签来寻找HTML元素

getElementsByTagName();getElementsByTagName方法会返回一个对象数组，每个对象分别对应着文档里有着给定标签的一个元素。参数就是文档的标签，比如body、ul、ui等标签。

getElementsByTagName还可以传递通配符* ,它会返回文档里的所有元素节点，document.getElementsByTagName(“*”)。

 

<div  id="demo">

 

<p>Hello  JavaScript</p>

 

<p>通过标签寻找HTML页面中的元素</p>

 

</div>

 

<script>

 

var  x=document.getElementById("demo");

 

var  y=document.getElementByTagName("p");

 

document.write("通过标签p来寻找标签内容: " + y[0].innerHTML );

 

</script>

 

  1. 3)   通过类名找到HTML元素

getElementsByClassName();getElementsByClassName()方法会返回一个对象数组，每个对象分别对应着文档里有着给定标签的一个元素。参数就是文档的标签的class属性值。

 

<div>Hello  JavaScript</div>

 

<script>

 

var x=document.getElementsByClassName("demo");

 

document.write("查找class=demo的元素内容: " + x[0].innerHTML );

 

</script>

 

2.改变HTML元素的内容

修改 HTML 内容的最简单的方法是使用 innerHTML 属性。

 

<p id="demo">Hello  JavaScript!</p>

 

<script>

 

document.getElementById("demo").innerHTML="新文本!";

 

</script>

 

3.改变HTML属性

如需改变 HTML 元素的属性，使用attribute属性

 

<img id="image"  src="image/night.jpg">

 

<script>

 

     document.getElementById("image").src="image/snow.jpg";

 

</script>