DOM介绍以及使用方法
Posted songhaixing
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了DOM介绍以及使用方法相关的知识，希望对你有一定的参考价值。
- DOM的基本讲解
一、DOM
(Document Object Model)文档对象模型
1、有属性有方法
1 var person = { 2 name:‘派大星‘, 3 fav:function(){ 4 } 5 }
（1）用户定义对象
（2）内建对象 Array Date Math （内置）
（3）宿主对象
3、Model Map（地图）
（1）把 DOM 看做一颗“树”
（2）DOM 把文档看做一颗“家谱树”
1 parent child sibling（兄弟姊妹） 2 爷爷 3 爸爸 叔叔 4 你 弟弟 表兄弟
- 节点以及使用方法
一、DOM中的节点
1、元素节点（element node）
2、文本节点（text node）
3、属性节点（attribut node）
注意：没有内容的文档是没有任何价值的，而大多数内容都是由文本提供
二、获取元素节点对象的方式
1 <h2>选择你的课程</h2> 2 <p title="请选择需要购买的课程">web全栈，请放心购买</p> 3 <ul id="classList"> 4 <li class="item">html</li> 5 <li class="item">css</li> 6 <li>javascript</li> 7 <li>DOM</li> 8 <li>BOM</li> 9 </ul>
1 var eleNode = document.getElementById(‘classList‘); 2 console.log(eleNode);//以id获取到 <ul> 3 console.log(typeof eleNode);
1 var olis = document.getElementsByTagName(‘li‘); 2 var oTitle = document.getElementsByTagName(‘h2‘); 3 console.log(oTitle[0]);//只有一个，所以只获取出来一个 4 console.log(olis.length);//5,5个li 5 for(var i = 0;i<olis.length;i++){ 6 console.log(olis[i]);//所有的<li> 7 } 8 console.log(typeof olis);
1 var oItems = document.getElementsByClassName(‘item‘); 2 console.log(oItems);//一个集合 3 console.log(oItems[0]);//索引取出来的值
css
#box{ color: red; }
1 <h2>选择你的课程</h2> 2 <p title="请选择需要购买的课程">web全栈，请放心购买</p> 3 <ul id="classList"> 4 <li class="item">html</li> 5 <li class="item">css</li> 6 <li>javascript</li> 7 <li>DOM</li> 8 <li>BOM</li> 9 </ul>
1 //通过名字来查找 2 var title = oP.getAttribute(‘title‘); 3 var className = oP.getAttribute(‘class‘); 4 console.log(title);//有这个对象，返回对象值 5 console.log(className);//没有这个对象，返回null
1 oP.setAttribute(‘id‘,‘box‘);//添加了一个id， 2 oP.setAttribute(‘class‘,‘active‘);//添加了一个class，
四、节点对象的三个重要属性
1、nodeName属性：节点名称，是只读
（1）元素节点的nodeName与标签名相同
（2）属性节点的nodeName与属性的名称相同
（3）文本节点的nodeName永远是 #text
（4）文档节点的nodeName永远是 #document
（5）注释节点的nodeName永远是 #comment
2、nodeValue属性：节点的值
（1）元素节点的nodeValue是 undefined 或 null
（2）文本节点的nodeValue是文本本身
（3）属性节点的nodeValue是属性自身
3、nodeType属性：节点的类型，是只读
以下常用的几种节点类型
1 元素类型： 节点类型： 2 3 //元素 1 4 5 //属性 2 6 7 //文本 3 8 9 //注释 8 10 11 //文档 9----不算
1 <div id="box" title="我是文本">我是一个文本节点<!--我是注释--></div>
1 var oDiv = document.getElementById(‘box‘);
1 console.log(oDiv.nodeName);//DIV 2 console.log(oDiv.nodeValue);//null 3 console.log(oDiv.nodeType);// 1
1 console.log(oDiv.attributes);//获取属性集合（示例中设置了：id、title） 2 var attrNode = oDiv.attributes[0];//取出第一个 3 console.log(attrNode.nodeName + "|" + attrNode.nodeValue + "|" +attrNode.nodeType);//id|box|2
1 var textNode = oDiv.childNodes[0];//孩子节点（文本） 2 console.log(textNode.nodeName + "|" + textNode.nodeValue + "|" +textNode.nodeType);//#text|box|2
1 var commentNode = oDiv.childNodes[1];//孩子节点的第二个 2 console.log(commentNode.nodeName + "|" + commentNode.nodeValue + "|" +commentNode.nodeType);//#comment|我是注释|8
1 console.log(document.nodeType);//9
注意：换行符也算作一个文本节点
1 <div class="previous">我是上一个兄弟</div><div id="father"><p>派大星</p><p>海绵宝宝</p></div><div class="sibling">我是下一个兄弟</div>
1 var oFather = document.getElementById(‘father‘);//获取了div 2 console.log(oFather.childNodes);//所有的孩子节点
1 console.log(oFather.childNodes[0]); 2 console.log(oFather.firstChild);//第一个孩子节点
1 console.log(oFather.childNodes[oFather.childNodes.length-1]);//孩子节点总长度-1（最后一个） 2 console.log(oFather.lastChild);//最后一个孩子节点
1 console.log(oFather.parentNode);//父级标签body 2 console.log(oFather.parentNode.parentNode.parentNode);//可以一级一级往上面去找
（1） .nextSibling 下一个兄弟标签
（2）.previousSibling 上一个兄弟标签
1 console.log(oFather.nextSibling);//下一个兄弟标签 2 console.log(oFather.previousSibling);//上一个兄弟标签
1 <div class="previous">我是上一个兄弟</div> 2 <div id="father"> 3 <p>派大星</p> 4 <p>海绵宝宝</p> 5 </div> 6 <div class="sibling">我是下一个兄弟</div>
1 var oFather = document.getElementById(‘father‘);
1 console.log(oFather.childNodes);//含有换行符 2 function get_childNodes(oFather){ 3 var nodes = oFather.childNodes;//孩子节点 4 var arr = [];//保存已经获取的元素节点对象 5 for(var i = 0;i < nodes.length;i++){ 6 if(nodes[i].nodeType ===1){ 7 arr.push(nodes[i]); 8 } 9 } 10 return arr; 11 } 12 var childnodes = get_childNodes(oFather); 13 console.log(childnodes);//[p,p]两个p标签
1 console.log(oFather.nextSibling);//含有换行符 2 function get_nextSibling(oFather){ 3 var x = oFather.nextSibling;//x的下一个兄弟 4 while(x && x.nodeType !=1){ 5 x = x.nextSibling;//一直找下一个 6 } 7 return x; 8 } 9 var nn = get_nextSibling(oFather); 10 console.log(nn);
1 console.log(oFather.previousSibling);//含有换行符 2 function get_previousSibling(oFather){ 3 var y = oFather.previousSibling;//x的上一个兄弟 4 while(y && y.nodeType !=1){ 5 y = y.previousSibling;//一直找上一个 6 } 7 return y; 8 } 9 var aa = get_previousSibling(oFather); 10 console.log(aa);
1 <div id="box"> 2 <p id="active">派大星</p> 3 </div>
1 var oDiv = document.getElementById(‘box‘);//拿到box这个标签元素 2 var oActive = document.getElementById(‘active‘);//拿到p 标签元素
1 var newNode = document.createElement(‘p‘); 2 //创建一个 p 标签newNode 3 var newNode2 = document.createElement(‘p‘); 4 //创建一个新 p 标签newNode 5 var newNode3 = document.createElement(‘a‘); 6 //创建一个a 标签
2、插入
(1) .appendChild()
(2) .insertBefore(newNode,node) 前面是插入的节点，后面的是参考点
1 newNode.setAttribute(‘class‘,‘active‘); 2 //为 p 标签设置一个属性 class="active" 3 4 oDiv.appendChild(newNode); 5 //将 p 标签插入到 box 标签中的 p 标签后面 6 oDiv.insertBefore(newNode2,oActive); 7 //将 p 标签插入到 box 标签中的 p 标签前面，第一个参数是新插入的节点，第二个参数是参考的节点
3、插入文本
（1）innerHTML = ‘xxx‘ (常用)
（2） innerText = ‘xxx’
1 //冗余代码 2 var textNode = document.createTextNode(‘海绵宝宝‘);//创建一个文本节点 textNode 3 newNode.appendChild(textNode);//将文本textNode 插入到 p 标签newNode中
1 newNode2.innerHTML = ‘海绵宝宝‘; 2 //直接调用 .innerHTML 属性替代上面代码 3 newNode.innerHTML = ‘<a href="#">章鱼哥</a>‘; 4 //甚至可以插标签（既能渲染文本也能渲染标签） 5 newNode.innerText = ‘<a href="#">章鱼哥</a>‘; 6 //变成文本的属性（只能渲染文本）没有了链接属性 7 newNode3.innerHTML = ‘百度一下‘; 8 newNode3.setAttribute(‘href‘,‘http://www.baidu.com‘);
1 oDiv.removeChild(oActive);//删除
1 oDiv.replaceChild(newNode3,oActive); 2 //第一个参数是新的节点，第二个参数是要被替换的节点
1 newNode = null;
- 样式设置方法
1 <p id="box">派大星</p>
1 var para = document.getElementById(‘box‘);
1 console.log(para.style);//查看所有的style属性 2 para.style.backgroundColor = ‘black‘; 3 para.style.color = ‘white‘; 4 para.style.width = ‘250px‘; 5 para.style.height = ‘250px‘; 6 para.style.textAlign = ‘center‘; 7 para.style.lineHeight = ‘250px‘; 8 para.style.fontSize = ‘30px‘;
1 para.setAttribute(‘class‘,‘active‘);
1 .active{ 2 background-color: black; 3 color: white; 4 font-size: 30px; 5 width: 250px; 6 height: 250px; 7 text-align: center; 8 line-height: 250px; 9 }
- 事件介绍以及事件的使用方法
一、事件介绍
1、鼠标单击事件：onclick
2、鼠标经过事件：onmouseover
3、鼠标移开事件：onmouseout
4、光标聚焦事件：onfocus
5、光标失焦事件：onblur
6、文本框内容选中事件：onselect
7、文本框内容改变事件：onchange
8、网页加载事件：onload
二、onclick:鼠标单击事件
1、设置一个盒子
1 <div id="box" onclick="add();"></div>
1 #box{ 2 width: 100px; 3 height: 100px; 4 background-color: red; 5 }
1 //1.1 匿名函数(推荐使用) 2 oDiv.onclick = function(){ 3 alert(‘触发了派大星‘); 4 } 5 6 //1.2 设置一个函数名也是可以的 7 function add(){ 8 alert(‘触发了派大星‘); 9 } 10 oDiv.onclick = add 11 12 //2、直接在标签里面设置 13 function add(){ 14 alert(‘触发了海绵宝宝‘); 15 }
1 var isBlue = true;//设置一个值 2 oDiv.onclick = function(){ 3 //this 指向了当前的元素节点对象 4 // console.log(this); 5 if(isBlue){ 6 this.style.backgroundColor = ‘blue‘; 7 isBlue = false;//变化 8 }else{ 9 this.style.backgroundColor = ‘red‘; 10 isBlue = true;//变化 11 } 12 }
1、过程演示
//找开关 //摁一下 //灯亮了
1 <div id="box"></div>
1 #box{ 2 width: 200px; 3 height: 200px; 4 background-color: red; 5 }
1 var oDiv = document.getElementById(‘box‘);
1 oDiv.onmouseover = function(){ 2 // 3、事件处理程序 3 this.style.backgroundColor = ‘green‘; 4 }
1 oDiv.onmouseout = function(){ 2 // 3、事件处理程序 3 this.style.backgroundColor = ‘red‘; 4 }
四、表单控件聚焦和失焦事件
1 <form action=""> 2 <p class="name"> 3 <label for="username">用户名:</label> 4 <input type="text" name="user" id="username"> 5 </p> 6 <p class="pwd"> 7 <label for="pwd">密码:</label> 8 <input type="password" name="pwd" id="pwd"> 9 </p> 10 <input type="submit" name=""></form>
1 var userName = document.getElementById(‘username‘);//拿到用户名标签 2 var newNode = document.createElement(‘span‘);//创建一个span 3 4 userName.onfocus = function(){ 5 newNode.innerHTML = ‘请输入用户名‘; 6 newNode.setAttribute(‘class‘,‘text‘); 7 userName.parentNode.appendChild(newNode); 8 //将span插入到 用户名标签 的 父级后面 9 }
1 userName.onblur = function(){ 2 newNode.innerHTML = ‘请输入正确的用户名‘; 3 newNode.setAttribute(‘class‘,‘text‘); 4 userName.parentNode.appendChild(newNode); 5 }
五、内容选中和内容改变事件
1 <textarea cols="40" rows="10">请填写个人简介，字数不少于200000字</textarea> 2 <input type="text" name="" value="派大星"> 3 <script type="text/javascript">
1 var textArea = document.getElementsByTagName(‘textarea‘)[0]; 2 var inputObj = document.getElementsByTagName(‘input‘)[0];
1 textArea.onselect = function(){ 2 console.log(‘内容被选中‘); 3 }
1 inputObj.onchange = function(){ 2 console.log(‘内容被改变‘); 3 }
1 inputObj.oninput = function(){ 2 console.log(‘正在被实时改变‘); 3 }
六、窗口加载事件
1 //设置延迟 2 setTimeout(function(){ 3 var oDiv = document.getElementById(‘box‘); 4 oDiv.onclick = function(){ 5 this.innerHTML = ‘海绵宝宝‘; 6 } 7 },0)
1 window.onload = function(){ 2 var oDiv = document.getElementById(‘box‘); 3 oDiv.onclick = function(){ 4 this.innerHTML = ‘章鱼哥‘; 5 } 6 }
1 <div id="box">派大星</div>
XXGK！
以上是关于DOM介绍以及使用方法的主要内容，如果未能解决你的问题，请参考以下文章
我的Android进阶之旅NDK开发之在C++代码中使用Android Log打印日志，打印出C++的函数耗时以及代码片段耗时详情