JavaScript的DOM操作1
其他
2020-09-09 12:33:00
阅读次数: 0
1 获取元素对象与内容
- 获取id元素对象
- document.getElementById(“id值”)
- 返回对象
- 特点：获取到的是唯一元素，可以直接使用
- 通过元素名称获取元素对象
- document.getElementsByTagName(“标签名”)
- 返回dom对象集合
- 特点：获取到的是一个类数组的集合，通过下标值访问元素
- 通过类名获取元素对象
- document.getElementsByClassName(“类名”)
- 返回 dom对象集合
- 特点：获取的是所有class="box"元素所组成的一个类数组集合，
通过下标值访问，IE6,7,8不兼容
- 通过name来获取元素对象
- document.getElementsByName(“name值”)
- 返回dom对象集合
- 特点：获取的是所有name="box"元素所组成的一个类数组集合，
通过下标值访问，常见于表单元素
- 通过选择器名称获取元素对象
- document.querySelector(“选择器”)
- 返回第一个dom元素对象
- 特点：括号里写CSS3选择器,获取的是选择器指定的元素,可以直接使用如果选择器指向多个元素,则选定第一个。低版本浏览器不兼容。
- 通过选择器名称获取元素对象
- document.querySelectorAll(“选择器”)
- 返回所有dom元素对象，dom对象集合
- 获取标签内容
- dom对象.innerHTML
- dom对象.innerText
- 替换: 标签一起修改
- dom对象.outerHTML
- dom对象.outerText
- 获取表单内容
- 获取类样式(eg:带px,需parseInt)
- window.getComputedStyle(DOM对象 ).样式名称
2 节点查找
2.1 父子（层级）间查找
- 子节点查找父节点：子节点对象.parentNode；
- 父节点查找子节点：
1） 查找第一个子节点：父节点.firstChild 或父节点对象.firstElementChild
父节点对象.lastElementChild ；
2）查找最后一个子节点：父节点.lastChild 或 父节点对象.lastElementChild ；
3）查找下标为i的子节点：父节点.childNodes[i] 。
2.2 兄弟（同级）间查找
- 节点对象.nextSibling 查找下一个兄弟节点 可能会查找到文本节点
- 节点对象.nextElementSibling 查找到下一个元素节点
- 节点对象.previousSibling 查找上一个兄弟节点 可能会查找到文本节点
- 节点对象.previousElementSibling 查找到上一个元素节点
3 节点操作
- 创建元素节点:document.createElement(“元素名称”);
- 追加元素节点
- 把节点追加到父节点对象的内部最后：父节点对象.appendChild(节点)
- 把节点对象追加到body内部最后:document.body.appendChild(节点)
- 节点插入
- 在参照节点之前插入新节点：父节点对象.insertBefore(插入新节点，参照节点)
- 节点克隆：节点对象.cloneNode(参数)
参数：可选 默认false 不克隆后代
若为true，克隆自身内容与后代
- 节点删除：1）父节点对象.removeChild(节点对象) ； 2）节点对象.remove() 兼容性差
- 节点替换
父节点对象.replaceChild(参数1，参数2)
参数1：用来替换的新节点
参数2：被替换的老节点
4操作表格
- 创建表：document.createElement(“table”)
- 插入行： table对象.insertRow(下标)
- 插入单元格：行对象.insertCell(下标)
- 查找行：table对象.rows[下标]
- 查找单元格：行对象.cells[下标]或table对象.rows[i].cells[j] i,j均为下标
- 删除行：table对象.deleteRow(下标)
- 删除单元格行对象.deleteCell(下标)或table对象.rows[i].deleteCell(下标)
5 属性操作
- 获取：dom对象.getAttribute(“属性名”)
- 设置：dom对象.setAttribute(“属性名”,“属性值”)
- 删除：dom对象.removeAttribute(“属性名”)
转载自blog.csdn.net/qq_40994735/article/details/108062573