python学习day53 前端BOM DOM
https://www.cnblogs.com/liwenzhou/p/8011504.html
BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏览器进行“对话”。
DOM (Document Object Model)是指文档对象模型,通过它,可以访问HTML文档的所有元素。
BOM
location相关
- location.href
- location.href="http://www.sogo.com"
- location.reload()
DOM
一、JS通过DOM操作HTML
- 1. 改标签(标签的内容)
- 2. 改标签的属性
- 3. 改样式
- 4. 事件相关
二、操作标签
1. JS查找标签
- 1. 直接查找
- 1. 通过ID document.getElementById("ID值")
- 2. 通过class找 document.getElementsByClassName("class名")
- 3. 通过标签名找 document.getElementsByTagName("标签名")
2. 间接查找
- 1. 找父标签
- 2. 找字标签们
- 3. 找第一个子标签
- 4. 找最后一个子标签
- 5. 找上一个兄弟标签
- 6. 找下一个兄弟标签
2. 创建标签
- 1. 语法: document.createElement("标签名") *****
3. 添加标签
- 1. 在内部最后添加: 父标签.appendChild(新创建的标签)
- 2. 在内部指定标签前面添加: 父标签.insertBefore(新创建的标签,指定标签)
4. 删除标签
- 1. 从父标签里面删除指定的标签: 父标签.removeChild(指定的标签)
5. 替换
- 1. 在父标签里面用新创建的标签替换指定标签: 父标签.replaceChild(新创建的标签,指定的标签)
三、操作标签的属性
1. 常用的属性 *****
- 1. innerHTML --> 全部(子标签及子标签的文本内容)
- 2. innerText --> 标签(子标签)的文本内容
2. 标签的属性
- 1. .setAttribute("age","18") --> 设置属性
- 2. .getAttribute("age") --> 获取属性的值
- 3. .removeAttribute("age") --> 删除指定的属性
对于标签默认的属性
1. a标签.href/img标签.src
2. a标签.href="http://www.sogo.com"/img标签.src="..."
四、 获取值(input/select/textarea)
- input标签.value()
- select标签.value()
- textarea标签.value()
五、操作标签的样式
- 1. 通过class名去改变样式
- 1. 获取标签所有样式类
1. .className --> 得到的是字符串
2. .classList --> 得到的是数组
- 2. 使用classList操作样式
1. .classList.contains("样式类") --> 判断包不包含指定的样式类
2. .classList.add("样式类") --> 添加指定的样式类
3. .classList.remove("样式类") --> 删除指定的样式类
4. .classList.toggle("样式类") --> 有就删除没有就添加
- 2. 通过.style直接修改CSS属性
- 1. CSS属性带中横线的
background-color: red;
.style.backgroundColor=green;
- 2. CSS属性中不带中横线的
.style.color=red;
六、事件相关
0. 注意:
- 涉及到DOM操作的JS代码要放在body标签内部的最下面!!!
1. 绑定事件的方式
- 1. 在标签内通过属性来设置(onclick=foo(this)) this指的是当前触发事件的标签!!!
- 2. 通过JS代码绑定事件
2. 常用的事件
- 1. onclick 当用户点击某个对象时调用的事件句柄。
- 2. ondblclick 当用户双击某个对象时调用的事件句柄。
- 3. onfocus 元素获得焦点。 // 练习:搜索框
- 4. onblur 元素失去焦点。 应用场景:用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
- 5. onchange 域的内容被改变。 (select联动示例)
定时器
<!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"> <title>定时器</title> <script> var intervalId; function f() { var timeStr = (new Date()).toLocaleString(); var inputEle = document.getElementById("i1"); inputEle.value = timeStr; } function start() { f(); if (intervalId === undefined) { intervalId = setInterval(f, 1000); } } function end() { clearInterval(intervalId); intervalId = undefined; } </script> </head> <body> <input type="text" id="i1"> <input type="button" value="开始" id="start" onclick="start();"> <input type="button" value="结束" id="end" onclick="end();"> </body> </html> 定时器示例
节点操作
创建 删除 替换 添加
attribute
创建节点
获取值操作
语法:
elementNode.value
适用于以下标签:
- .input
- .select
- .textarea
事件
常用事件
- 1. onclick
- 2. ondbclick
- 3. onfocus
- 4. onblur
- 5.onchange
定时器
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>定时器练习</title> </head> <body> <input id="i1" type="text"> <input id="start" type="button" value="开始"> <input id="stop" type="button" value="停止"> <script> // 声明一个全局的t,保存定时器的ID var t; // 在input框里显示当前时间 // 1. 获取当前时间 function foo() { var now = new Date(); var nowStr = now.toLocaleString(); // 2. 把时间字符串填到input框里 var i1Ele = document.getElementById("i1"); i1Ele.value = nowStr; } // 点开始让时间动起来 // 找到开始按钮,给它绑定事件 var startButton = document.getElementById("start"); startButton.onclick=function () { foo(); // 每隔一秒钟执行foo if (t===undefined){ t = setInterval(foo, 1000); // 把定时器的ID复制给之前声明的全局变量t } }; // 点停止 // 找到停止按钮,给它绑定事件 var stopButton = document.getElementById("stop"); stopButton.onclick=function () { // 清除之前设置的定时器 clearInterval(t); // 清除t对应的那个定时器,t的值还在 console.log(t); t = undefined; } </script> </body> </html>
搜索框实例
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>搜索框示例</title> </head> <body> <input type="text" id="i1" value="对子哈特"> <input type="button" value="搜索"> <script> // 找到input框 var i1Ele = document.getElementById("i1"); i1Ele.onfocus=function () { // 把value清空 this.value=""; }; i1Ele.onblur=function () { // 失去焦点之后 如果值为空 就填回去 if (!this.value.trim()){ this.value="对子哈特"; } } </script> </body> </html>
select联动
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>select联动示例</title> </head> <body> <select id="s1"> <option value="0">--请选择--</option> <option value="1">北京</option> <option value="2">上海</option> </select> <select id="s2"></select> <script> var data = {1: ["昌平区", "朝阳区", "海淀区"], 2: ["静安区", "闵行区", "浦东区"]}; // 给第一个select绑定事件,绑定的是onchange事件 var s1Ele = document.getElementById("s1"); s1Ele.onchange = function () { // 取到你选的是哪一个市 console.log(this.value); // 把对应市的区填到第二个select框里面 var areas = data[this.value]; // 取到市对应的区 // 找到s2 var s2Ele = document.getElementById("s2"); // 清空之前的 s2Ele.innerHTML=""; // 生成option标签 for (var i = 0; i < areas.length; i++) { var opEle = document.createElement("option"); opEle.innerText = areas[i]; // 添加到select内部 s2Ele.appendChild(opEle); } } </script> </body> </html>