正则表达式:
* 作用 - 针对字符串内容根据特定的规则进行匹配
* 正则表达式
* 定义方式 - /规则/修饰符
* 字符和数字 - 匹配自身
* ^ 和 $
* ^ - 以什么开始
* $ - 以什么结束
* [] - 集合中的字符之间是或的关系
* {n,m} - 表示出现至少 n 次,最多 m 次
n <= x <= m
* | - 或的关系(类似于运算符中的||)
* 转义字符
* d - 表示数字
* w - 0-9a-zA-Z_
* - 制表符
*
- 换行符
* JavaScript中的正则表达式
* 定义正则表达式
* 字面量方式 - /规则/修饰符
* 创建对象方式 - new RegExp(规则, 修饰符)
* 说明
* 规则 - 就是指正则表达式的语法内容
* 修饰符
* i - 不区分大小写
* g - 全局搜索(将所有匹配都返回)
* m - 多行搜索
* RegExp类型
* 正则表达式.test(字符串) - 返回Boolean值
* true - 表示匹配
* false - 表示不匹配
* String类型
* 字符串.match(正则表达式)方法 - 返回匹配内容
* 字符串.replace(正则表达式, 替换内容)方法
* 正则表达式匹配的内容 - 被替换的内容
* 字符串.search(正则表达式)方法
* 概念
* DOM的全称 Document Object Model,译为文档对象模型
* 三个对象
* document(文档)对象
* node(节点)对象
* element(元素)对象
* DOM分解
* D - Document,实际上对应着一个对象(document)
* document对象 - DOM将HTML页面解析为一个文档
* 注意 - JavaScript提供的预定义对象(直接使用即可)
* O - Object,提供一系列的对象解析这个文档
* M - Model,就是指对象之间的关系
* DOM树结构
* 注意
* 属性节点并不是子节点
* HTML标签 - 标签/元素/节点
* 元素和节点的区别
* 元素 - 本身就是指标签
* 标签的属性
* 标签的文本
* 节点
* 元素节点(标签)
* 属性节点(属性)
* 文本节点(文本)
* 总结 - 无论元素还是节点,只不过是解析HTML页面中的内容的一种手段
* 其他节点(了解) - 声明节点、注释节点
* 三种关系
* 祖先与后代的关系
* 祖先节点 - 父节点的父节点的父节点...
* 后代节点 - 子节点的子节点的子节点...
* 父与子的关系
* 父节点
* 子节点
* 兄弟的关系(同一个父节点)
* 判断节点类型
* nodeName - 节点名称
* 文档节点 -> #document
* 元素节点 -> 标签名
* 属性节点 -> 属性名
* 文本节点 -> #text
* nodeType - 节点类型
* 文档节点 -> 9
* 元素节点 -> 1
* 属性节点 -> 2
* 文本节点 -> 3
* nodeValue - 节点值
* 文档节点 -> null
* 元素节点 -> null
* 属性节点 -> 属性值
* 文本节点 -> 文本内容
* 作用
* 如果是HTML标签的话,可以根据nodeName判断当前是什么标签
* 可以根据nodeType判断当前获取的是什么节点
* 如果是属性节点或文本节点的话,可以根据nodeValue获取当前的属性值或文本内容
* 事件
* 定义 - 实现用户与页面之间的交互瞬间
* 事件绑定
1. 获取当前页面中指定的标签
document.getElementById(id)
2. 为指定标签绑定事件
标签.onclick = function(){
执行的逻辑
}
* 事件属性 - HTML标签提供了事件属性,与事件绑定的作用相同
* 注意 - 不推荐(HTML结构与逻辑不分离)
* document对象
* 获取HTML页面中的标签
* 传统获取页面标签
* getElementById()方法 - 通过id属性值获取对应标签
* 由于 id 属性值唯一,只能获取指定唯一标签
* getElementsByName()方法 - 通过name属性值获取对应标签
* 返回一个类数组对象 - NodeList 对象
* 含义 - 存储结构上类似于数组的存储方式,最终是一个对象(当作数组使用)
* 注意 - 即使获取到的只有一个标签,返回的依旧是类数组结构
* getElementsByTagName()方法 - 通过标签名获取对应标签
* 类似于 getElementsByName() 方法
* getElementsByClassName()方法 - 通过class属性值获取对应标签
* 类似于 getElementsByName() 方法
* 注意 - 是一个新增方法 -> 可能会出现浏览器不支持
* 通过 CSS 的选择器获取页面标签
* querySelector(选择器)方法 - 返回第一个匹配的标签
* 返回值 - 就是指定的标签
* querySelectorAll(选择器)方法 - 返回所有匹配的标签
* 返回值 - 类数组对象 -> NodeList