day15-Dom直接选择器

一、导语

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

二、Dom直接选择器

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

2.2、操作标签

操作的html内容如下：

<body>
    <div >我是帅高高，你是傻逼鸿</div>

    <a>傻逼鸿</a>
    <a>shabihong</a>
    <a>honggg</a>
</body>

1、document.getElementById

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

>>document.getElementById("i1")
<div id="i1">我是帅高高，你是傻逼鸿</div>

2、document.getElementsByTagName

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

>>>document.getElementsByTagName('a')
HTMLCollection(3)  [a, a, a]   //返回一个数组

3、标签对象.innerText

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

>>document.getElementById("i1")
<div id="i1">我是帅高高，你是傻逼鸿</div>
>>document.getElementById("i1").innerText  //获取标签中的文本内容
"我是帅高高，你是傻逼鸿"

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

说明：获取标签中的文本内容重新赋值

>>document.getElementById("i1")
<div id="i1">我是帅高高，你是傻逼鸿</div>
>>document.getElementById("i1").innerText
"我是帅高高，你是傻逼鸿"
>>document.getElementById("i1").innerText = "新内容"  //重新赋值
"新内容"

2.3、循环多个元素的标签

说明：只要是Elements，表示获取多个元素(返回一个数组)

>>document.getElementsByTagName('a')
HTMLCollection(3) [a, a, a]0: a1: a2: alength: 3__proto__: HTMLCollection
>>document.getElementsByTagName('a')[0].innerText
"傻逼鸿"
>>document.getElementsByTagName('a')[1].innerText
"shabihong"
>>document.getElementsByTagName('a')[2].innerText
"honggg"
>>tag = document.getElementsByTagName('a')
HTMLCollection(3) [a, a, a]
>>for(var i=0;i<tag.length;i++){tag[i].innerText=777} //循环修改数组中的值
777

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

一、导语

二、Dom直接选择器

2.2、 操作标签

2.2、操作标签