《前端基础核心知识笔记：HTML、CSS、JavaScript 及 BOM/DOM》

html

前端三剑客的介绍：

    HTML:页面内容的载体
    Css：用来美化和指定页面的显示效果
    JavaScript：页面显示的过程中，可以动态改变页面的内容

重点属性

type="text"文本输入
type="password"密码输入
 SerlvertC超链接
type="radio" value="值" 单选框
type="checkbox" value="值" 多选框
 在  作用设置编码格式
   action是跳转的界面 method:表示请求方式
 
    

BOM

BOM的概念介绍

1.BOM面向对象的思维
2.将真实的浏览器转成JS的内存对象window对象
3.调用window对象，相当于调用浏览器的功能
4，因为BOM的存在，我们就可以在js代码和浏览器进行对话

window对象的常见属性

1.  localtion   浏览器输入地址框的抽象，使用他可以进行地址的获取或指定地址的加载
2.  document 将整个页面抽象的对象
3.  localStorage 浏览器的持久化存储方式，不删一直有数据
4.  sessionStorage 浏览器的非持久存储方式页面关闭就消失

window的三个提示框

window.alert("普通的提示框")
window.confirm("确定提示框")--返回true/false
window.prompt("输入提示框")--返回字符串

DOM(重点)

dom的概念

1. DOM就是将文档页面抽象成document
2. 通过document对象的方法，完成对文档的

dom的元素节点操作

1. 查找元素节点对象
    1.1直接查找，根据元素节点的标识来查找
        var 单个对象 = document.getElementById("id值");
        var对象数组=document.getElementsByClassName("class值");
        var 对象数组 = document.getElementsByTagName("元素名");
    1.2间接查找：根据元素节点之间的父子关系查找
        1.2.1父找子
            var 子元素数组=父元素节点.children;
        1.2.2子找父
            var 父标签=子标签节点.parentElement;
2.删除元素节点对象
    元素节点.remove();
3.添加元素节点对象
    创建元素节点
       var 新元素节点 = document.createElement("标签名")
     元素节点内添加其他元素节点
       父元素节点.appendChild(新元素节点)
4.替换元素节点对象 【了解】
   父元素节点.repalce(旧节点 被替换,新节点 替换后);  

DOM的文本节点操作

innerText  不会解析标签(元素节点.innerText)
innerHTML: 会解析标签
查询-----document
1.可以根据id查询----document.getElementById
2.可以根据标签名查询---document.getElementsByTagName
3.根据类名查询--document.getElementsByClassName
4.孩子节点----   .children
5.父节点-------   .parentElement
6.弟节点-------   .nextElementSibling;
7.兄节点-------   .previousElementSibling

JavaScript事件驱动

鼠标事件： HTML DOM 事件对象 | 菜鸟教程

键盘事件： HTML DOM 事件对象 | 菜鸟教程

表单事件： HTML DOM 事件对象 | 菜鸟教程

事件记忆

鼠标: onclick ondblclick
键盘: onkeydown onkeyup
表单: onchange onsubmit

正则表达式（了解，ai自动生成需要的）

元字符

[]表达式---包含
^n---以n开头
[^]-----取反（或不存在）
\d 数字
\w 数字字母下划线

量词

n{x}---重复x次
n{x,y}--重复x到y次
+：一次或多次