操作DOM元素

1.DOM元素的获取元素

1）document.getElementsByClassName ( “class”)
返回集 HTML集合 ,用法和数组一致
说明: class为DOM元素上class属性的值
2）document.getElementById( “id” )
功能:返回对拥有指定ID的第一个对象的引用
返回值: DOM对象
说明: id为DOM元素上id属性的值
3)document.getElementsByName(" name");
返回的是nodelist 类型, 用法和数组一致
说明: name为DOM元素上name属性的值
4)document.getElementsByTagName(“TagName”);
返回的是htmlcollection 集合 , 用法和数组一致
5) document.querySelector(".btnlist");
返回的是集合
document.querySelectorAll("#btn");
获取所有的#btn
6)document.body
可以直接获取body

 

 

　通过ID获取(document.getElementById)

    通过name属性(document.getElementsByName)

    通过标签名(document.getElementsByTagName)

    通过类名(document.getElementsByClassName)

    通过选择器获取一个元素(document.querySelector)

    通过选择器获取一组元素(document.querySelectorAll)

    获取html的方法(document.documentElement)

    document.documentElement是专门获取html这个标签的

    获取body的方法(document.body)

    document.body是专门获取body这个标签的。

 

2. 创建DOM元素

document.createElement('标签')  //创建一个具体的元素

优点: 不会覆盖原有的元素事件

缺点: 对于添加嵌套多的内容操作麻烦

createTextNode() //创建一个文本节点

(2) 添加、移除、替换、插入

appendChild()  // 添加元素

removeChild()  // 删除元素

redplaceChild() // 替换元素

insertBefore() //在已有的子节点前插入一个新的子节点

 

操作元素的样式 【重要】(只可以获取行内样式 不能获取外联样式)

通过元素的style属性操作

 

 

元素.currentStyle.样式     [只支持IE]

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

document