一、JavaScript的历史
一、什么是DOM
- DOM 是 W3C（万维网联盟）的标准。DOM定义了可以访问XML和HTML文档的标准。
- 什么是 XML DOM？ －－－－>XML DOM 定义了所有 XML 元素的对象和属性，以及访问它们的方法。
- 什么是 HTML DOM？－－－－>HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。
二、DOM节点
根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点(NODE)：
- 整个文档是一个文档节点(document对象)
- 每个 HTML 元素是元素节点(element 对象)
- HTML 元素内的文本是文本节点(text对象)
- 每个 HTML 属性是属性节点(attribute对象)
- 注释是注释节点(comment对象)
dom树是为了展示文档中各个对象之间的关系，用于对象的导航。
而一个NODE对象包含两部分
-
- 节点（自身）属性
- attributers 节点属性
- nodetype 节点类型
- nodeValue 节点值
- nodeName 节点名称
- innerHTML 节点元素的文本值
- 导航属性
- parentNode 节点的父节点
- firstChild 节点下的第一个元素
- lastChild 节点下的最后一个元素
- childNides 节点的子节点
- 节点（自身）属性
导航属性
parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
查找元素节点
通过使用 getElementById() 方法
通过使用 getElementsByTagName() 方法 //标签类型
通过使用 getElementsByClassName() 方法
通过使用 getElementsByName() 方法 //自定义的name属性
三、节点操作
1、创建节点
var tag=document.createElement(“input")
tag.setAttribute('type','text');
2、添加节点
追加一个子节点（作为最后的子节点）
somenode.appendChild(newnode)
把增加的节点放到某个节点的前边
somenode.insertBefore(newnode,某个节点);
3、删除节点
removeChild()：获得要删除的元素，通过父元素调用删除
4、替换节点
somenode.replaceChild(newnode, 某个节点);
5、节点属性操作
- 获取文本节点的值
-
- innerText:不管你是赋值还是取值，只能识别纯文本
- innerHtml:既可以识别纯文本，也可以识别标签
-
-
// 文本属性 // 1.innerText:不管你是赋值还是取值，只能识别纯文本 var a1 = document.getElementsByClassName('c2')[0]; // console.log(a1); //取值操作 console.log(a1.innerText); //你好吗/ console.log(a1.innerHTML); //你好吗/ //赋值操作 a1.innerText='Egon'; a1.innerHTML='<a href="">hello</a>'; // 2.innerHtml:既可以识别纯文本，也可以识别标签 var b1 = document.getElementsByClassName('c2')[1]; // console.log(b1); //取值操作 console.log(b1.innerText); console.log(b1.innerHTML); //赋值操作 b1.innerText = 'lala'; b1.innerHTML = '<input type="text">';
-
- 属性操作
View Code
elementNode.setAttribute(name,value) elementNode.getAttribute(属性名) <-------------->elementNode.属性名(DHTML) elementNode.removeAttribute(“属性名”);
- 获取选中的value值
- class操作
View Code
// class属性============= var ele = document.getElementsByClassName('c1')[0]; console.log(ele.className); //打印类的名字 ele.classList.add('hide'); console.log(ele); //<div class="c1 hide" id="d1"> ele.classList.remove('hide');//吧添加的remove移除了 console.log(ele)
四、DOM Event(事件)
1、事件类型
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onfocus 元素获得焦点。 练习：输入框
onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）
onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 属性开发中 只给body元素加.这个属性的触发 标志着 页面内容被加载完成.
应用场景: 当有些事情我们希望页面加载完立刻执行,那么可以使用该事件属性.
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onmouseleave 鼠标从元素离开
onselect 文本被选中。
onsubmit 确认按钮被点击 只能给form元素使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text" class="test"> <input type="text" id="t1"> <script> //测试event对象 var ele = document.getElementsByClassName('test')[0]; // event :每次触发事件时所有的状态信息 // event.keyCode ：保存着所有的状态信息 ele.onkeydown =function (event) { // onkeydown按下键盘触发的事件 console.log(event); console.log(event.keyCode); if (event.keyCode==13){ //按回车就会弹出 alert(666) } } </script> <script type="text/javascript"> var ele=document.getElementById("t1"); ele.onkeydown=function(e){ // e=e||window.event; var keynum=e.keyCode; var keychar=String.fromCharCode(keynum); console.log(keynum); //每次键盘敲下的状态信息 console.log(keychar); //输入的字符 }; </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>onsubmit事件</title> <!--onsubmit事件:确定按钮被点击--> <!--在表单提交前验证用户输入是否正确.如果验证失败.在该方法中我们应该阻止表单的提交.--> <!--提交按钮本身就有一个默认事件（你点击提交的时候就会把数据发过去）--> </head> <body> <form action="" id="submit"> <p>姓名：<input type="text" class="name"></p> <p>年龄：<input type="text" class="age"></p> <input type="submit"> </form> <script> var ele_form = document.getElementById('submit'); var ele_name = document.getElementsByClassName('name')[0]; var ele_age = document.getElementsByClassName('age')[0]; ele_form.onsubmit = function (event) { var username = ele_name.value; var age = ele_age.value; alert(username); alert(age); if (username=='ls'){ //阻止默认事件的两种方式 // 方式一： // return false; // 方式二 // 给函数给一个形参，这个形参写什么都行，一般我们写成event event.preventDefault() //阻止默认事件（表单的提交） } } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件传播</title> <style> .box1 { width: 300px; height: 300px; background-color: rebeccapurple; } .box2{ width: 150px; height: 150px; background-color: yellow; } </style> </head> <body> <div class="box1"> <div class="box2"></div> </div> <script> //因为盒子1是盒子2的父亲，所以当给父亲绑定一个事件，给儿子也绑定一个事件，就像 // 继承一样，儿子会继承父亲的事件，所以现在运行的时候如果点击盒子2，会把自己的是事件和 // 父亲的事件都执行了。所以如果只想让儿子执行自己的事件，那么就得阻止发生事件传播 var ele1 = document.getElementsByClassName('box1')[0]; var ele2 = document.getElementsByClassName('box2')[0]; ele1.onclick = function () { alert(123) }; ele2.onclick = function (event) { alert(456); console.log(event); console.log(event.keyCode); // 阻止事件传播的方式 event.stopPropagation(); }; </script> </body> </html> <!--事件传播-->
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模拟placeholder属性的功能</title> </head> <body> <input type="text" placeholder="username" id="submit"> <input type="text" value="username" id="submit1"> <script> var ele = document.getElementById('submit1'); ele.onfocus = function () { //先获取焦点，点击输入框就获取到焦点，光标一上去就把值设成空 this.value="" }; ele.onblur = function () { // 当光标不点击那个输入框的时候就失去焦点了 //当失去焦点的时候，判断当前的那个值是不是为空，是否含有空格 // 如果为空或者有空格，用trim()去掉空格。然后赋值为username if (this.value.trim()==""){ this.value='username' } } </script> </body> </html> <!--seach示例-->
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>onchange事件</title> </head> <body> <select name="" id="s1"> <option value="">甘肃省</option> <option value="">安徽省</option> <option value="">湖北省</option> </select> <script> var ele = document.getElementById('s1'); //下拉菜单，和你当前事件不同的时候出发事件 ele.onchange= function () { alert(123) } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>二级联动</title> </head> <body> <select name="" id="s1"> <option value="">请选择省份</option> <option value="gansu">甘肃省</option> <option value="hebei">河北省</option> <option value="henan">河南省</option> </select> <select name="" id="c1"> <option value="city">请选择城市</option> </select> <script> var data = {'gansu':['兰州市','天水市','武威市'],'hebei':['保定','石家庄'],'henan':['郑州','开封']} var ele_select = document.getElementById('s1'); var ele_critys = document.getElementById('c1');//父亲标签 ele_select.onchange =function () { // alert(123) // console.log(this.value) var ele_provice = this.value; var citys = data[ele_provice]; console.log(citys); //要在没有添加之间清空，不然你点一次添加一次，点一次添加一次 //方式一 // ele_critys.children.length=1; //不可行。。但是原理和方式二的一样 //方式二 // ele_critys.options.length = 1; //留一个，一般多的是设成0了 for (var i =0;i<citys.length;i++) { //创建一个option标签 var ele_option = document.createElement('option'); //<option></option> ele_option.innerHTML = citys[i]; //得到有文本的option标签 ele_option.value = i + 1; //设置属性值 console.log(ele_option); ele_critys.appendChild(ele_option); } } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>onmouse事件</title> <style> .box{ width: 300%; height: 200px; } .title{ background: steelblue; line-height: 40px; } .con{ background: slategray; line-height: 30px; } .hide{ display: none; } </style> </head> <body> <div class="box"> <div class="title">onmouse</div> <div class="con hide"> <div><a href="" class="item">你好吗？</a></div> <div><a href="" class="item">我好啊</a></div> <div><a href="" class="item">好就好呗</a></div> </div> </div> <script> var ele_title = document.getElementsByClassName('title')[0]; var ele_box = document.getElementsByClassName('box')[0]; //鼠标指上去的事件 ele_title.onmouseover = function () { this.nextElementSibling.classList.remove('hide'); }; //鼠标移走的事件的两种方式 // 方式一（推荐） ele_box.onmouseleave= function () { ele_title.nextElementSibling.classList.add('hide'); }; // 方式二 // ele_title.onmouseout = function () { // this.nextElementSibling.classList.add('hide'); // } // 方式一和方式二的区别： // 不同点 // onmouseout：不论鼠标指针离开被选元素还是任何子元素，都会触发onmouseout事件 // onmouseleave：只有在鼠标指针离开被选元素时，才会触发onmouseleave事件 // 相同点：都是鼠标移走触发事件 </script> </body> </html> <!--onmouse-->
2、绑定事件方式
<!--绑定事件的方式一--> <div onclick="foo(this)">div</div> <div class="c1">div2</div> <script> function foo(self) { console.log(self); //<div onclick="foo(this)" style="color: red;"> self.style.color = 'red'; } <--------------------------------------------------------> //方式二 // 事件的绑定方式2：标签对象.on事件 = function (){} var ele=document.getElementsByClassName("c1")[0]; ele.onclick=function () { console.log(this); // this 代指： 当前触发时间的标签对象； this.style.fontSize="30px" };