码迷,mamicode.com
首页 > 其他好文 > 详细

DOM介绍以及使用方法

时间:2019-12-09 16:51:35      阅读:102      评论:0      收藏:0      [点我收藏+]

标签:rtb   log   价值   冗余代码   冗余   考点   tle   push   font   

  • DOM的基本讲解

一、DOM

(Document Object Model)文档对象模型

1、有属性有方法

1 var person = {
2     name:‘派大星‘,
3     fav:function(){
4         }
5     }

2、js中对象分类三种

(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、document.getElementById() 获取单个对象

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

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

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);

 

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

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

 

三、设置属性和获取属性

css

#box{
    color: red;
}

html

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、getAttribute()获取属性值,有一个必须参数,(这个节点对象的名字)

1 //通过名字来查找
2 var title = oP.getAttribute(‘title‘);
3 var className = oP.getAttribute(‘class‘);
4 console.log(title);//有这个对象,返回对象值
5 console.log(className);//没有这个对象,返回null

2、setAttribute() 设置属性值

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----不算

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

1 <div id="box" title="我是文本">我是一个文本节点<!--我是注释--></div>
1 var oDiv = document.getElementById(‘box‘);

(1)元素节点

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

(2)属性节点

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

(3)文本属性

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

(4)注释节点

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

(5)文档节点

1 console.log(document.nodeType);//9

 

五、节点对象的其他常用属性(寻找节点)

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

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

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

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

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

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

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

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

4、获取父级 .parentNode

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

5、获取兄弟标签

(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、获取孩子标签

 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标签

2、获取下一个兄弟标签

 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);

3、获取上一个兄弟标签

 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、增加 .createElement()

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‘);

4、删除 .removeChild()

1 oDiv.removeChild(oActive);//删除

5、替换 .replaceChild()

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

6、释放对象

1 newNode = null;

 

 

  • 样式设置方法
1 <p id="box">派大星</p>
1 var para = document.getElementById(‘box‘);

 

一、直接调取 Style 属性(优先级最高)

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>

2、盒子样式

1 #box{
2     width: 100px;
3     height: 100px;
4     background-color: red;
5 }

3、两种函数的使用

 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 }

4、鼠标点击切换红蓝

 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、过程演示

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

2、创建一个盒子

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

3、设置样式

1 #box{
2     width: 200px;
3     height: 200px;
4     background-color: red;
5 }

4、找到触发事件对象

1 var oDiv = document.getElementById(‘box‘);

(1)鼠标滑过事件 .onmouseover

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

(2)鼠标移开事件 .onmouseout

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

 

 

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

1、设置两个框

 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>

2、用户名聚焦 .onfocus

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 }

3、用户名失焦 .onblur

1 userName.onblur = function(){
2     newNode.innerHTML = ‘请输入正确的用户名‘;
3     newNode.setAttribute(‘class‘,‘text‘);
4     userName.parentNode.appendChild(newNode);
5 }

 

 

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

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

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

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

1 var textArea = document.getElementsByTagName(‘textarea‘)[0];
2 var inputObj = document.getElementsByTagName(‘input‘)[0];

3、内容被选中 .onselect

1 textArea.onselect = function(){
2     console.log(‘内容被选中‘);
3 }

4、内容被改变 .onchange

1 inputObj.onchange = function(){
2     console.log(‘内容被改变‘);
3 }

5、正在被实时改变 .oninput

1 inputObj.oninput = function(){
2     console.log(‘正在被实时改变‘);
3 }

 

 

六、窗口加载事件

1、js 加载顺序(自上而下)

1 //设置延迟
2 setTimeout(function(){
3     var oDiv = document.getElementById(‘box‘);
4     oDiv.onclick = function(){
5         this.innerHTML = ‘海绵宝宝‘;
6     }
7 },0) 

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

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介绍以及使用方法

标签:rtb   log   价值   冗余代码   冗余   考点   tle   push   font   

原文地址:https://www.cnblogs.com/songhaixing/p/12011809.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!