javascript考点 —— DOM操作

一、什么是DOM?

DOM（Document、Object、Model）文档对象模型。

1、DOM的本质

它的数据结构就是树。HTML是XML的一种特殊类型。DOM的本质就是将HTML进行了结构化，结构化成了JS可识别的东西和浏览器可识别的东西。

二、DOM节点操作

DOM可以理解为：浏览器把拿到的html代码，结构化一个浏览器能识别并且js可操作的一个模型而已。

1、获取DOM节点

var div1 = document.getElementById('div1')
var divList = document.getElementsByTagName('div')   //集合
var containerList = document.getElementsByClassName('.container')  //集合
var pList = document.querySelectorAll('p')     //集合

2、property（属性）

property就是js对象的属性。

    var pList = document.querySelectorAll('p')
    var p = pList[0]
    console.log(p.style.width)   //获取样式
    p.style.width = '100px'      //修改样式
    console.log(p.className)    //获取class
    p.className = 'p1'          //修改class
    console.log(p.nodeName)      //获取nodeName
    console.log(p.nodeType)      //获取nodeType

3、Attribute

这里获得的属性不是js对象的属性，而是文档中的属性。Attribute修改的是html文档标签的属性。

    var pList = document.querySelectorAll('p')
    var p = pList[0]
    p.getAttribute('data-name')
    p.setAttribute('data-name','imooc')
    p.getAttribute('style')
    p.setAttribute('style','font-size:30px;')

三、DOM结构操作

DOM结构就是一个树。

1、新增节点

    var div1 = document.getElementById('div1')
    //添加新节点
    var p1 = document.createElement('p')
    p1.innerHTML = 'this is p1'
    div1.appendChild(p1)     //添加新创建的元素
    //移动已有节点
    var p2 = document.getElementById('p2')
    div1.appendChild(p2)

2、获取父元素

    var div1 = document.getElementById('div1')
    //获取父元素
    var parent = div1.parentElement

3、获取子节点

    var div1 = document.getElementById('div1')
    //获取子节点
    var child = div1.childNodes

4、删除节点

    var div1 = document.getElementById('div1')
    //获取子节点
    var child = div1.childNodes
    //移除div1的第一个子节点
    div1.removeChild(child[0])

四、问题解答

DOM是哪种基本的数据结构

解答：树

DOM操作的常用的API有哪些

解答：获取DOM节点，以及节点的property和Attribute。获取父节点，获取子节点。新增节点，删除节点。

DOM节点的atrr和property有何区别

解答：property只是一个JS对象的属性获取和修改。Attribute是对html标签属性的修改。

javascript考点 —— DOM操作

猜你喜欢