🌋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);// 1

（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);//9

 

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

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

<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！