DOM - 节点选择器和属性选择器

最新推荐文章于 2023-03-20 20:34:38 发布

Jared864

最新推荐文章于 2023-03-20 20:34:38 发布

阅读量1.5k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Jared864/article/details/106066383

本文深入讲解DOM（Document Object Model）的概念及其在网页控制中的核心作用，包括DOM的结构、节点类型、选择器的使用，以及如何通过各种选择器进行元素定位。同时，详细介绍了属性操作的方法，如获取、设置和删除属性，以及属性的过滤属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Day21

一、DOM

介绍
- 概念：DOM（document of module）、
- DOM不属于BOM
- window对象身上有提供document对象
- DOM主要控制页面（html文件），所有的页面操作都需要通过DOM
- DOM的结构，html结构：属性结构，包含结构，家族结构（父子级，兄弟级）
- html根元素：head，body
- DOM树形结构的每个组成部分，都叫节点。所有节点，都是对象
选择器
- 元素节点选择器（只有元素节点）
  - 直接选择器
    - id选择器：document.getELementById(“id名”);
    - class选择器：document.getElementsByClassName("class名”);
    - tag选择器：document.getElementsByTagName("tag名“)；
    - name选择器：document.getElementsByName(“name名”)；
    - ES5新增的选择器：查询选择器
      - querySelector选择器：document.querySelector(“css选择器”)；
      - querySelectorAll选择器：document.querySelectorAll(“css选择器”)
    - 总结
      - 返回单个元素
        
        id, querySelector
      - 返回数组
        
        class,tag,name,querySelectorAll
  - 关系选择器：先有基准元素
    - 父子关系
      - 父选子：先拿到父
        
        var oList = document.querySelector(".list"); console.log(oList.firstElementChild); console.log(oList.lastElementChild); console.log(oList.children);
      - 子选父
        
        var oEm = document.querySelector("em"); console.log(oEm.parentNode); console.log(oEm.parentNode.parentNode)
      - 兄弟关系
        
        var oList = document.querySelector(".list"); //上一个兄弟元素 console.log(oList.previousElementSibling); //下一个兄弟元素 console.log(oList.nextElementSibling);
- 节点选择器（元素，属性，注释，文本）
  - 元素，注释，文本，参与了父子或者兄弟关系
    - 利用关系选择
```
//子节点选择（所有，返回值是个数组）
父元素节点.childNodes
//上个兄弟节点选择
当前元素.previousSibling
//下个兄弟节点选择
当前元素.nextSibling
```
  - 属性，没有参数树形结构
    - 单独选择器
```
当前元素.attributes
```
    - 节点选择器和节点的过滤属性，一般只用来做选择和过滤，不用来做修改等操作，有单独的操作方法
1. 节点的过滤属性

	nodeType	nodeName	nodeValue
元素	1	大写标签名	null
文本	3	#text	文本内容
注释	8	#comment	注释内容
属性	2	属性名	属性值
根document	9	document	nul

操作：增删改查
- 属性操作
  - 可见属性
    - 内置：只要是系统提供的，在标签身上直接写的，还具有功能，就是内置的可见属性
      - 对象操作：1点语法，2中括号语法
      - 也可以使用：getAttribute、setAttribute、removeAttribute
      - 特殊的属性
        class：要使用className操作
        style：样式，值是个对象
    - 非内置：在标签身上直接写的，但是不具有默认功能，就是自定义的可见属性
```
元素.getAttribute("要获取的属性名");
元素.setAttribute("要设置的属性名","属性值");
元素.removeAttribute("要删除的属性名");
```
    - 内置的可见属性，起始就是html属性
  - 不可见属性
    - 内置：不用写在标签身上，系统提供，既有功能
      - 对象操作：1点语法，2中括号语法
    - 非内置：看不见的自定义属性，就是将元素当成一个对象数据，进行操作