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