常见的DOM操作有哪些？

Nen 2021-12-20 15:45

- 程序员

1）DOM 节点的获取

DOM 节点的获取的API及使用：

getElementById // 按照 id 查询

getElementsByTagName // 按照标签名查询

getElementsByClassName // 按照类名查询

querySelectorAll // 按照 css 选择器查询

// 按照 id 查询

var imooc = document.getElementById('imooc') // 查询到 id 为 imooc 的元素

// 按照标签名查询

var pList = document.getElementsByTagName('p') // 查询到标签为 p 的集合

console.log(divList.length)

console.log(divList[0])

// 按照类名查询

var moocList = document.getElementsByClassName('mooc') // 查询到类名为 mooc 的集合

// 按照 css 选择器查询

var pList = document.querySelectorAll('.mooc') // 查询到类名为 mooc 的集合

DOM 节点的创建

创建一个新节点，并把它添加到指定节点的后面。已知的 HTML 结构如下：

<html>

<head>

</head>

<body>

</div>

</body>

</html>

要求添加一个有内容的 span 节点到 id 为 title 的节点后面，做法就是：

// 首先获取父节点

var container = document.getElementById('container')

// 创建新节点

var targetSpan = document.createElement('span')

// 设置 span 节点的内容

targetSpan.innerHTML = 'hello world'

// 把新创建的元素塞进父节点里去

container.appendChild(targetSpan)

DOM 节点的删除