一、DOM
1.DOM介绍
DOM全称为 “Document Object Model”,文档对象模型,提供操作HTML文档的方法。(注:每个html文件在浏览器中都视为一篇文档,操作文档实际就是操作页面元素。)
当网页加载时,浏览器就会自动创建当前页面的文档对象模型(DOM)。在DOM中,文档的所有部分(例如元素、属性、文本等)都会被组织成一个树结构(类似于族谱),树中每一个分支的终点称为一个节点,每个节点都是一个对象。
2.获取节点
DOM为我们提供了一个全局内置对象document
,要操作HTML标签,我们可以调用document
对象中的各种方法来获取页面中的标签(在js中我们可以称之为 元素 或者 节点)
根据CSS选择器来获取DOM元素
1.选择匹配的第一个元素
// 返回值:CSS选择器匹配的第一个元素。如果没有匹配到,则返回null。
document.querySelector('css选择器')
2.择匹配的多个元素
// 返回值:CSS选择器匹配的NodeList对象集合 是一个伪数组
document.querySelectorAll('css选择器')
通过ID获取DOM元素
document.getElementById('box')
通过class名获取DOM元素
document.getElementsByClassName('text');
通过标签名获取DOM元素
document.getElementsByTagName('li')//获取到页面中所有的li标签
3.操作HTML内容
节点.innerHTML
: 读取或设置元素文本内容,可识别标签语法
节点.innerText
: 读取或设置元素文本内容,不能识别标签语法
<script> // innerHTML 获取元素的内容 (从标签开始到结束标签 之间所以的内容) let Box = document.getElementById('box'); // 大于标签里的内容 console.log(Box.innerHTML); let Span = document.getElementsByTagName('span') // console.log(Span[0].innerHTML); // 标签[0] 替换为 感觉大家不是很激情 // Span[0].innerHTML = '感觉大家不是很激情'; // 会把原本的给替换掉 // 我就想在它这个标签原本基础上 后面添加上这句话 // 通过赋值方法+= // 获取到当前 Span[0].innerHTML 然后进行拼接 (+) 你需要修改的内容 (=) 赋值 Span[0].innerHTML // Span[0].innerHTML = Span[0].innerHTML + '感觉大家不是很激情' ; // x = x + 2 ===> 简化 x+=2; ; Span[0].innerHTML += '感觉大家不是很激情'; let text = document.querySelector('.text'); console.log(text); // text.innerHTML='123' // 插入个标签 innerHTML会解析标签 // text.innerHTML='<a href="https://www.baidu.com/">点我 带你看个好东西</a>' // innerText 不会解析标签 text.innerText='<a href="https://www.baidu.com/">点我 带你看个好东西</a>' </script>
4.操作节点的标签属性
直接使用 节点.属性
的方式。eg:console.log(节点.id);
节点.title = "新的title"
。class名字不能 .class
,而是使用 .className
代替。
// 获取到我在div标签属性里面 // 获取到我取id名 console.log(Box.id); //获取标签 标题的描述 console.log(Box.title);
5.操作样式
访问元素节点的style属性,获取样式对象;样式对象中包含CSS属性,使用点语法操作。
p.style.color = "white";
p.style.width = "300px";
p.style.fontSize = "20px";
注意: 如果css属性名包含连接符,使用JS访问时,一律去掉连接符,改为驼峰, font-size -> fontSize。
使用 .className
可以来操作标签的类名,但是需要新加一个类名,或者去掉某个类名时,使用.className
较为麻烦。所以推荐使用.classList` 来操作类名。
添加:节点.classList.add("类名")
。
移除:节点.classList.remove("类名")
。
切换(有则删,无则加):节点.classList.toggle("类名")
。
let title =document.querySelector('.tit1'); // 修改文字颜色 title.style.color='green'; // 需要访问元素节点 style属性 来获取样式对象 样式对象里面包含css属性 // 添加个宽度 title.style.width = '250px'; //文字大小 title.style.fontSize = '30px'
6.创建、添加、删除节点
创建节点:createElement 创建一个元素节点;
添加节点:
appendChild 元素最后添加一个子节点;
insertBefore 在元素某个子节点之前添加新子节点,第一个参数为新节点,第二个参数为已存在的子节点。
替换节点:replaceChild 用新节点替换某个子节点,第一个参数为新节点,第二个参数为已存在的某个子节点。
删除节点:removeChild 删除元素的某个子节点。
let wrap =document.querySelector('.wrap'); // console.log(wrap); // 先创建一个新节点 let newP =document.createElement('p'); // 添加节点 在网页的控制台(Elements查看) wrap.appendChild(newP) // 在你创建的标签里面插入文本内容 createTextNode() let text = document.createTextNode('是个大帅哥') // 给newp添加上你创建的文本内容 newP.appendChild(text) // 创建一个新的节点 let box=document.createElement('a'); box.innerHTML='超级喜欢听它的课111'; // wrap.appendChild(box); // 在wrap上的第二个子节点前面进行插入 insertBefore(添加到新节点,在第几个子节点位置插入) wrap.insertBefore(box,wrap.children[1]); // children 打印元素子节点集合 // console.log(wrap.children); // 替换节点 // 创建个新的节点 let boss =document.createElement('h2'); // 插入点文字 在创建新的h2上 boss.innerHTML ='无限老师'; // 替换 把wrap第一个子节点替换掉 // 先获取到我需要替换的值 // console.log(wrap.children[0]); // replaceChild(替换新的值, 别替换掉的值) wrap.replaceChild(boss,wrap.children[0]); // 删除节点 把wrap的第三子节点删除 wrap.removeChild(wrap.children[2]);
7.监听事件
事件是达到某个事先设定的条件,自动触发的动作。例如点击了某个按钮、在文本框中输入文本、按下键盘上的某个按键、移动鼠标等等。我们可以使用 JavaScript中的监听事件来检测事件是否发生并执行某些特定的程序。
事件种类
鼠标事件: onclick 左键单击 ondblclick 左键双击
onmouseover onmouseenter 鼠标移入 onmouseout
onmouseleave鼠标移出
onmousedown 鼠标按下 onmousmove 鼠标移动
onmouseup 鼠标抬起 oncontextmenu 右键单击
键盘事件:onkeydown onkeypress 键按下 onkeyup 键抬起
系统事件: onload 加载完成后 onerror 加载出错后
onresize 窗口调整大小时 onscroll 滚动时
表单事件: onfocus 获取焦点后
onblur 失去焦点后 onchange 改变内容后
onreset 重置后 onselect 选择后 onsubmit 提交后
代码书写步骤
获取事件源:
document.getElementById(“box”);
绑定事件: 事件源box.事件onclick = function(){ 事件驱动程序 };
二、BOM
1.BOM介绍
浏览器对象模型(Browser Object Model,简称 BOM)是 JavaScript 的组成部分之一,BOM 赋予了 JavaScript 程序与浏览器交互的能力。
window对象是BOM 的核心,用来表示当前浏览器窗口,其中提供了一系列用来操作或访问浏览器的方法和属性。另外,JavaScript中的所有全局对象、函数以及变量也都属于window 对象。
2.定时器
1.周期性定时器——每隔一段时间就执行一次代码
// 开启定时器: let timerID = setInterval(function, interval); /* 参数 : function : 需要执行的代码,可以传入函数名;或匿名函数 interval : 时间间隔,默认以毫秒为单位 1s = 1000ms 返回值 : 返回定时器的ID,用于关闭定时器 */ // 关闭指定id对应的定时器 clearInterval(timerID);
2.一次性定时器——等待多久之后执行一次代码
// 开启超时调用: let timerId = setTimeout(function,timeout); // 关闭超时调用: clearTimeout(timerId);
3.对象属性
window的大部分属性又是对象类型
history:保存当前窗口所访问过的URL
back() 对应浏览器窗口的后退按钮,访问前一个记录
forward() 对应前进按钮,访问记录中的下一个URL
location:保存当前窗口的地址栏信息(URL)
- 属性:`href 设置或读取当前窗口的地址栏信息
navigator:获取浏览器相关的信息。
<script> // 用户当前的url信息 console.log(location); // 操作一下 点击页面文档 跳转对应的地址 document.onclick =function(){ location.href='https://www.bilibili.com/' } // 返回 当前窗口上一条历史记录 history.back(); // 返回下一条历史记录 history.forward(); // 放回浏览器相关信息 console.log(navigator); </script>
4.Math对象
Math对象主要提供一些列数学运算的方法
属性:圆周率 : Math.PI
我们主要用的就是他里面的随机数方法
Math.random() 随机生成0到1之间的数 包括0不包括1
Math.ceil() 向上取整(天花板值) 遇到小数向上取整
Math.floor() 向下取整(地板值) 遇到小数向下取整
Math.round() 四舍五入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 表达一个圆周率
console.log(Math.PI);
// Math对象具有数学常数 函数数学和方法 执行数学相关运算
console.log(Math);
// math.abs() 函数返回指定数值的绝对值
console.log(Math.abs(-10));// 正数 10 绝对值只能是正数
console.log(Math.abs());// NaN 放的不是数值那就是NaN
console.log(Math.abs(null));//0 除了null 表示 0
// 伪随机数 取值 0-1之间
console.log(Math.random());
// 取0~100 随机数
let num=Math.random()*100;
console.log(num);
// 取整数 parseInt()
console.log(parseInt(num));
// 四舍五入 Math.round()
console.log( Math.round(11.5));
console.log( Math.round(-22.5));// -22 整数的话才是23
// Math.floor 向下取整
console.log(Math.floor(11.5));
// 负数向下取整 相当于回退了一位
console.log(Math.floor(-12.95)); //-13
// 向上取整 遇到小数就向上取整
console.log(Math.ceil(12.1));
</script>
</body>
</html>
5.日期对象
1.创建日期对象
let date1 = new Date("2022/11/11");
let date2 = new Date("2011/11/11 11:11:11");
2.日期对象方法
getTime() 返回一个毫秒值 到时间零点的距离
getFullYear() 返回年
getMonth() 返回月 注意:得到的月份是从0开始 要返回当前月需要加1
getDate() 返回日期
getHours() 返回小时
getMinutes() 返回分钟
getSeconds() 返回秒
getDay() 返回星期
// Date时间对象
console.log(Date()); // 常用Date方法 // 创建日期对象 let date = new Date(); // 获取年份 console.log(date.getFullYear()); // 获取月份 (0~11) 这里需要+1 console.log(date.getMonth() + 1); // 获取月份第几天 (1 - 31) console.log(date.getDate()); // 获取一周第几天 (0~6) 0值表示 星期天 6 星期六 console.log(date.getDay()); // 获取小时 (0~23) console.log(date.getHours()); // 获取分钟 (0~59) console.log(date.getMinutes()); // 获取秒 console.log(date.getSeconds());
版权归原作者 人生の三重奏 所有, 如有侵权,请联系我们删除。