day15-Dom直接选择器

一、导语

　　文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。

二、Dom直接选择器

2.1、直接查找标签

1
2
3
4
document.getElementById             根据ID获取一个标签
document.getElementsByName          根据name属性获取标签集合
document.getElementsByClassName     根据class属性获取标签集合
document.getElementsByTagName       根据标签名获取标签集合

2.2、 操作标签

操作的html内容如下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8     <div id="i1">     新内容</div>
 9 
10     <a>aaaa11111</a>
11 
12     <a>aaaa22221</a>
13 
14     <a>aaaa33333</a>
15 
16 </body>
17 </html>

1、document.getElementById

说明：根据ID获取一个标签

document.getElementById("i1")

<div id="i1">     新内容</div>

2、document.getElementsByTagName

说明：根据标签名获取标签集合

 

1 document.getElementsByTagName("a")
2 [
3 <a>​aaaa11111​</a>​
4 , 
5 <a>​aaaa22221​</a>​
6 , 
7 <a>​aaaa33333​</a>​
8 ]

3、标签对象.innerText

说明：获取标签中的文本内容

1 document.getElementById("i1").innerText
2 "新内容"

4、标签对象.innerText = "新值"

说明：获取标签中的文本内容重新赋值 ,在之前跑马灯的栗子中有使用到了

1 document.getElementById("i1").innerText='我很牛逼'
2 "我很牛逼"
3 document.getElementById("i1").innerText
4 "我很牛逼"

 

 

 1 var n=document.getElementsByTagName('a')
 2 undefined
 3 n
 4 [
 5 <a>​aaaa11111​</a>​
 6 , 
 7 <a>​aaaa22221​</a>​
 8 , 
 9 <a>​aaaa33333​</a>​
10 ]

n[0].innerText
"aaaa11111"
n[1].innerText
"aaaa22221"
n[2].innerText
"aaaa33333"

注意了：不能直接通过数组.innerText直接去修改，因为它是一个数据，没有innerText属性，只有字符串有这个属性。

 

posted @ 2018-05-21 15:04  东郭仔  阅读(92)  评论(0)    收藏  举报