js-DOM
BOM（Browser Object Model）:指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”。
DOM （Document Object Model）是指文档对象模型，通过它，可以访问HTML文档的所有元素。
Window对象是客户端JavaScript最高层对象之一
window对象:
Window对象是客户端JavaScript最高层对象之一 window对象 所有浏览器都支持 window 对象。它表示浏览器窗口。 所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。 全局变量是 window 对象的属性。全局函数是 window 对象的方法。 接下来要讲的HTML DOM 的 document 也是 window 对象的属性之一。 一些常用的Window方法： window.innerHeight - 浏览器窗口的内部高度 window.innerWidth - 浏览器窗口的内部宽度 window.open() - 打开新窗口 window.close() - 关闭当前窗口
一、window的子对象 （了解即可）
1.navigator对象 : 浏览器对象，通过这个对象可以判定用户所使用的浏览器，包含了浏览器相关信息。(不是很准确)
2.screen对象 ：
navigator.appName // Web浏览器全称 navigator.appVersion // Web浏览器厂商和版本的详细字符串 navigator.userAgent // 客户端绝大部分信息 navigator.platform // 浏览器运行所在的操作系统
3.history对象： window.history 对象包含浏览器的历史。
4.location对象：window.location 对象用于获得当前页面的地址 (URL)。
location.href 获取URL location.href="URL" // 跳转到指定页面 location.reload() 重新加载页面
二、弹出框
2.1警告框：
当警告框出现后，用户需要点击确定按钮才能继续进行操作
用于确保用户可以得到某些信息。
alert("你确定往下执行么？");
2.2确认框：
确认框用于使用户可以验证或者接受某些信息。
用户点击确认，返回值 true，点击取消，返回值false。
confirm("你确定吗？")
2.3提示框：用于提示用户在进入页面前输入某个值
prompt("请在下方输入","你的答案")
三、计时相关：可以在一定时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。
3.1 setTimeout() ： 一段时间执行
语法：
var t=setTimeout("JS语句",毫秒)--->1000毫秒=1秒
执行后返回某个值 ，存在t中
3.2 clearTimeout() ：取消setTimeout设置
// 在指定时间之后执行一次相应函数
var timer = setTimeout(function(){alert(123);}, 3000)
// 取消setTimeout设置
clearTimeout(timer);
3.3 setInterval() 按照指定的周期（以毫秒计）来不停调用函数或计算表达式，直到clearInterval() 被调用或窗口被关闭
注：clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。
// 每隔一段时间就执行一次相应函数
var timer = setInterval(function(){console.log(123);}, 3000)
// 取消setInterval设置
clearInterval(timer);
3.4 做一个定时器
<!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>
DOM
DOM（Document Object Model）是一套对文档的内容进行抽象和概念化的方法。
JavaScript 可以通过DOM创建动态的 HTML：
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反应
一、查找标签
document.getElementById //根据ID获取一个标签 document.getElementsByClassName //根据class属性获取 document.getElementsByTagName //根据标签名获取标签合集 注：由于类和标签都有多个，所以Element(元素)要加s
二、间接查找
parentElement 父节点标签元素 children 所有子标签 firstElementChild 第一个子标签元素 lastElementChild 最后一个子标签元素 nextElementSibling 下一个兄弟标签元素 previousElementSibling 上一个兄弟标签元素 注：使用规则都是 元素名.parentElement
三、节点操作
3.1创建节点
var divEle = document.createElement("div");
3.2添加节点
var imgEle=document.createElement("img"); //创建Img标签
imgEle.setAttribute("src", "http://image11.m1905.cn/uploadfile/s2010/0205/20100205083613178.jpg"); //设置img标签属性
var d1Ele = document.getElementById("d1"); //找到d1标签
d1Ele.appendChild(imgEle); //在d1标签后面添加img 标签
3.4删除节点：
3.5 替换节点：
四、属性节点 **
4.1 获取文本节点的值：
var divEle = document.getElementById("d1")
divEle.innerText //只获取标签内文本
divEle.innerHTML //获取标签内文本，还获取标签
4.2 设置文本节点的值：
var divEle = document.getElementById("d1") divEle.innerText="1" //给d1标签内文本重新赋值 divEle.innerHTML="<p>2</p>" //给HTML文本都改为 2
五、attribute操作
var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")
divEle.getAttribute("age")
divEle.removeAttribute("age")
// 自带的属性还可以直接.属性名来获取和设置
imgEle.src
imgEle.src="..."‘’
六、获取值操作
语法：elementNode.value
适用于以下标签：
- .input
- .select
- .textarea
var iEle = document.getElementById("i1");
console.log(iEle.value);
七、class的操作
className 获取所有样式类名(字符串)
classList.remove(cls) 删除指定类
classList.add(cls) 添加类
classList.contains(cls) 存在返回true，否则返回false
classList.toggle(cls) 存在就删除，否则添加
指定CSS操作
obj.style.backgroundColor="red"
JS操作CSS属性的规律：
1.对于没有中横线的CSS属性一般直接使用style.属性名即可。如：
obj.style.margin
obj.style.width
obj.style.left
obj.style.position
2.对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可。如：
obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily
一、事件
HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作。
常用事件
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onfocus 元素获得焦点。 // 练习：搜索输入框
onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）
onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onselect 在文本框中的文本被选中时发生。
onsubmit 确认按钮被点击，使用的对象是form。
绑定方式：
方式一：
<div id="d1" onclick="changeColor(this);">点我</div> <script> function changeColor(ths) { ths.style.backgroundColor="green"; } </script>
注意：
this是实参，表示触发事件的当前元素。
函数定义过程中的ths为形参。
方式二：
<div id="d2">点我</div> <script> var divEle2 = document.getElementById("d2"); divEle2.onclick=function () { this.innerText="呵呵"; } </script>
事件示例：
<!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>
<!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>
