DOM
时间：2020-05-11 21:19:19
收藏：0
阅读：44
1. DOM文档对象模型，对象：document
- DOM（W3C机构）不属于BOM（浏览器厂商）
- window对象身上有提供document对象
- DOM，主要控制页面（html文件），所有的页面操作都需要通过DOM
- DOM的结构：html的结构：树形结构，包含结构，家族结构（父子级，兄弟级）
- html根元素：head，body
- DOM树形结构，的每个组成部分，都叫节点（元素，属性，注释，文本）
- 所有节点，都是对象
2. 选择器
2.1元素节点选择器(只有元素节点)
2.1.1直接选择器
①d选择器：document.getElementById("id名")（返回单个元素）
②class选择器：document.getElementsByClassName("class名")
③tag选择器：document.getElementsByTagName("tag名")
④name选择器：document.getElementsByName("name名")
⑤ES5新增选择器：
querySelector选择器：document.querySelector("css选择器")（单个元素）
querySelectorAll选择器：document.querySelectorAll("css选择器")
2.1.2关系选择器：先有基准元素
2.1.2.1父子关系：
①父选子：先拿到父
步骤1：父选子：先拿到父
var olist = document.querySelector(".list");
步骤2：第一个子：olist.firstElementChild
最后一个子：olist.lastElementChild
所有子：olist.children;
其他的子：olist.children[索引];
② 子选父：先拿到子
步骤1：子选父：先拿到:子
var oEm = document.getElementsByTagName("em")[0];
步骤2：直接拿到所属子集的唯一父集：oEm.parentNode;
2.1.2.2兄弟关系：
步骤1： 先选择当前
var olist = document.querySelector(".list");
步骤2： 上一个：olist.previousElementSibling;
下一个：olist.nextElementSibling;
2.2节点选择器：
2.2.1元素，注释，文本，参与了父子或兄弟关系（利用关系选择）：
①父元素节点.childNodes（父子）
②当前元素.previousSibling（兄弟）
③当前元素.nextSibling（兄弟）
2.2.2属性，没有参与这种家族关系（单独选择器）：
①当前元素.attributes
3.节点的过滤属性
| nodeType | nodeName | nodeValue | |
| 元素 | 1 | 大写标签名 | null |
| 文本 | 3 | #text | 文本内容 |
| 注释 | 8 | #comment | 注释内容 |
| 属性 | 2 | 属性名 | 属性值 |
| 根元素 | 9 | document | null |
补：节点选择器和节点的过滤属性，一般只用来做选择或过滤，不用来做修改等操作，有单独的操作方法
4. 操作：增删改查
4.1属性操作
4.1.1可见属性：
内置：只要是系统提供的，在标签身上直接写的，还具有功能，就是内置的可见属性
- 对象操作：1点语法；2中括号语法
- 也可以使用：getAttribute、setAttribute、removeAttribute
- 特殊的属性：
- class：要使用className操作
- style：样式，值是个对象
非内置：在标签身上直接写的，但是不具有默认功能，就是自定义的可见属性
- 元素.getAttribute("要获取的属性名")
- 元素.setAttribute("要设置的属性名","属性值")
- 元素.removeAttribute("要删除的属性名")
4.1.2不可见属性
内置：不用写在标签身上，系统提供，具有功能
方法：innerHTML（获取标签内容、可以解析标签）、firstElementChild（获取第一个子元素节点）、lastElementChild（获取最后一个子元素节点）children（获取子元素节点）、firstChild（获取第一个子节点）、lastChild（获取最后一个子节点）childNodes（获取子节点）、innerText（获取标签中文本内容、不可以解析标签）、tagName（获取大写标签名称、只能获取，不能修改）
对象操作：1点语法；2中括号语法
非内置：放飞自我，看不见的自定义属性，其实就是将元素，作为一个对象数据，进行操作
- 元素是个对象，对象可以用来存储数据，多存储一些
- 对象操作
- 样式操作
- 元素操作
原文：https://www.cnblogs.com/yh-3175339026/p/12871283.html
评论（0）