JS中的节点操作
发布时间
阅读量：
阅读量
创建节点
create系列方法创建节点
| 方法 | 功能 |
|---|---|
| document.createElement（） | 创建一个元素节点 |
| document.createTextNode（） | 创建一个文本节点 |
| document.createDocumentFragment（） | 创建一个文档片段 |
| document.createattribute（） | 创建一个属性节点 |
| document.createComment（） | 创建一个注释节点 |
高效创建节点的方法
| 方法 | 功能 |
|---|---|
| innerHTML | 设置（写模式）或获取（读模式）当前标签的起始和结束里面的内容 |
| outerHTML | 设置（写模式）或获取（读模式）调用它的元素及所有子节点的HTML标签和文本 |
| innerText | 读模式：获取调用的它元素的所有子节点的文本。写模式：设置调用它的元素的所有的子节点 |
| outerText | 读模式：获取调用它的元素及所有子节点的文本。写模式：设置调用它的元素及所有的子节点 |
- 使用innerHTML的限制
| 限制 |
|---|
| 不同的浏览器返回的文本格式不同，IE和Opera会将所有的标签转化为大写形式。而Chrome、Safari、Firefox则会按照原本格式返回，包括空格和缩进 |
| 字符串的最左边不能出现空白，IE6-8会自动移除掉它 |
| 大多数浏览器不会对innerHTML插入的script标签进行脚本操作。IE8及更早版本可以执行，但是要满足2个条件，一是必须为script标签添加defer属性，二是script标签必须要在有作用域的元素之后 |
| IE6-8中不能单独创建meta、style、link等元素，一定要在前面加上一些字符 |
- 兼容性问题
| 操作 | 兼容性 |
|---|---|
| outerHTML | IE4+、Safari4+、Chrome、Opera8+、Firefox8+ |
| innerText | IE4+、Safari3+、Chrome、Opera8+、Firefox不支持 |
| outerText | IE4+、Safari3+、Chrome、Opera8+、Firefox不支持 |
查找节点
节点遍历
- 查找节点的API
| 描述 | API |
|---|---|
| 父节点查找第一个子节点 | firstChild |
| 父节点查找最后一个子节点 | lastChild |
| 父节点查找第n个子节点 | childNodes[n] 、 childNodes.item（n） |
| 子节点查找父节点 | parentNode |
| 查找后面的兄弟节点 | nextSibling |
| 查找前面的兄弟节点 | previousSibling |
| 查找document（文档节点） | ownerDocument |
- 元素节点的API
| 描述 | API |
|---|---|
| 父节点查找第一个子节点 | firstElementChild |
| 父节点查找最后一个子节点 | lastElementChild |
| 父节点查找第n个子节点 | children[n] |
| 查找后面的兄弟节点 | nextElementSibling |
| 查找前面的兄弟节点 | previousElementSibling |
| 补充 |
|---|
| document.documentElement可以返回文档的根节点 |
| tagName属性可以返回元素的标签名 |
| 可以通过hasChildNodes（）方法来确认元素是否含有子节点，返回值为true，则有。返回值为false，则没有 |
| 要注意空格也算文本节点 |
- 类数组对象Nodelist
| 描述 |
|---|
| 每个节点都有childNodes属性，里面保存了一个Nodelist对象 |
| Nodelist是一种类数组对象，用于保存一组有序节点 |
| 可以通过方括号语法来访问Nodelist的值，也有item（）方法和length属性 |
| 类数组对象并不是Array的实例，没有数组对象的方法 |
- 类数组对象HTMLCollection
| 操作 | 描述 |
|---|---|
| Element.getElementsByTagName（） | 返回标签名与参数相同的标签 |
| documents.scripts | 返回页面全部script标签 |
| documents.links | 返回页面全部的a链接 |
| documents.images | 返回页面全部的图像 |
| documents.forms | 返回页面全部的表单 |
| tr.cells | 返回调用它的tr元素的所有td子元素 |
| select.options | 返回这个select的全部选项 |
（这只是部分操作）
这些操作返回的都是一个类数组对象HTMLCollection，这个对象可以通过方括号语法访问内部的值，也有length属性、item（）方法和nameItem（）方法，nameItem（）方法是返回id或name与参数相同的元素，优先返回id值相同的元素，如果没有id值相同的，则返回第一个name值与参数相同的元素。
-类数组对象NamedNodeMap
语法：Element.attribute
返回的就是一个NamedNodeMap类数组对象，这个对象可以通过方括号语法访问内部的值，里面包含的是该元素的属性。同样具有length属性和item（）方法。
- 类数组对象的动态性
| 描述 |
|---|
| Nodelist、HTMLCollection、NamedNodeMap三个集合都是动态的，是有生命、有呼吸的对象 |
| 它们实际上是基于DOM结构动态执行查询的结果，因此DOM结构的变化能够自动反映在这些对象中 |
| 每当文档结构发生变化时，它们都会得到更新。因此，它们始终都会保存着最新、最准确的信息 |
节点查找
- 节点查找的方法
| 方法 | 描述 | 由谁调用 |
|---|---|---|
| getElementById（） | 返回id与参数相同的元素 | document |
| getElementsByName（） | 返回所有name值与参数相同的元素 | document |
| getElementsByTagName（） | 返回所有标签名与参数相同的元素 | document |
| getElementsByClassName（） | 返回所有Class值与参数相同的元素 | Element、document |
| querySelector（） | 返回文档中匹配指定CSS选择器的一个元素 | Element、document |
| querySelectorAll（） | 返回文档中匹配指定CSS选择器的一组元素 | Element、document |
- 兼容性
| 方法 | 兼容性 |
|---|---|
| getElementsByClassName（） | IE9+、Firefox3+、Safari4+、Chrome |
| querySelector（） | IE8+ 、Firefox3.5+、Chrome4+、Safari3.1+、Opera10+ |
| querySelectorAll（） | IE8+ 、Firefox3.5+、Chrome4+、Safari3.1+、Opera10+ |
操作节点
- 操作节点的方法
| 方法 | 描述 |
|---|---|
| appendChild（） | 为指定元素节点的最后一个子节点之后添加节点，该方法返回新的子节点 |
| insertBefore（） | 在指定的已有子节点之前插入新的子节点 |
| replaceChild（） | 该方法用新节点替换某个子节点有两个参数：要插入的节点和被替换的节点，返回被替换的节点 |
| cloneNode（） | 创建节点的拷贝，并返回该副本。拷贝的节点要有父节点，如果没有父节点，要通过appendChild（）、insertBefore（）、replaceChild（）等方法对齐进行添加 |
| normalize（） | 合并相邻的Text节点 |
| SplitText（） | 按照指定的位置把文本节点分割为两个节点。返回新的文本节点 |
删除节点
- 删除节点方法
| 方法 | 描述 |
|---|---|
| removeChild（） | 删除某个节点中指定的子节点 |
| removeNode（） | IE的私有实现。将目标节点从文档中删除，返回目标节点。参数是布尔值，默认值是false。true为包括目标节点的子元素 |
| innerHTML | 将值设置为一个空字符串能够删除该节点的子节点 |
DOM属性
-
固有属性（property）
可以用（.）操作符对固有属性进行访问。 -
自定义属性（attribute）
| 方法 | 描述 |
|---|---|
| Ele.attributes.getNameItem（‘自定义属性名’） | 用于获得自定义属性节点，也可以获取在元素上显式定义了的固有属性 |
| Ele.attributes.removeNamedItem（‘属性名’） | 用于删除显式定义了的属性节点 |
| 属性对象=document.createAttribute（‘属性名’）属性对象.value=‘属性值’ Element.attributes.setNamedItem（属性对象） | 用于创建自定义属性或者固有属性 |
- 通用方法
| 方法 | 描述 |
|---|---|
| getAttribute（‘属性名’） | 用于返回元素该属性的属性值 |
| setAttribute（‘属性名’） | 用于设置元素该属性的属性值 |
| removeAttribute（‘属性名’） | 用于移除元素的该属性 |
以上三种方法既可以操作固有属性也可以操作自定义属性，但是有些固有属性的通用方法和点操作方法返回的值不一样。例如元素的style和onclik属性。
- 布尔属性
| 属性 | 描述 |
|---|---|
| checked | 只有input标签的type属性为radio或checkbox时才有该属性。用于设置默认是否选中。当checked为true时，通过removeAttribute（‘checked’）没法取消选定 |
| selected | 用于select标签下的option标签设置默认值 |
| readonly | 用于控制是否能够修改，true不能修改。在JS里O要大写。 |
| disabled | 用于让表单元素失灵，不能修改，且提交表单后端也接收不到。true为失灵 |
| multiple | 使selected下拉列表能多选，默认false为单选 |
| hidden | HTML新增的属性，隐藏元素并且不占用页面的空间，true为隐藏 |
- 字符串属性
| 属性 | 描述 |
|---|---|
| id | 元素的唯一标识 |
| title | 鼠标悬浮时显示的提示信息 |
| href | 用于a和link元素，表示超链接 |
| src | 用于image等，表示数据的来源 |
| lang | language，用于辅助搜索引擎、印刷机等 |
| dir | 常与bdo元素一起出现,控制文本的输出方向 |
| accesskey | 设置组合键选中，同时按住ALT与设置的按键选择一个元素 |
| name | 常用于表示表单控件的名字 |
| value | 表示控件传送到后端的值 |
| class | 用于划分某一类可能具有同样样式的元素 |
- W3C全局属性
| 属性 | 描述 |
|---|---|
| accesskey | 设置组合键选中 |
| class | 用于划分某一类可能具有同样样式的元素 |
| contenteditable | 表示某个元素的内容是否可编辑 |
| dir | 文本的输出方向 |
| hidden | HTML新增的属性，隐藏元素并且不占用页面的空间，true为隐藏 |
| id | 元素的唯一标识 |
| lang | language，用于辅助搜索引擎、印刷机等 |
| spellcheck | 与contenteditable组合使用，如果可编辑则可以检查是否符合语法 |
| style | 定义元素的样式 |
| tabindex | 规定当使用“tab”键进行导航时元素的顺序 |
| title | 鼠标悬浮时显示的提示信息 |
| translate | 规定是否应该翻译元素的内容，目前所有的主流浏览器都无法正确支持该元素 |
- data属性
| 描述 |
|---|
| 通过 data-属性名 命名的属性可以通过Element.dataset.属性名来获取属性的值 |
| 假如为data-属性名-属性名则调用时需要将两个属性名携程驼峰形式 |
- class属性
可以运用classList属性的各种方法为元素添加类名
| 方法 | 描述 |
|---|---|
| ele.classList.add（‘类名’） | 为元素的class属性增加新类名 |
| ele.classList.remove（‘类名’） | 移除元素class属性中与参数相符的类名 |
| ele.classList.contains（‘类名’） | 判断元素class属性中是否包含与参数相符的类名 |
| ele.classList.toggle（‘类名’） | 如果元素class属性中有与类名一致的属性，则删除掉，没有则添加上 |
全部评论 (0)
还没有任何评论哟~