JS如何操作DOM（二）

结合上一篇，我们来使用JS获取DOM

    <div id="div-dom">1111</div>
    <div class="class-dom">我是class1</div>
    <div class="class-dom">我是class2</div>
    <div class="class-dom">我是class3</div>
    <div name="name-dom">3333</div>

我们如何获取这些元素呢？
尝试使用 document.getElementById(idName) 来获取id名为'div-dom'

var idname=document.getElementById('div-dom');  //将id名'div-dom'写入括号内
console.log(idname);

打印结果为

id.png

成功获取到了id名为'div-dom'的元素

document.getElementsByClassName(className)

var classname=document.getElementsByClassName('class-dom');  //将class名'class-dom'写入括号内
console.log(classname);

打印结果为 class.png

我们发现使用class最后的结果是一个数组，那我们怎么找到指定的某个元素呢？
注意事项
document.getElementsByClassName() 获取到的元素是一个伪数组，必须给指定的下标才能找到指定的元素。
**我们试试传入下标，比如我们要找到里面的第2个元素，那么下标就是1，应该是

var classname=document.getElementsByClassName('class-dom');  //将class名'class-dom'写入括号内
console.log(classname[1]);

我们再看看打印的结果

class1.png

这就拿到我们想要的结果了
大家一定要注意，使用getElementsByClassName()，获取指定的元素，一定要写入下标。

接下来是最后一个使用name属性值来获取元素
document.getElementsByName(name属性值)

var divname=document.getElementsByName('name-dom');
console.log(divname[0]);

使用name获取跟使用class获取是一样的，都需要获取下标才能获取到指定的数组

name.png