详解JavaScript DOM元素获取与添加实例与区别

63 浏览量更新于2024-09-01 收藏 57KB PDF 举报

"本文将深入讲解JavaScript中的DOM元素获取与添加技术。首先，DOM(Document Object Model)是HTML和XML文档的编程接口，它允许开发者以对象方式操作网页内容。在JavaScript中，有多种方法用于获取和添加DOM元素。 1. `document.getElementById(id)`：此方法通过元素的唯一ID来定位一个DOM元素。ID应该是全局唯一的，返回的是匹配的第一个元素。 2. `document.getElementsByClassName(className)`：此函数接收一个类名作为参数，返回所有具有该类名的元素集合，类似数组，但不是真正的数组，因此需要转换才能进行索引操作。 3. `document.getElementsByTagName(tagName)`：通过标签名获取元素，返回的是一个包含所有匹配标签的所有子元素的NodeList对象，同样不是真正的数组，处理时需要注意。 4. `document.querySelector(selector)` 和 `document.querySelectorAll(selector)`：这两个方法使用CSS选择器来获取单个元素或匹配到的所有元素。`querySelector` 返回第一个匹配的元素，而 `querySelectorAll` 返回所有匹配的元素集合。 ES6引入的选择器API与传统方法的主要区别在于性能和灵活性。`getElementsByTagName` 和 `getElementsByClassName` 返回的都是动态列表，当DOM结构发生变化时，需要重新获取以确保结果正确。而 `querySelectorAll` 返回的是静态列表，即使DOM结构变化，不会实时更新，如果需要监听动态变化，可能需要额外处理。在示例中，我们使用了HTML中的一个ul元素，通过`getElementsByTagName`和`querySelectorAll`获取了所有的li元素，并展示了它们的数量。接着，通过`querySelector`动态添加了一个新的li元素到ul中，这体现了DOM操作的动态性。掌握这些DOM操作技巧对于前端开发人员来说至关重要，无论是为了创建交互式的用户界面，还是进行数据绑定和事件处理，理解并熟练运用这些方法都能提高开发效率和代码质量。"

Javascript Dom元素获取和添加详解元素获取和添加详解

主要介绍了Javascript Dom元素获取和添加详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具

有一定的参考学习价值,需要的朋友可以参考下

1.Dom元素的获取元素的获取

document.getElementById()：通过id获取一个Dom元素

document.getElementsByClassName()：通过class名字获取一个或多个Dom元素（伪数组）

document.getElementsByTagName()：通过标签名字获取一个或多个Dom元素（伪数组）

document.querySelector()：获取指定 CSS 选择器的一个元素

document.querySelectorAll()：获取指定 CSS 选择器的多个元素（伪数组）

ES6选择器与其他选中器的区别：

document.getElementsByTagName()和document.getElementsByClassName()获取到的都是动态列表

document.querySelectorAll()获取到的是静态列表,Dom结构发生变化要重新获取，不然会出问题

<!DOCTYPE html>

<html>

<head>

</head>

<style>

*{padding: 0;margin: 0;}

</style>

<body>

<ul>

</ul>

</body>

</html>

var lis = document.getElementsByTagName('li')

var liByQuery = document.querySelectorAll('li')

console.log(lis.length) // 4

console.log(liByQuery.length) // 4

// 动态添加li标签

document.querySelector('ul').innerHTML += "<li class='test'>5</li>"

console.log(lis.length) // 5

console.log(liByQuery.length) // 4

</script>

document.getElementsByTagName()和document.getElementsByClassName()获取到的是 HTMLCollection，不能使用

foreach()遍历

document.querySelectorAll()获取到的NodeList，可以使用foreach()遍历

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<ul>

</ul>

</body>

</html>

var li = document.getElementsByTagName('li')

var li2 = document.getElementsByClassName('test')

var li3 = document.querySelectorAll('li')

var li4 = document.querySelector('ul').children

console.log(li) // HTMLCollection(4) [li.test, li.test, li.test, li.test]

console.log(li2) // HTMLCollection(4) [li.test, li.test, li.test, li.test]

下载后可阅读完整内容，剩余4页未读，立即下载

weixin_38748580

粉丝: 6
资源: 941

详解JavaScript DOM元素获取与添加实例与区别

详解JavaScript DOM元素获取与ES6选择器差异

javascript DOM操作入门与元素添加详解

JavaScript DOM元素选取方法详解

JavaScript DOM元素常见操作详解【添加、删除、修改等】

JavaScript Dom 绑定事件操作实例详解

JavaScript DOM操作：查找元素详解

JavaScript DOM操作详解：获取元素技巧

JavaScript DOM操作入门：节点与元素添加详解

JavaScript DOM事件监听：addEventListener详解

JavaScript DOM操作与事件应用详解

最新资源