初识DOM（完整版）

DOM 是w3c标准下处理文档（网页）的标准接口

获取节点

DOM为我们提供了一个全局（内置）对象document，我们要操作网页文档，就要调用document对象（相当于封装好的一些函数）

通过ID获取

document.getElementById("main")

通过选择器获取

应该是不常用，使用querySelectorAll()选择列表的第二个元素_世界尽头与你的博客-CSDN博客

document.querySelector("#main .nav")

document.querySelectorAll('#example-container li:first-child');

通过class名获取

 document.getElementsByClassName("left")

通过标签名获取

 document.getElementsByTagName("p")

特殊标签的获取

获取htnl标签         document.documentElement

获取head标签         document.head

获取body标签         document.body

获取title标签                 document.title

一般情况下，推荐使用 ID获取 或者 选择器获取 ，比较方便。

                                                操作html内容

节点.innerHTNL 获取（能获取就能修改）HTML内容

节点.innerText  获取/修改 元素文本内容（老版本不支持，用.textContent代替）

                                                监听事件

事件种类

鼠标事件：

左键单击：onclick

左键双击：onmouseover

鼠标移入：onmouseout onmouseleave

鼠标移出: onmouseout onmouseleave

鼠标按下:onmousedown

鼠标移动:onmouseve

鼠标抬起:onmouseup

右键单击:oncontextmenu

键盘事件

键按下：    onkeydown onkeypress

键抬起：        onkeyup

系统事件

加载完后         onload

加载出错后         onerror

窗口调整大小时         onresize

滚动时         onscroll

表单事件

获取焦点后        onfocus

失去焦点后        onblur

改变内容后        onchange

重置后               onreset

选择后               onselect  

提交后                onsubmit

监听事件写法

节点.事件=函数

document.getElementById("main").οnclick=function(){alert(1)};

JS中的事件监听_赵哎呦的博客-CSDN博客_js监听事件

这里的函数叫做事件函数，事件函数不会（也许是无法）自动执行，而是当事件触发执行

事件函数this指向

在事件函数中，关键字this 表示触发事件节点的对象

操作节点的标签属性

合法标签属性

直接使用        节点.属性 的方式。console.log(节点.id);节点.title="新的title"

class名字不能.class,而是使用.className代替。

自定义的标签属性

不能直接使用.操作。

设置setAttribute 获取getAttribute 移除 removeAttribute。

操作样式

修改样式

元素样式由css控制，JavaScript要想改变元素的样式，那就相当于改变css（通过js来获取，修改）

元素css样式的书写位置有三种:外部样式表，内部样式表，行内样式。

js操作样式时，本质上就相当于要操作这三种位置的css

外部样式表：

前端的js不能修改外部文件，所以不能通过直接修改外部样式来改变元素（类似于java的私有属性不能被访问）

内部样式表：

内部样式放置到style标签中，而style又在当前页面中，所以能够被js控制，但是操作繁琐，不推荐

行内样式：

直接写在标签中，优先级最高，js最常用方式

节点.style.属性        来控制单个的行内样式

节点.style.属性 来控制单个的行内样式。

节点.style.cssText 来控制节点的所有行内样式

当单个标签操作的样式比较多时，使用改变class来改变样式会方便

获取样式

.style只能获取行内样式，要获取元素的最终样式使用 getcomputedStyle（节点）

类名的操作

使用.className 可以来操作标签的类名，但是需要新加一个类名，或者去掉某个类名时

，使用.className比较麻烦。推荐API.classList来操作类名

添加：节点.classList.add("类名")

移除：节点.classList.remove("类名")

切换（有则删，无则加）：节点.classList.toggle("类名")

是否有某个类名（得到布尔值）：节点.classList.contain("类名")