第五模块 WEB开发基础之DOM
1. 快速认识DOM
<!DOCTYPE html> <html> <head> <title>DOM</title> </head> <body> DOM: document object model 文档对象模型 js中对象分为三种: 1. 用户定义对象 2. 内建对象 array date math 3. 宿主对象 window 将dom看做一颗树. dom把文档看作一颗家谱树. 在html中, 标签就是dom对象, 这些dom对象又构成了家谱树(节点树). </body> </html>
2. DOM中节点分类
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>02 节点</title> </head> <body> <p title="我是mjj" class="" id="">mjj</p> <ul> <li></li> </ul> <!-- 节点 node--> <!-- 1.元素节点(element node) 2.文本节点 (text node) 3.属性节点 (attribue node)--> <!-- 没有内容 的文档是没有任何价值的,而大多数内容都是有文本提供--> </body> </html>
3. 获取元素节点对象的方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>class list</title> </head> <body> <h2>你要买什么课程?</h2> <p title='请您选择购买的课程'>本课程是web全栈课程,期待你的购买!</p> <ul id='classList'> <li class='item'>JavaScript</li> <li class='item'>css</li> <li>DOM</li> </ul> <!-- 节点类型: 1.元素节点 2.属性节点 3.文本节点 --> <script type="text/javascript"> // 1.document.getElementById() 单个对象 var eleNode = document.getElementById('classList'); console.log(eleNode); console.log(typeof eleNode); // 2.document.getElementsByTagName() 获取出来的是一个节点对象集合 有点像数组 push() var olis = document.getElementsByTagName('li'); var oTitle = document.getElementsByTagName('h2'); console.log(oTitle[0]); console.log(olis.length); for(var i = 0; i < olis.length; i ++){ console.log(olis[i]); } console.log(typeof olis); // 3.document.getElementsByClassName('item');获取出来的是一个节点对象集合 var oItems = document.getElementsByClassName('item'); console.log(oItems); </script> </body> </html>
4. setAttribute()和getAttribute()用法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>class list</title> <style type="text/css"> #box{ color: red; } </style> </head> <body> <h2>你要买什么课程?</h2> <p title='请您选择购买的课程'>本课程是web全栈课程,期待你的购买!</p> <ul id='classList'> <li class='item'>JavaScript</li> <li class='item'>css</li> <li>DOM</li> </ul> <!-- --> <script type="text/javascript"> var oP = document.getElementsByTagName('p')[0]; // 获取属性值 有一个必需的参数,这个节点对象的名字 var title = oP.getAttribute('title'); var className = oP.getAttribute('class'); console.log(title); console.log(className); // 设置属性值 setAttribute(name,value) oP.setAttribute('id', 'box');
// 通过js设置的属性并不会反映在源码中 </script> </body> </html>
5. 节点对象的三个属性介绍
1. nodeName: 节点的名称 2. nodeValue: 节点的值 3. nodeType: 节点的类型 1. nodeName属性: 节点的名称, 只读 1. 元素节点的nodeName与标签名相同 2. 属性节点的nodeName与属性的名称相同 3. 文本节点的nodeName永远是 #text 4. 注释节点的nodeName永远是 #comment 5. 文档节点的nodeName永远是#document 2. nodeValue属性: 节点的值 1. 元素节点的nodeValue是undefined或null 2. 文本节点的nodeValue是文本自身 3. 属性节点的nodeValue是属性的值 3. nodeType属性: 节点的类型, 只读(浏览器不同, 值可能不同) 以下常用的几种节点类型: 元素类型 节点类型 元素 1 属性 2 文本 3 注释 8 文档 9
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>节点属性</title> </head> <body> <!-- nodeName nodeValue nodeType --> <div id="box" title="我是文本">我是一个文本节点<!--我是注释--></div> <script type="text/javascript"> // 1.元素节点 var oDiv = document.getElementById('box'); console.log(oDiv.nodeName + "| " + oDiv.nodeValue + "| " + oDiv.nodeType); // 2.获取属性节点 var attrNode = oDiv.attributes[0]; console.log(attrNode.nodeName + "| " + attrNode.nodeValue + "| " + attrNode.nodeType);
// 3.获取文本节点 var textNode = oDiv.childNodes[0]; console.log(textNode.nodeName + "| " + textNode.nodeValue + "| " + textNode.nodeType); // 4.获取注释节点 var commentNode = oDiv.childNodes[1]; console.log(commentNode.nodeName + "| " + commentNode.nodeValue + "| " + commentNode.nodeType); console.log(document.nodeType); </script> </body> </html>
6. 节点对象的常用属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>节点对象的其它常用属性</title> </head> <body> <div class="previous">我是上个兄弟</div> <div id="father"> <p>mjj</p> <p>mjj2</p> </div> <div class="sibling">我是下个兄弟</div> <script type="text/javascript"> var oFather = document.getElementById('father'); console.log(oFather.childNodes); // 在chrome浏览器上会获取到text和p, 其中text指空格,在IE浏览器上只能获取到p. // console.log(oFather.childNodes[0]); // console.log(oFather.firstChild); // console.log(oFather.childNodes[oFather.childNodes.length - 1]); // console.log(oFather.lastChild); // console.log(oFather.parentNode.parentNode); console.log(oFather.nextSibling); // console.log(oFather.previousSibling);
// 节点对象属性在各浏览器兼容性处理 function get_childNodes(fatherNode){ var nodes = fatherNode.childNodes; var arr = [];//保存已经获取的元素节点对象 for(var i = 0; i < nodes.length; i++){ if (nodes[i].nodeType === 1) { arr.push(nodes[i]); } } return arr; } var childnodes = get_childNodes(oFather); console.log(childnodes[0]); function get_nextSibling(n){ var x = n.nextSibling; while(x && x.nodeType != 1){ x = x.nextSibling; } return x; } console.log(get_nextSibling(oFather)); </script> </body> </html>
7. 元素节点对象的增删改查方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>07 节点方法</title> <style type="text/css"> .active{ color: red; font-size: 30px; } </style> </head> <body> <div id="box"> <p id="active">mjj</p> </div> <!-- 动态的操作节点 1.创建节点 createElement() 2.插入节点 appendChild() insertBefore(newNode,node) 3.删除节点 removeChild(childNode) 4.替换节点 replaceChild(newNode,node) 5.创建文本节点 createTextNode() --> <script type="text/javascript"> var oDiv = document.getElementById('box'); var oAtive = document.getElementById('active'); var newNode = document.createElement('p'); var newNode2 = document.createElement('p'); var newNode3 = document.createElement('a'); console.log(newNode === newNode2);// 两个节点不同 newNode.innerHTML = '<a href="#">alex@qq.com</a>'; //渲染标签, 并插入文本 newNode2.innerHTML = '<a href="#">mjj@qq.com</a>'; newNode3.setAttribute('href','http://www.baidu.com'); newNode3.innerHTML = '百度一下'; newNode.setAttribute('class', 'active'); oDiv.appendChild(newNode); // 第一个参数是新插入的节点,第二个参数是参考的节点 oDiv.insertBefore(newNode2,oAtive); /* var textNode = document.createTextNode('alex'); newNode.appendChild(textNode); */ // newNode = null;//释放对象, 从内存中释放掉,放在最后 // oDiv.removeChild(oAtive); 删除操作 oDiv.replaceChild(newNode3, oAtive) // newNode.innerText = '<a href="#">alex@qq.com</a>'; 无法渲染标签, 只是字符串 </script> </body> </html>
8. 样式设置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态操作样式</title> <style type="text/css"> .highLight{ background-color: black; color: white; width: 250px; height: 250px; line-height: 250px; text-align: center; font-size: 30px; } </style> </head> <body> <p id='box'>MJJ</p> <script type="text/javascript"> // nodeObj.style var para = document.getElementById('box'); /* 1、直接操作样式属性 console.log(para.style); //获取所有属性, 属性都采用驼峰体 para.style.color = 'white'; para.style.backgroundColor = 'black'; para.style.width = '250px'; para.style.height = '250px'; para.style.textAlign = 'center'; para.style.lineHeight = '250px'; para.style.fontSize = '30px'; // 通过这种方式设置的每个属性都设置成了行内样式style = 'color:red;' */ // 2、通过控制属性的类名来控制样式(推荐使用这种方式) para.setAttribute('class', 'highLight'); </script> </body> </html>
9. 常用事件
常用事件
onclick 鼠标单击事件
onmouseover 鼠标经过事件
onmouseout 鼠标移开事件
onchange 文本框内容改变事件(常用于表单事件)
onselect 文本框内容被选中事件(常用于表单事件, 如选中下拉菜单中选项)
onfocus 光标聚焦事件(常用于表单事件, input输入框中插入光标)
onblur 光标失焦事件(常用于表单事件)
onload 网页加载事件
10. onclick事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件</title> <style type="text/css"> #box{ width: 100px; height: 100px; background-color: blue; } </style> </head> <body> <!-- <div id="box" onclick="add();"></div> --> <div id="box" ></div> <script type="text/javascript"> var oDiv = document.getElementById('box'); var isBlue = true; // 方式1: 匿名函数 oDiv.onclick = function(){ if (isBlue) { // this 指向了当前的元素节点对象 this.style.backgroundColor = 'red'; isBlue = false; }else{ this.style.backgroundColor = 'blue'; isBlue = true; } }; // 方式2: 声明一个函数, 将函数名赋值给事件(推荐使用这种方式) /* var add = function(){ alert(1111); } oDiv.onclick = add;*/ // 方式3: 较繁琐, 不推荐使用 /*<div id="box" onclick='add();'></div> function add(){ alert(1111); }*/ </script> </body> </html>
11. 鼠标悬浮事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>onmouseover()和onmouseout()事件</title> <style type="text/css"> #box{ width: 200px; height: 200px; background-color: red; } </style> </head> <body> <div id="box"> </div> <script type="text/javascript"> // 1.找开关 2.摁一下 3.灯亮了 // 1.找到触发的事件对象 var oDiv = document.getElementById('box'); // 2.鼠标滑过事件 oDiv.onmouseover = function(){ console.log(111); // 3.事件处理程序 this.style.backgroundColor = 'green'; } // 2.鼠标移开事件 oDiv.onmouseout = function(){ // 3.事件处理程序 this.style.backgroundColor = 'red'; } </script> </body> </html>
12. 光标聚焦和失焦事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>光标聚焦和失焦事件</title> <style type="text/css"> .text{ color: red; font-size: 12px; } </style> </head> <body> <form action=""> <p class="name"> <label for="username">用户名:</label> <input type="text" name="user" id="username"> </p> <p class="pwd"> <label for="pwd">密码:</label> <input type="password" name="wpd" id="pwd"> </p> <input type="submit" name=""> </form> <script type="text/javascript"> var userName = document.getElementById('username'); var newNode = document.createElement('span'); userName.onfocus = function(){ newNode.innerHTML = '请输入用户名'; newNode.setAttribute('class', 'text') userName.parentNode.appendChild(newNode); } userName.onblur = function(){ newNode.innerHTML = '请输入正确的用户名'; newNode.setAttribute('class', 'text') userName.parentNode.appendChild(newNode); } </script> </body> </html>
13. 表单控件上内容选中和改变事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>内容选中事件和内容改变事件</title> </head> <body> <!-- onselect onchange --> <textarea cols="30" rows="10">请写入个人简介,字数不少于200字</textarea> <input type="text" name="" value="mjj"> <script type="text/javascript"> var textArea = document.getElementsByTagName('textarea')[0]; var inputObj = document.getElementsByTagName('input')[0]; textArea.onselect = function(){ console.log('内容被选中'); } inputObj.onchange = function(){ console.log('内容被改变了'); } /* inputObj.oninput = function(){ console.log('内容被实时改变了'); console.log(this.value); } */ </script> </body> </html>
14. 窗口加载事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>窗口加载事件</title> <script type="text/javascript"> //多数写在head中,但是代码加载顺序是从左往右,从上往下 /* setTimeout(function(){ var oDiv = document.getElementById('box'); console.log(oDiv); oDiv.onclick = function(){ this.innerHTML = 'alex'; } }, 0) */ // 等待文档元素加载完成才会调用onload(), 如果在head中写script, 则应使用window.load, 但是window.load存在事件覆盖的问题. window.onload = function(){ var oDiv = document.getElementById('box'); console.log(oDiv); oDiv.onclick = function(){ this.innerHTML = 'alex'; } } // window.onload = function(){ // console.log(11111); // } </script> </head> <body> <div id="box">MJJ</div> </body> </html>