javascript第九天DOM

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

ECMAScript：数据类型、转换+运算符   流程控制语句  this和函数  函数高级 定时器 内置对象（Math、Date、String、Array）

DOM  Document Object Model  文档对象模型  主要给开发者提供操作页面节点的功能

1. DOM的定义和作用：是针对 HTML 和 XML 的一个 API，即开发者可以通过 DOM 来操作 HTML文档 或者 XML文档。

(1)     XML：可拓展标记语言

(2)     API：application program interface 应用程序接口  就是方法函数集合

1. DOM树

(1)    

(2)     在图中 每一个小圆圈 都是一个DOM节点 

(3)     注意：DOM节点 包含 标签节点 文本节点 属性节点 注释节点

(4)     在任何一个DOM树中 都有一个根节点 文档节点 html文档节点（document）

1. 获取子节点

(1)     childNodes

①    这个属性 是 ECMAScript内置的属性， 被称为标准属性

②    用法：父元素.childNodes

③    作用：获取父元素中的所有子节点（不仅仅包含标签节点）

(2)     Children

①    这个属性 是 非标准属性  

②    用法：父元素.children;

③    作用：获取父元素中的所有子元素

1. 节点的分类

(1)     标签节点

(2)     属性节点

(3)     文本节点

(4)     注释节点

(5)     区分节点的属性

①    nodeType : 表示节点的类型  值为数字

1)       标签节点：1

2)       属性节点：2

3)       文本节点：3

4)       注释节点：8

5)       节点类型一般用来判断某一节点是什么节点

②    nodeName ：节点名称

1)       标签节点：标签名（大写）

2)       文本节点：#text

3)       注释节点：#comment

4)       节点名称 一般 用于区分当前标签节点是什么标签

③    nodeValue ：节点值

1)       标签节点：null

2)       文本节点：文本内容

3)       注释节点：注释内容

4)       节点值 一般 用于获取文本节点内容 设置内容（不会解析html标签）

1. 获取父节点

(1)     parentNode：获取父节点

①    用法：元素.parentNode   得到当前元素的父元素

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

①    用法：元素.offsetParent

②    作用：获取带定位的父节点 如果没有带定位的父节点 就获取body

1. 获取兄弟节点的方法

(1)     previousSibling 上一个兄弟节点

(2)     previousElementSibling  上一个兄弟元素

(3)     nextSibling  下一个兄弟节点

(4)     nextElementSibling  下一个兄弟元素

(5)     previousElementSibling和nextElementSibling  在获取兄弟元素的时候 有兼容性问题 在标准浏览器中没问题，但是在ie低版本浏览器中不能使用

①    兼容方式 元素.nextElementSibling  || 元素.nextSibling 

②    上述兼容函数的意义是 如果nextElementSibling 能使用，就使用，如果不能使用 就使用后面的方法

③    这种写法叫做 短路运算

1)       短路运算算式的值是算式中起决定性作用的值

2)       “123”&&“” == “”

1. 创建节点

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

(2)     创建文本节点：document.createTextNode(“文本内容”)

1. 追加节点

(1)     appendChild

①    用法：父元素.appendChild(要追加的子元素)

②    作用：将子元素 追加到 父元素的末尾。

(2)     insertBefore

①    用法：父元素.insertBefore(要追加的子节点，参考子节点)

②    作用：将要追加的子节点 插入到 参考子节点的 前面

(3)     如果追加的是页面上已经存在的元素  会出现位置移动

1. 删除节点

(1)     Remove

①    用法：元素.remove()

②    作用：将元素删除

③    注意：尽量少用 删除之后就彻底没了

(2)     removeChild

①    用法：父元素.removeChild(要删除的子元素)

②    作用：删除父元素中指定的子元素

③    注意：只能删除直接子元素

1. 替换节点

(1)     replaceChild

①    用法：父元素.replaceChild(新子节点，旧子节点)

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

1. 克隆节点

(1)     cloneNode

①    用法1：节点.cloneNode() 

1)       作用：克隆当前节点 不管里面的内容

2)       如果不传参 默认是传false 执行浅层克隆

②    用法2：节点.cloneNode(true)  深度克隆

1)       作用：克隆当前节点及内容

1. 获取元素的新方法

(1)     querySelector

①    用法：document.querySelector(“css选择器”)

②    作用：通过css选择器 获取到 满足条件的 第一个元素

(2)     querySelectorAll

①    用法：document.querySelectorAll(“css选择器”)

②    作用：通过css选择器 获取到所有 满足条件的 元素

③    得到的结果是一个伪数组

1. 操作元素属性的新方法

(1)     之前的方法：元素.属性   元素.属性 = 属性值

①    弊端：只能操作元素自带的属性

(2)     获取属性值

①    getAttribute

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

(3)     设置属性

①    setAttribute

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

1. 获取表格元素的方法

(1)     tHead

①    用法：table元素.tHead

②    作用：获取表头

(2)     tBodies

①    用法：table元素.tBodies[n]

②    作用：获取指定下标的表格主体

(3)     tFoot

①    用法：table元素.tFoot

②    作用：获取表格底部

(4)     Rows

①    用法：table元素.rows

②    作用：获取指定范围内的tr

(5)     Cells

①    用法：某一行.cells

②    作用：获取某一行中的列

③    注意：范围只能是某一行