DOM（文档对象模型）

慢腾腾的急性子

于 2017-08-09 13:21:18 发布

阅读量292

点赞数

分类专栏： dom 文章标签： dom

本文链接：https://blog.csdn.net/yujie0716006/article/details/76982781

版权

本文详细介绍了DOM（文档对象模型）的相关知识，包括判断节点类型、事件绑定、DOM查询方法如getElementById、getElementsByClassName等，以及Element对象的属性和方法。重点讨论了事件处理，如事件委托、事件对象的使用和阻止默认行为，同时涵盖了CSS操作和浏览器兼容性问题。

摘要由CSDN通过智能技术生成

DOM将HTML网页解析为一个文档
DOM的组成部分：
    DOM Core – 提供DOM中的基本内容
    DOM HTML – 提供支队HTML页面的内容
    DOM CSS – 针对提供CSS的内容
    DOM XML

判断节点类型

            nodeName    nodeType    nodeValue
文档节点    #document       9             null
元素节点    标签名         1               null
属性节点    属性名         2              属性值
文本节点    #text          3             文本内容

作用：
- 如果是HTML标签的话，可以根据 nodeName 判断当前是什么标签
- 可以根据 nodeType 判断当前获取的是什么节点
- 若果是属性节点或是文本节点的话，可以根据 nodeValue 获取当前的属性值或文本内容

绑定事件及事件属性

- 为行为绑定事件的语法结构：
    元素.事件名称 = function(){
需要执行的逻辑
}
- 事件的执行流程：
    1，获取HTML页面中指定的标签
    2，为指定的标签绑定指定事件
    3，编写事件发生时的逻辑代码
* 注意：当浏览器运行当前HTML页面时，该事件被绑定到对应标签上，该事件的触发由用户来决定
*HTML文档的加载：
        当 JavaScript 代码放置在 <body> 标签后或者对应 HTML 页面标签后，运行效果是正确的。如果我们想把 JavaScript 代码放置在 <body> 标签前或者是 <head> 标签中，就出错。因为 HTML 页面的加载是自上向下的顺序，所以在执行 JavaScript 代码时，浏览器并没有加载 <body> 标签中的内容。要想将这些内容放在上面或是中间，就需要添加window.onload = function(){将逻辑代码全都放在这里面  }

DOM查询

获取 HTML 标签就是查找 HTML 页面中的元素节点

获取HTML页面中的标签
- 传统获取页面标签
  - getElementById()方法 - 通过id属性值获取对应标签
    由于 id 属性值唯一，只能获取指定唯一标签，当有相同的id名时，也只取第一次查询的结果。
  - getElementsByName()方法 - 通过name属性值获取对应标签
    返回一个类数组对象 - NodeList 对象
    含义 - 存储结构上类似于数组的存储方式，最终是一个对象(当作数组使用)
  - 注意 - 即使获取到的只有一个标签，返回的依旧是类数组结构
  - getElementsByTagName()方法 - 通过标签名获取对应标签
    返回一个类数组对象 - NodeList 对象
  - getElementsByClassName()方法 - 通过class属性值获取对应标签
    返回一个类数组对象 - NodeList 对象
  - 注意 - 是一个新增方法 -> 可能会出现浏览器不支持
以上返回值有多个时，为其设置样式时，需要使用for循环语句进行遍历设置
- 通过 CSS 的选择器获取页面标签
  - querySelector(选择器)方法 - 返回第一个匹配的标签
    返回值 - 就是指定的标签
  - querySelectorAll(选择器)方法 - 返回所有匹配的标签
    返回值 - 类数组对象 -> NodeList
两者的区别：
传统方式：优点：性能好、查询速度快
缺点：使用麻烦
HTML5新增，使用CSS选择器获取的页面标签：优点：使用简便
缺点：性能差、查询速度慢
添加指定标签的样式，要重新设置class 属性值
语法：标签.className = 值
NodeList类型 – 类数组对象
什么是类数组对象：存储数据的方式类似于数组
类数组对象 = 数组+对象 ->在数组的基础上扩展对象的属性和方法
- 动态NodeList (getElementsByName()、getElementsByTagName()、getElementsByClassName())
  - 通过以上方法获取页面的标签，跟着操作的变化而变化
- 静态NodeList （getSelectorAll）
  -通过以上方法获取页面的标签，不会跟着操作的变化而变化
  Document对象
- 创建元素节点 – document.createElement(标签名)
- 创建文本节点 – document.