dom操作

什么是DOM

dom全称document object model

js中可以利用dom对html页面进行操作
文档（document）

文档表示的就是整个html页面文档

对象（object）

对象表示把html中的任何部分转换为对象模型进行操作

模型（model）

使用模型表示对象之间的关系，这样方便我们获取对象

绑定事件的方式

行内绑定 动态绑定

addEventLisrener 事件监听

dom获取元素

获取元素：

1.通过id获取，document.getElementById
-get获取，Element元素，By通过，Id选择器 id是唯一的，可以起多个id，一个id名称只能在这个页面用一次 节点：node是构成网页的最基本组成部分

2.通过标签名字来获取一组元素 document.getElemetsByTagName（“标签名称”） 他获取到的是标签的一组元素

3.通过name获取元素 document.getElemetsByName（“name”）；

4.通过ClassName获取一组元素 document.getElemetsByClassName（“类名”）； 返回的是类数组，将同类名的所有元素以数组集合的形式返回，类数组有数组的一些特性 ClassName8以下不兼容

document.querySelectorAll(".girl");
docuent.querySelector()可以解决ie8以下ClassName不兼容问题；
querySelector（“”）括号中的引号中
如果查找类名   querySelector（“.类名”）
根据标签查找， querySelector（”标签名“）
根据id查找的话   querySelector（#id名）

节点分类：

1.文档节点：整个HTML文档
2.元素节点：HTML文档中的HTML标签
3.属性节点：标签/元素的属性
4.文本节点：HTML标签中的文本内容

浏览器已经为我们提供文档节点对象，则个对象就是window属性。
-可以在页面中直接使用，这个文档节点代表整个网页

1.事件

事件是文档和浏览器窗口发生特定的交互瞬间

JavaScript和HTML交互是通过事件实现的

js在页面中的位置：

1.js写到标签上

2.js的script标签放到head中，页面上面。

3.把js写到HTML元素下面
HTML代码加载完之后，加载js代码，执行js代码。

4.外部链接js文件

获取子节点：

1.通过逐级获取元素的方式： document.getElementById(“box”); .getElementsByName(“p”);

2.childNodes获取所有子节点，(包括回车和空格) 返回的结果是一个类–child孩子–Node节点 第一项 childNode[0]; 第二项 childNode[1]; …以此类推

3.children (所有子标签) 获取到子元素的节点，只包括元素，不包括其他文本或者空格及回车

4.firstChild (空格，字符，回车，标签) 返回标签下面第一个子节点，包括空格回车，标签间的空隙

5.firstElementChild (只返回标签)返回的是标签下面的第一个子元素节点(第一个标签)

6.lastChild (空格，字符，回车，标签) 最后一个节点，包括空格回车，标签间的空隙

7.lastElementChild (只返回标签)返回的是最后一个标签，不包括空格，回车等

8.parentNode 获取元素上一级父节点

9.parentElement 获取元素上一级父节点
-parentElement与parentNode一样不同的是，parentElement是ie标准

10下一个兄弟节点nextSibling 包含(空格，字符，回车，标签) 下一个兄弟元素
nextElementSibling 只包含标签

11previousSibling上一个兄弟节点 包含(空格，字符，回车，标签) previousSibling上一个兄弟元素节点
只包含标签
兄弟元素，标签（只包括标签）

对元素进行增删改

1 创建元素creatElement creat创建 element元素 标签
语法：对象.creatElement（“标签名称”）；

2 创建文本节点creatTextNode 语法：对象.creatTextNode（“文本内容”）；

3 appendChild追加一个节点 （包括文本节点跟元素节点） 向父级添加子节点 语法：父级.appendChild(要添加的子节点)

4 removeChild 删除节点 语法:父级.removeChild(要删除的节点)； 当不知道父级的时候
要删除的节点.parent.removeChild（要删除的节点）；

5 insertBefore从前面或中间插入子节点 语法：父级.insertBefore（要插入的新节点，旧节点）；

6 replaceChild（）替换节点 第一个参数是要替换的节点 第二个参数是被替换的旧节点
语法：父级.replaceChild(新节点，旧节点)；

鼠标事件

onclick 单击事件
ondblclick 双击事件
onmouseover 移入事件
onmouseout 移出事件
onmouseleave 移开事件

键盘事件

主要的三个事件
onkeydown键盘按下时触发
onkeyup键位抬起时触发
onkeypress 键盘按下有值的键位时触发
对于无值的ctrl shift alt这些键位不会触发
对于有WWW值的 键位则先触发keydown再触发keypress