DOM介绍以及使用方法

• DOM的基本讲解

一、DOM

(Document Object Model)文档对象模型

1、有属性有方法

 var person = {
     name:'派大星',
     fav:function(){
         }
     }

2、js中对象分类三种

（1）用户定义对象

（2）内建对象 Array Date Math （内置）

（3）宿主对象

3、Model Map（地图）

（1）把 DOM 看做一颗“树”

（2）DOM 把文档看做一颗“家谱树”

 parent   child    sibling（兄弟姊妹）
          爷爷
 爸爸              叔叔
 你      弟弟      表兄弟

• 节点以及使用方法

一、DOM中的节点

1、元素节点（element node）

2、文本节点（text node）

3、属性节点（attribut node）

注意：没有内容的文档是没有任何价值的，而大多数内容都是由文本提供

二、获取元素节点对象的方式

 <h2>选择你的课程</h2>
 <p title="请选择需要购买的课程">web全栈，请放心购买</p>
 <ul id="classList">
     <li class="item">html</li>
     <li class="item">css</li>
     <li>javascript</li>
     <li>DOM</li>
     <li>BOM</li>
 </ul>

1、document.getElementById() 获取单个对象

 var eleNode = document.getElementById('classList');
 console.log(eleNode);//以id获取到 <ul>
 console.log(typeof eleNode);

2、document.getElementsByTagName() 获取节点对象集合

 var olis = document.getElementsByTagName('li');
 var oTitle = document.getElementsByTagName('h2');
 console.log(oTitle[0]);//只有一个，所以只获取出来一个
 console.log(olis.length);//5,5个li
 for(var i = 0;i<olis.length;i++){
     console.log(olis[i]);//所有的<li>
 }
 console.log(typeof olis);

3、document.getElementsByClassName() 相对于2可以针对性的获取节点对象集合

 var oItems = document.getElementsByClassName('item');
 console.log(oItems);//一个集合
 console.log(oItems[0]);//索引取出来的值

三、设置属性和获取属性

css

#box{
    color: red;
}

html

 <h2>选择你的课程</h2>
 <p title="请选择需要购买的课程">web全栈，请放心购买</p>
 <ul id="classList">
     <li class="item">html</li>
     <li class="item">css</li>
     <li>javascript</li>
     <li>DOM</li>
     <li>BOM</li>
 </ul>

1、getAttribute（）获取属性值，有一个必须参数，(这个节点对象的名字)

 //通过名字来查找
 var title = oP.getAttribute('title');
 var className = oP.getAttribute('class');
 console.log(title);//有这个对象，返回对象值
 console.log(className);//没有这个对象，返回null

2、setAttribute（） 设置属性值

 oP.setAttribute('id','box');//添加了一个id，
 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

 //注释            8

 //文档            9----不算

4、获取三种重要属性的方法

 <div id="box" title="我是文本">我是一个文本节点<!--我是注释--></div>

 var oDiv = document.getElementById('box');

（1）元素节点

 console.log(oDiv.nodeName);//DIV
 console.log(oDiv.nodeValue);//null
 console.log(oDiv.nodeType);//

（2）属性节点

 console.log(oDiv.attributes);//获取属性集合（示例中设置了：id、title）
 var attrNode = oDiv.attributes[0];//取出第一个
 console.log(attrNode.nodeName + "|" + attrNode.nodeValue + "|" +attrNode.nodeType);//id|box|2

（3）文本属性

 var textNode = oDiv.childNodes[0];//孩子节点（文本）
 console.log(textNode.nodeName + "|" + textNode.nodeValue + "|" +textNode.nodeType);//#text|box|2

（4）注释节点

 var commentNode = oDiv.childNodes[1];//孩子节点的第二个
 console.log(commentNode.nodeName + "|" + commentNode.nodeValue + "|" +commentNode.nodeType);//#comment|我是注释|8

（5）文档节点

 console.log(document.nodeType);//

五、节点对象的其他常用属性（寻找节点）

注意：换行符也算作一个文本节点

 <div class="previous">我是上一个兄弟</div><div id="father"><p>派大星</p><p>海绵宝宝</p></div><div class="sibling">我是下一个兄弟</div>

1、获取孩子节点 .childNodes()

 var oFather = document.getElementById('father');//获取了div
 console.log(oFather.childNodes);//所有的孩子节点

