初识DOM

目录

获取节点

操作HTML内容

监听事件

操作节点的标签属性

操作样式

类名的操作

---

DOM（Document Object Model）文档对象模型，是W3C组织推荐的处理可扩展置标语言的标准编程接口。

获取节点

DOM为我们提供了一个全局内置对象document，要操作HTML标签，我们可以调用document对象中的各种方法来获取页面中的标签（在js中我们可以称之为 元素 或者 节点）：

• 通过ID获取

  eg：document.getElementById("main")

• 通过选择器获取

  eg：document.querySelector("#main .nav")

  eg：document.querySelectorAll(#banner li)

• 通过class名获取

  eg：document.getElementsByClassName("left")

• 通过标签名获取

  eg：document.getElementsByTagName("p")

• 特殊标签的获取

  获取html标签 document.documentElement

  获取head标签 document.head

  获取body标签 document.body

  获取title标签 document.title

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

操作HTML内容

节点.innerHTML 获取/修改 元素的HTML内容，

节点.innerText 获取/修改 元素的文本内容（老版本FF不支持这个属性，使用 .textContent 代替）。

监听事件

• 事件种类

  鼠标事件： onclick 左键单击 ondblclick 左键双击 onmouseover onmouseenter 鼠标移入 onmouseout onmouseleave鼠标移出 onmousedown 鼠标按下 onmousemove 鼠标移动 onmouseup 鼠标抬起 oncontextmenu 右键单击

  键盘事件：onkeydown onkeypress 键按下 onkeyup 键抬起

  系统事件： onload 加载完成后 onerror 加载出错后 onresize 窗口调整大小时 onscroll 滚动时

  表单事件： onfocus 获取焦点后 onblur 失去焦点后 onchange 改变内容后 onreset 重置后 onselect 选择后 onsubmit 提交后

• 监听事件写法

  节点.事件 = 函数。

  eg：document.getElementById("main").onclick = function(){alert(1)};

  这里的函数称之为 事件函数，事件函数不会自执行，而是当事件触发时执行。

• 事件函数this指向

  在事件函数中，关键词 this 就表示触发事件的这个节点对象。

操作节点的标签属性

• 合法标签属性

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

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

• 自定义的标签属性

  不能直接使用 . 操作。

  设置setAttribute 获取getAttribute 移除removeAttribute 。

操作样式

• 修改样式

  元素样式由css控制，JavaScript想要改变元素的样式，那么就相当于要改变css。

  元素css样式的书写位置有三种：外部样式表、内部样式表、行内样式。js来操作样式时，本质上就相当于要操作这三种位置的css。

  • 外部样式表 ：前端的 js 不能修改一个外部的文件，所以无法通过直接修改外部样式来改变元素。

  • 内部样式表：内部样式放置到style标签中，而style又在当前页面中，所以能够被js控制。但是操作来比较麻烦，所以不推荐。

  • 行内样式：直接写在标签中，并且优先级最高。js操作样式的最常用方式。

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

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

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

• 获取样式

  .style 只能获取行内样式，要获取元素的最终显示样式使用 getComputedStyle(节点)。

类名的操作

使用 .className 可以来操作标签的类名，但是需要新加一个类名，或者去掉某个类名时，使用.className较为麻烦。所以推荐使用新API.classList 来操作类名。

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

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

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

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