js 新增的方法

//querySelector用法
/*它会返回符合结果的第一个ele
*选择器可以.类  标签名  #id [name='name1'] ele.class ele#id 
*还可用,应用多个选择器 
*/
console.log('.a1',document.querySelector('.a1'));
console.log('.a3',document.querySelector('.a3'));
console.log('#id1',document.querySelector('#id1'));
console.log('a',document.querySelector('a'));
console.log('a[class=a1]',document.querySelector('a[class=a1]'))

//querySelectorAll
/*它会返回符合的所有结果
* 选择器和上同
*/
console.log('all .a1',document.querySelectorAll('.a1'));
//选择id
console.log('id1',document.getElementById('id1'))
//类选择器返回所有符合
console.log('classname',document.getElementsByClassName('a1'))
//根据标签name属性返回所有符合
console.log('name',document.getElementsByName('a2'))
//根据标签名返回符合所有
console.log('tagname',document.getElementsByTagName('a'))

/*获取属性值的选择器必须是唯一的
*/
//选择属性值getAttribute()
console.log('getAttribute',document.querySelector('#id1').getAttribute('id'));
//获取data-id
console.log('data-id',document.querySelector('span').getAttribute('data-id'))

//样式操作
var a=document.querySelector('a');
//style.color只能获取到style上的样式，获取不到类上的属性
console.log(a.style.color)
//设置
a.style.color='red';
//新增classname 只能添加一个
a.classList.add('a1b')
a.classList.add('a1c')
//删除classname
a.classList.remove('a1c')
console.log('判断是否引用了a1b',a.classList.contains('a1b'))
//toggle 有删除无添加
a.classList.toggle('a1c')

//宽和高
console.log(a.offsetHeight);
console.log(a.offsetWidth)

//删除标签
var b=document.querySelector('.a2');
b.parentNode.removeChild(b)