2、获取第一个孩子节点 .first

 console.log(oFather.childNodes[0]);
 console.log(oFather.firstChild);//第一个孩子节点

3、获取最后孩子节点 .last

 console.log(oFather.childNodes[oFather.childNodes.length-1]);//孩子节点总长度-1（最后一个）
 console.log(oFather.lastChild);//最后一个孩子节点

4、获取父级 .parentNode

 console.log(oFather.parentNode);//父级标签body
 console.log(oFather.parentNode.parentNode.parentNode);//可以一级一级往上面去找

5、获取兄弟标签

（1） .nextSibling 下一个兄弟标签

（2）.previousSibling 上一个兄弟标签

 console.log(oFather.nextSibling);//下一个兄弟标签
 console.log(oFather.previousSibling);//上一个兄弟标签

六、节点对象兼容性问题（解决换行符问题）

 <div class="previous">我是上一个兄弟</div>
 <div id="father">
     <p>派大星</p>
     <p>海绵宝宝</p>
 </div>
 <div class="sibling">我是下一个兄弟</div>

 var oFather = document.getElementById('father');

1、获取孩子标签

 console.log(oFather.childNodes);//含有换行符
 function get_childNodes(oFather){
     var nodes = oFather.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);//[p,p]两个p标签

2、获取下一个兄弟标签

 console.log(oFather.nextSibling);//含有换行符
 function get_nextSibling(oFather){
     var x = oFather.nextSibling;//x的下一个兄弟
     while(x && x.nodeType !=1){
         x = x.nextSibling;//一直找下一个
     }
     return x;
 }
 var nn = get_nextSibling(oFather);
 console.log(nn);

3、获取上一个兄弟标签

 console.log(oFather.previousSibling);//含有换行符
 function get_previousSibling(oFather){
     var y = oFather.previousSibling;//x的上一个兄弟
     while(y && y.nodeType !=1){
         y = y.previousSibling;//一直找上一个
     }
     return y;
 }
 var aa = get_previousSibling(oFather);
 console.log(aa);

七、元素节点对象的增删改查

 <div id="box">
     <p id="active">派大星</p>
 </div>

 var oDiv = document.getElementById('box');//拿到box这个标签元素
 var oActive = document.getElementById('active');//拿到p 标签元素

1、增加 .createElement()

 var newNode = document.createElement('p');
 //创建一个 p 标签newNode
 var newNode2 = document.createElement('p');
 //创建一个新 p 标签newNode
 var newNode3 = document.createElement('a');
 //创建一个a 标签

2、插入

(1) .appendChild()

(2) .insertBefore(newNode,node) 前面是插入的节点，后面的是参考点

 newNode.setAttribute('class','active');
 //为 p 标签设置一个属性 class="active"

 oDiv.appendChild(newNode);
 //将 p 标签插入到 box 标签中的 p 标签后面
 oDiv.insertBefore(newNode2,oActive);
 //将 p 标签插入到 box 标签中的 p 标签前面，第一个参数是新插入的节点，第二个参数是参考的节点     

3、插入文本

（1）innerHTML = 'xxx' (常用)

（2） innerText = ‘xxx’

 //冗余代码
 var textNode = document.createTextNode('海绵宝宝');//创建一个文本节点 textNode
 newNode.appendChild(textNode);//将文本textNode 插入到 p 标签newNode中

 newNode2.innerHTML = '海绵宝宝';
 //直接调用 .innerHTML 属性替代上面代码
 newNode.innerHTML = '<a href="#">章鱼哥</a>';
 //甚至可以插标签（既能渲染文本也能渲染标签）
 newNode.innerText = '<a href="#">章鱼哥</a>';
 //变成文本的属性（只能渲染文本）没有了链接属性
 newNode3.innerHTML = '百度一下';
 newNode3.setAttribute('href','http://www.baidu.com');

4、删除 .removeChild()

 oDiv.removeChild(oActive);//删除

5、替换 .replaceChild()

 oDiv.replaceChild(newNode3,oActive);
 //第一个参数是新的节点，第二个参数是要被替换的节点

6、释放对象

 newNode = null;

• 样式设置方法

 <p id="box">派大星</p>

 var para = document.getElementById('box');

一、直接调取 Style 属性（优先级最高）

 console.log(para.style);//查看所有的style属性
 para.style.backgroundColor = 'black';
 para.style.color = 'white';
 para.style.width = '250px';
 para.style.height = '250px';
 para.style.textAlign = 'center';
 para.style.lineHeight = '250px';
 para.style.fontSize = '30px';

