标签：标签 元素 用法 获取 操作 节点 属性

 

DOM

Js的主要组成成分：ECMAScript + DOM + BOM

1. DOM的定义：Document object model  文档对象模型  主要用来提供操作html文档的方法（API）
2.   这种树形结构 称为 dom树。每个HTML文档有且仅有一个根节点，称之为 文档节点，即html 

(1)      这里说到的文档节点 html 不是html标签节点, 这里的文档节点 指的是 html文档节点（document）

1. 获取子节点

(1)      节点：DOM将html文档中的所有内容 都抽象化为 节点

(2)      节点分类：标签节点、属性节点、注释节点、文本节点

(3)      获取子节点的方法

①    childNodes

1)       用法：父节点.childNodes 

2)       作用：获取到父节点中所有子节点

②    children

1)       用法：父节点.children

2)       作用：获取父节点中的所有子元素节点

1. DOM操作节点的方法

(1)      DOM操作节点的方法

①    nodeType  节点类型  可以获取到任意节点的类型

1)       用法：节点.nodeType

2)       作用：可以用来判断节点的类型

1. 标签节点：1   属性节点：2   文本节点：3   注释节点：8

②    nodeName  节点名称  可以获取到当前节点的名称

1)       用法：节点.nodeName

2)       一般多用于区分不同的标签节点 标签节点的节点名称 就是标签名(大写)

③    nodeValue 节点值  获取节点的内容

1)       用法：节点.nodeValue

2)       作用：可以获取到文本节点 和 注释节点的内容  但是 不能获取到标签节点的内容(得到的结果是null)

3)       用法：节点.nodeValue = “xxxx”

4)       作用：设置节点的内容

1. 获取父节点

(1)      parentNode：获取父节点

①    用法：节点.parentNode 

②    可以获取到自身的直接父节点（父元素）

(2)      offsetParent：获取带定位的父节点

①    用法：节点.offsetParent

②    可以获取到自身带定位的父节点（父元素）

③    获取带定位的父元素  和  css中 定位的参考父元素 一样

1. 获取其他节点 （兄弟节点）

(1)      获取上一个兄弟节点：previousSibling

①    用法：节点.previousSibling

②    作用：获取当前节点的上一个兄弟节点

(2)      获取下一个兄弟节点：nextSibling

①    用法：节点.nextSibling

②    作用：获取当前节点的下一个兄弟节点

(3)      获取上一个兄弟元素：previousElementSibling

①    用法：节点.previousElementSibling

②    作用：获取当前节点的 上一个 兄弟元素

(4)      获取下一个兄弟元素：nextElementSibling

①    用法：节点.nextElementSibling

②    作用：获取当前节点下一个兄弟元素

(5)      previousElementSibling和nextElementSibling有兼容性问题 在ie浏览器中不能使用  但是 previousSibling 和 nextSibling可以在ie浏览器中使用

①    实现兼容  在ie中 使用 previousSibling 和 nextSibling 如果在标准浏览器中 就可以使用 previousElementSibling和nextElementSibling

②    兼容的方式：节点.previousElementSibling ||节点.previousSibling

1)       短路运算：当&& 和 || 的操作数 不是布尔值的时候 就是短路运算

2)       短路运算规则：短路运算算式的值 就是 算式中 起决定性作用的操作数的值

3)       例如：“abc” || 0

1. 先将操作数都转换为布尔值   true || false
2. 判断 是哪一个操作数 决定了 算式的值
3. 确定算式的值 为 起决定性作用的 操作数的值 “abc”
4. DOM中增添节点

(1)      创建节点：

①    createElement 创建标签节点

1)       用法：document.createElement(“要创建的标签名”)

②    createTextNode 创建文本节点

1)       用法：document.createTextNode(“文本内容”)；

2)       一般 被innerText或innerHTML取代

(2)      追加节点

①    appendChild  在父元素末尾追加节点

1)       用法：父节点.appendChild(要追加的子节点)

2)       如果追加的是页面上 已经存在的 元素 会产生 物理位移

②    insertBefore  在指定参考元素的前面 插入节点

1)       用法：父节点.insertBefore(要插入的子节点，参考子节点)

2)       如果追加的是页面上 已经存在的 元素 会产生 物理位移

1. DOM中删除节点

(1)      remove  删除指定的元素

①    用法：节点.remove()

②    节点被删除后 无法恢复。

(2)      removeChild  删除指定的子节点

①    用法：父节点.removeChild(指定的子节点)

1. DOM中修改节点

(1)      cloneNode   克隆节点

①    用法1：节点.cloneNode()

1)       注意：在克隆标签节点的时候 只能克隆标签 不能克隆内容

②    用法2：节点cloneNode(true);

1)       注意：传入true后 则可以克隆节点及内容  如果不传参和传入false是一样的

(2)      replaceChild   替换节点

①    用法：父节点.replaceChild(用来替换的新节点，要被替换的旧节点);

②    作用：使用新节点替换旧节点

1. 获取标签节点的新方法（查询）

(1)      querySelector  获取节点

①    用法：document/父元素.querySelector(“css3选择器”)

②    如果满足选择器条件的 有 多个节点 就会 获取第0个满足条件的节点

(2)      querySelectorAll  获取节点的集合

①    用法：document/父元素.querySelectorAll(“css3选择器”)

②    获取所有满足选择器条件的节点 得到一个节点的集合

(3)      注意：这两个方法 在ie8- 浏览器中 不支持

1. 操作元素属性 的方法

(1)      操作元素属性

①    获取 ： 元素.属性名   设置 ： 元素.属性名 = “xxxx”  这种操作方式 不能操作元素非自带属性 和 自定义属性

②    getAttribute  获取属性值

1)       用法：元素.getAttribute(“属性名”)；

2)       可以获取到 任意类型的属性（自定义属性 和 非自带属性）

③    setAttribute  设置属性值

1)       用法：元素.setAttribute(“属性名”,”属性值”)

1. 获取表格元素的方法

(1)      获取thead：table.tHead

(2)      获取tbody:  table.tbodies

①    得到的是一个伪数组  数组中 存放着所有的tbody  如果想得到某一个 需要加索引

(3)      获取tfoot：table.tFoot

(4)      获取tr:  table/thead/tbody/tfoot.rows

①    得到的是一个包含所有满足条件的行的伪数组 要想得到某一行 需要加索引

(5)      获取td：tr.cells

①    注意：我们只能获取一行中的单元格

 

标签：标签,元素,用法,获取,操作,节点,属性
来源： https://www.cnblogs.com/wmhh/p/13728787.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。