JavaScript之DOM获取

document 整个html文档

<div onclick="myclick()">
        <a href="http://www.baidu.com" class="bd red-text text-center" id="baidu" target="_blank"><span>百度一下</span></a>
    </div>

1.通过id查找标签

var a_ele = document.getElementById('baidu')

2.获取标签内的文本

a_ele.text

3.获取标签内嵌套的所有标签

a_ele.innerHTML
//重新赋值
a_ele.innerHTML = '<strong>百度一下</strong>'

4.获取标签的属性数组

attr = a_ele.attributes
        // 遍历标签的属性数组
for(idx in attr){
        // 取出每个属性
    at = attr[idx]
        // 属性名称
    console.log(at.name)
        // 属性值
    console.log(at.value)
        }

5.获取标签的某个属性值,如果有该属性返回属性值 没有返回null

a_ele.getAttribute('name')

6. 设置标签的某个属性值

// 1.设置的属性名  2.属性对应的值
// 如果有这个属性,做修改的操作,没有该属性做添加的操作
a_ele.setAttribute('name','bd')

7.删除某个属性

a_ele.removeAttribute('name')

8. 判断是否有某个属性 有该属性 返回true 没有就返回false

a_ele.hasAttribute('href')

9.添加class属性

a_ele.classList.add('bdyx')

10.删除某个class属性值

 a_ele.classList.remove('bd')

11. 判断class中是否包含某个class名称

// 有该class名称  返回true  没有 返回false
a_ele.classList.contains('bd')

12,如果有class,就删除 如果没有就添加

a_ele.classList.toggle('name')

13. 标签设置快捷访问方式

// Shift + alt +
        a_ele.accessKey = 'p'

14.修改样式

//getElements 找多个标签,返回是列表
var div = document.getElementsByTagName('div')[0]
        //修改div的样式
        div.style.backgroundColor = 'blue'
        div.style.height = '400px'
        div.style.border = '2px red solid'