操作DOM简单笔记

DOM

DOM 给我们提供了一些方法，让我们可以使用js来控制页面中的标签等。

作用：
它的作用是将网页转为一个 JavaScript 对象，从而可以用脚本进行各种操作（比如增删内容）。
浏览器会根据 DOM 模型，将结构化文档（比如 HTML 和 XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口。

页面元素 – 页面中的标签 ： 常用的dom方法

document.getElementById(“box”);     //通过id获取标签
document.getElementsByTagName(“div”);     根据标签名获取页面元素

注意：
由于获取结果可能是多个，element后面要加s
根据标签获取的结果是伪数组形式，伪数组是不具备数组的方法。
要操作伪数组中的所有元素需要遍历伪数组。

根据标签名获取元素时，有可能获取到的标签只有一个，但是形式还是伪数组。

根据标签名获取时，document可以更换为任意标签

在box中获取li标签。
注意： 根据id获取的时候，前面只能写document

• document.getElementsByclassName(“box1”) 根据类名获取页面元素
• window.onload()中的代码会在页面完全加载后执行。

设置标签的样式等方法
对标签的样式设置使用.style

var box=document.getElementById("box");
box.style.width="100px";
box.style.backgroundColor="#ff00000"  //带有段横线的属性要是用驼峰命名的方式。

事件类型

• 点击事件 onclick
• 鼠标移入 onmouseover
• 鼠标移出 onmouseout

使用节点

dom – 文档对象模型 document是dom中的顶级对象
dom把html页面看作一个树结构
dom树中的每一个部分我们都称为节点。

节点访问关系
dom中提供了一套访问关系，称为节点访问关系

1.父子访问关系：
通过parentNode可以访问某个节点的父节点
通过childNodes可以得到某个节点的所有子节点，包含文本节点（空格和换行）
通过children可以得到某个节点中的所有元素子节点（不是标准方法，但是所有浏览器都支持，可放心使用）。
2.获取子节点
node.firstChild 表示第一个子节点（包含文本节点）
node.lastChild 最后一个子节点（包含文本节点）

3.获取元素子节点：ie低版本不支持
node.firstElementChild 第一个元素子节点
node.lastElementChild 最后一个元素子节点