BOM和DOM
BOM和DOM
BOM(Browser Object Model)是指浏览器对象模型，js操作浏览器
DOM(Document Object Model)是指文档对象模型，js访问HTML文档的所有元素。
BOM
window对象
window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
window.open() - 打开新窗口
window.close() - 关闭当前窗口 (只能关闭用js的window.open()打开的页面，了解一下就行了)
location对象
location.href 获取URL
location.href="URL" // 跳转到指定页面
location.reload() 重新加载页面,就是刷新一下页面
计时相关
setTimeout('js语句',毫秒)
function f(){
alert('你好');
};
var t=setTimeout(f,2000);
alert: 你好
clearTimeout(t);/清除
setInterval('js语句',时间间隔)//每个一段事件做一些事情
clearInterval(timer);//清除
DOM
HTML DOM树
DOM标准规定HTML文档中的每个成分都是一个节点(node)：
文档节点(document对象)：代表整个文档
元素节点(element 对象)：代表一个元素（标签）
文本节点(text对象)：代表元素（标签）中的文本
属性节点(attribute对象)：代表一个属性，元素（标签）才有属性
注释是注释节点(comment对象)
查找标签 节点操作（标签） 创建节点： var dive=document.createElement('div'); dive <div></div> 添加节点 追加子节点 var a=document.createElement('a'); dive.appendChild(a); <a></a> 放到某个节点前面 删除子节点 dive.removeChild(a); <a></a> dive <div></div> 替换子节点 dive.replaceChild(p,a); <a></a> dive <div><h1></h1></div> 属性节点 var divEle = document.getElementById("d1") divEle.innerText #输入这个指令，一执行就能获取该标签和内部所有标签的文本内容 divEle.innerHTML #获取的是该标签内的所有内容，包括文本和标签 var divEle = document.getElementById("d1") divEle.innerText="1" divEle.innerHTML="<p>2</p>" #能识别成一个p标签 属性操作 var divEle = document.getElementById("d1"); divEle.setAttribute("age","18") #比较规范的写法 divEle.getAttribute("age") divEle.removeAttribute("age" 获取值操作 input select textarea node.value class操作 dive.classList.add('c1');#添加类 dive <div age="18" class="c1"><a>123</a></div> classList.contains(cls) 存在返回true，否则返回false classList.toggle(cls) 存在就删除，否则添加，toggle的意思是切换，有了就给你删除，如果没有就给你加一个 指定CSS操作 dive.style.marginTop=0; 0 dive <div age="18" class style="margin-top: 0px;">…</div>
事件
事件 绑定方式 方式一（不常用） <div id="d1" onclick="changeColor(this);">点我</div> <script> function changeColor(ths) { ths.style.backgroundColor="green"; } </script> 注意： this是实参，表示触发事件的当前元素。 函数定义过程中的ths为形参。 方式二（推荐）：一般是将script标签写道body标签的最下面 <div id="d2">点我</div> <script> var divEle2 = document.getElementById("d2"); divEle2.onclick=function () { //console.log(this) this.innerText="呵呵"; #哪个标签触发的这个事件，this就指向谁 } </script> 具体一些事件 *** onclick 当用户点击某个对象时调用的事件句柄。 ondblclick 当用户双击某个对象时调用的事件句柄。 *** onfocus 元素获得焦点。 // 练习：输入框,得到光标 *** onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.，移走光标 *** onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动） onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交. onkeypress 某个键盘按键被按下并松开。 onkeyup 某个键盘按键被松开。 onload 一张页面或一幅图像完成加载。 onmousedown 鼠标按钮被按下。 onmousemove 鼠标被移动。 onmouseout 鼠标从某元素移开。 onmouseover 鼠标移到某元素之上。 onselect 在文本框中的文本被选中时发生。 onsubmit 确认按钮被点击，使用的对象是form。
综合练习
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>input时间框</title> </head> <body> <div> <input type="text" id="inp"> <button id="btn1">开始</button> <button id="btn2">结束</button> </div> <script> // 1.点击开始按钮，显示当前时间 function f() { // 0.初始化时间 var date = new Date(); current_time = date.toLocaleString(); console.log(typeof current_time); //得到input的标签 var inpt = document.getElementById('inp'); //给input标签添加value属性和值 inpt.setAttribute('value', current_time); } // 2.时间计时器，一秒一秒的走 var b1 = document.getElementById('btn1'); //给btn1增加点击事件 // 设置为全局变量是为了让btn1 btn2点击的时候都能用该变量 var tim; b1.onclick = function () { //第一次tim为undefined，让他在当前时间上循环时间 if (tim === undefined) { // 学会interval的用法 tim = setInterval(f, 1000); } }; // 3.点击结束按钮，结束计时 var b2 = document.getElementById('btn2'); b2.onclick = function () { //点击b2清除时间 clearInterval(tim); //结束后将tim设置成undefined以便循环使用 tim = undefined; } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>select联动</title> </head> <body> 省份：<select name="123" id="province"> <!--<option value="">----</option>--> </select> 城市：<select name="123" id="city"></select> <script> data = {"河北省": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]}; //1.遍历出省份，然后创建op标签，给op标签添加省份，然后在添加到select标签中 var pro_sel = document.getElementById('province'); var city = document.getElementById('city'); for (var one_pro in data) { // 1.得到省份one_pro var pro_op = document.createElement('option'); // 2.给标签添加内容 pro_op.innerText = one_pro; // 3.得到select标签,追加一个子节点 pro_sel.appendChild(pro_op) } // 2.初识化 打开网页就有城市 var first_pro = pro_sel.value; var fisrt_city = data[first_pro]; for (var fir_c_index in fisrt_city) { fir_name = fisrt_city[fir_c_index]; var fir_op = document.createElement('option'); fir_op.innerText = fir_name; city.appendChild(fir_op); } // 3.联动城市 pro_sel.onchange = function () { // 得到的是所选省份的索引 // console.log(this.selectedIndex); //options[索引]得到的是option标签，innerHTML得到是该option标签的值 // console.log(this.options[2].innerHTML); //只要变，得到的是每一个省份的值 console.log(pro_sel.value); // 通过数据里面的键得到城市数组 var city_arr = data[pro_sel.value]; console.log(city_arr); // 每次改变的时候都要清空里面的标签 city.innerHTML = ''; // 遍历所得到的城市数组，得到的是索引 for (var city_index in city_arr) { console.log(city_index); //通过索引找到城市数组的名字 city_name = city_arr[city_index]; // 1.创建option标签，给op标签添加内容，在添加到夫标签select标签中 var city_op = document.createElement('option'); city_op.innerText = city_name; city.appendChild(city_op); } } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>搜索框示例</title> </head> <body> <script> function focus1(){ //如果在标签中写的blur()等方法，没有传入this参数，那么我们就需要自己来获取一下这个标签，例如下面的getElementById('d1') var inputEle=document.getElementById("d1"); console.log(1111); if (inputEle.value==="请输入关键字"){ inputEle.value=""; //inputEle.setAttribute('value','') } } function blur1(){ console.log(1111); var inputEle=document.getElementById("d1"); var val=inputEle.value; if(!val.trim()){ inputEle.value="请输入关键字"; } } </script> <input id="d1" type="text" value="请输入关键字" onblur="blur1()" onfocus="focus1()"/> <input type="submit" onclick=blur1()> </body> </html>
