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

发布于:2025-07-20 ⋅ 阅读:(17) ⋅ 点赞:(0)

html

前端三剑客的介绍:

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

重点属性
type="text"文本输入
type="password"密码输入
<a href="servletC"> SerlvertC</a>超链接
type="radio" value="值" 单选框
type="checkbox" value="值" 多选框
<meta charset="UTF-8"> 在<head>  作用设置编码格式
</head>   action是跳转的界面 method:表示请求方式
<form  action = "提交地址" method = "post"> 
    <input type="submit">
</form>
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次
+:一次或多次

 


网站公告

今日签到

点亮在社区的每一天
去签到