二、设置一个类名，再来进行设置（使用最多）

 para.setAttribute('class','active');

 .active{
     background-color: black;
     color: white;
     font-size: 30px;
     width: 250px;
     height: 250px;
     text-align: center;
     line-height: 250px;
 }

• 事件介绍以及事件的使用方法

一、事件介绍

1、鼠标单击事件：onclick

2、鼠标经过事件：onmouseover

3、鼠标移开事件：onmouseout

4、光标聚焦事件：onfocus

5、光标失焦事件：onblur

6、文本框内容选中事件：onselect

7、文本框内容改变事件：onchange

8、网页加载事件：onload

二、onclick:鼠标单击事件

1、设置一个盒子

 <div id="box" onclick="add();"></div>

2、盒子样式

 #box{
     width: 100px;
     height: 100px;
     background-color: red;
 }

3、两种函数的使用

 //1.1 匿名函数(推荐使用)
 oDiv.onclick = function(){
     alert('触发了派大星');
 }  

 //1.2 设置一个函数名也是可以的
 function add(){
     alert('触发了派大星');
 }
 oDiv.onclick = add

 //2、直接在标签里面设置
 function add(){
     alert('触发了海绵宝宝');
 }

4、鼠标点击切换红蓝

 var isBlue = true;//设置一个值
 oDiv.onclick = function(){
     //this 指向了当前的元素节点对象
     // console.log(this);
     if(isBlue){
         this.style.backgroundColor = 'blue';
         isBlue = false;//变化
     }else{
         this.style.backgroundColor = 'red';
         isBlue = true;//变化
     }
 }  

三、鼠标经过和移开事件（悬浮）

1、过程演示

//找开关
//摁一下
//灯亮了

2、创建一个盒子

 <div id="box"></div>

3、设置样式

 #box{
     width: 200px;
     height: 200px;
     background-color: red;
 }

4、找到触发事件对象

 var oDiv = document.getElementById('box');

（1）鼠标滑过事件 .onmouseover

 oDiv.onmouseover = function(){
     //  3、事件处理程序
     this.style.backgroundColor = 'green';
 }

（2）鼠标移开事件 .onmouseout

 oDiv.onmouseout = function(){
     //  3、事件处理程序
     this.style.backgroundColor = 'red';
 }

四、表单控件聚焦和失焦事件

1、设置两个框

 <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="pwd" id="pwd">
 </p>
 <input type="submit" name=""></form>

2、用户名聚焦 .onfocus

 var userName = document.getElementById('username');//拿到用户名标签
 var newNode = document.createElement('span');//创建一个span

 userName.onfocus = function(){
     newNode.innerHTML = '请输入用户名';
     newNode.setAttribute('class','text');
     userName.parentNode.appendChild(newNode);
     //将span插入到 用户名标签 的 父级后面
 }

3、用户名失焦 .onblur

 userName.onblur = function(){
     newNode.innerHTML = '请输入正确的用户名';
     newNode.setAttribute('class','text');
     userName.parentNode.appendChild(newNode);
 }

五、内容选中和内容改变事件

1、设置一个文本框和一个表单

 <textarea cols="40" rows="10">请填写个人简介，字数不少于200000字</textarea>
 <input type="text" name="" value="派大星">
 <script type="text/javascript">

2、拿到文本框和表单标签

 var textArea = document.getElementsByTagName('textarea')[0];
 var inputObj = document.getElementsByTagName('input')[0];

3、内容被选中 .onselect

 textArea.onselect = function(){
     console.log('内容被选中');
 }

4、内容被改变 .onchange

 inputObj.onchange = function(){
     console.log('内容被改变');
 }

5、正在被实时改变 .oninput

 inputObj.oninput = function(){
     console.log('正在被实时改变');
 }

六、窗口加载事件

1、js 加载顺序（自上而下）

 //设置延迟
 setTimeout(function(){
     var oDiv = document.getElementById('box');
     oDiv.onclick = function(){
         this.innerHTML = '海绵宝宝';
     }
 },0) 

2、等待文档元素加载完成才会调用 onload（）

 window.onload = function(){
     var oDiv = document.getElementById('box');
     oDiv.onclick = function(){
         this.innerHTML = '章鱼哥';
     }
 }

 <div id="box">派大星</div>

XXGK！