JavaScript DOM操作详解:元素查找、内容获取与属性管理

0 下载量 140 浏览量 更新于2024-08-28 收藏 57KB PDF 举报
本文档总结了JavaScript中关于Document Object Model (DOM)的基本操作方法,帮助开发者更有效地管理网页文档的结构和内容。主要涉及以下几个方面: 1. 查找元素: - `document.getElementById(id)`:通过元素的唯一ID进行选择,返回匹配的第一个元素。 - `document.getElementsByName(name)`:通过元素的name属性查找,返回所有具有指定name的元素组成的数组。 - `document.getElementsByClassName(className)`:利用类名选择器,返回具有指定类的所有元素的数组。 - `document.getElementsByTagName(tagName)`:通过标签名查找,返回所有指定标签的元素集合,同样为数组形式。 2. 获取内容: - 对于非表单元素,可以使用`a.innerHTML`获取元素内的HTML代码和内容,但仅显示内容。 - 使用`a.innerText`提取纯文本内容,包括代码和内容。 3. 操作属性: - 添加或修改属性:`a.setAttribute('属性名', '属性值')`。 - 获取属性值:`a.getAttribute('属性名')`。 - 删除属性:`a.removeAttribute('属性名')`。 4. 设置样式: - 利用类选择器动态设置元素样式,如`a[o].style.backgroundColor = "red"`,注意此操作仅限于`<body>`内的元素。 5. 相关元素操作: - `nextSibling`:找到当前元素的下一个同级兄弟元素,包括空白节点。 - `previousSibling`:找到当前元素的上一个同级兄弟元素,包含空白节点。 - `parentNode`:获取当前元素的直接父元素。 - `firstChild` 和 `lastChild`:分别表示第一个和最后一个子元素,`childNodes[n]`用于访问第n个子元素。 6. 元素操作: - 创建新元素:`var obj = document.createElement('标签名')`。 - 添加子元素:`a.appendChild(obj)`。 - 删除子元素:`a.removeChild(obj)`。 - 处理下拉列表选项:`a.selectedIndex`获取当前选中的选项索引,`a.options[a.selectedIndex]`获取对应的option对象。 7. 字符串操作: - 字符串转换:`toLowerCase()`将字符串转为小写,`toUpperCase()`转为大写。 - 字符串截取:`substring(startIndex, endIndex)`提取子串,从`startIndex`到`endIndex-1`(不包括)。 通过掌握这些DOM操作方法,开发者能够灵活地处理HTML页面上的内容,实现动态交互效果和数据绑定,提高Web开发效率。