DOM获取元素

如何获取页面元素：

1根据id获取 

2.根据标签名获取 

3.通过HTML5新增的方式获取 

4特殊元素获取

获取标签 - 我们操作文档的时候，其实大多数情况都是在操作html的标签

console.log(btn); // 通过id名可以直接获取到标签

但是id名会有误差，比如id名叫var，在js中无法使用

一，获取标签的方式

1.通过标签id名 - document.getElementById('id名')

<button id="btn">按钮</button>
<button id="var">按钮</button>
<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div class="box">盒子3</div>


var btn = document.getElementById('var')
console.log(btn);

2.通过类名 - document.getElementsByClassName('类名')

获取到的是所有类名是指定的类名的标签组成的一个集合

<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div class="box">盒子3</div>

var box = document.getElementsByClassName('box')
console.log(box);
console.log(box[0]);
获取到的集合 - 伪数组，不是数组，但是可以像数组一样取下标，有长度，
可以遍历 - 但是不能使用数组的方法  例如：box.push(111) 报错

 3.通过标签名 - document.getElementsByTagName('标签名') - 获取到的是伪数组集合

<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div class="box">盒子3</div>

var divs = document.getElementsByTagName('div')
console.log(divs);

 4.通过name属性来获取标签 - document.getElementsByName('name属性的值')

<input type="text" name="username">

<input type="radio" name="sex">男
<input type="radio" name="sex">女

var username = document.getElementsByName('username')
console.log(username);


// var sexes = document.getElementsByName('sex')
// console.log(sexes);

 5.通过css选择器来获取一个标签 - document.querySelector('css选择器')

var username = document.querySelector('[name="username"]')

console.log(username);



// var div = document.querySelector('div')

// console.log(div);



// var box = document.querySelector('.box')

// console.log(box);



// var btn = document.querySelector('#var')

// console.log(btn);

 6.通过css选择器选择所有满足选择器的标签 - document.querySelectorAll('css选择器')

var divs = document.querySelectorAll('div')

console.log(divs);

/