2018.09.29 学习笔记 // 前端Javascript // BOM与DOM

题目：

DOM是哪种基本的数据结构？：树
DOM操作的常用的API有哪些？
DOM节点的attr和property有何区别？

知识点：

DOM本质
- 将HTML结构化
DOM节点操作
- 获取DOM节点
- property //属性 —— js的属性
- Attribute //特性 —— HTML文档的属性

//获取DOM节点
var div1 = document.getElementById('div1') //元素
var divList = document.getElementsByTagName('div') //集合
console.log(divListl.length)
console.log(divList[0])

var containerList = document.getElementsByClassName('.container') //集合
var pList = document.querySelectorAll('p') // 集合

//property
var pList = document.querySelectorAll('p')
var p = pList[0]
console.log(p.style.width)
p.style.width = '100px'
console.log(p.className)
p.className = 'p1'
//获取nodeName和nodeType
console.log(p.nodeName)
console.log(p.nodeType)

//Attribute
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结构操作
- 新增节点
- 获取父节点
- 获取子节点
- 删除节点

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

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

//删除节点
div1.removeChild(child[0])

<html>
<body>
    <div id = 'div1'>
        <p id = 'p1'>this is p1</p>
        <p id = 'p2'>this is p2</p>
    </div>
    <div id = 'div2'>
        <p id = 'p3'>this is p3</p>
        <p id = 'p4'>this is p4</p>
    </div>

    <script type='text/javascript'>
        var p4 = document.getElementById('p4')
        var div1 = document.getElementById('div1')

        console.log(p4.parentElement)
        console.log(div1.parentElement)
        console.log(div1.childNodes)
        console.log(div1.childNode[0].nodetype) //text 3  node类型
        console.log(div1.childNode[1].nodetype) //p    1
        console.log(div1.childNode[0].nodeName) //text #text  node名字
        console.log(div1.childNode[1].nodeName) //p    P
        var childNode = div1.childNodes
        div1.removeChild(childNodes[1]) //在这里如果获取0是undefined？
    </script>
</body>
</html>

解答：

DOM是哪种基本的数据结构？：树
DOM操作的常用的API有哪些？
- 获取DOM节点，以及节点的property和Attribute
- 获取父节点，获取子节点
- 新增节点，删除节点
DOM节点的attr和property有何区别？
- property只是一个JS对象的属性
- Attribute是对HTML标签属性的修改

2018.09.29 学习笔记 // 前端Javascript // BOM与DOM

猜你喜欢