JS第二部分--DOM文档对象模型

蔚落 2021-12-14 09:21 315阅读 0赞

[JS第二部分--DOM文档对象模型][JS_--DOM]

## 一、DOM的概念 ##

## 二、DOM可以做什么 ##

## 三、DOM对象的获取 ##

## 四、事件的介绍 ##

## 五、DOM节点标签样式属性的操作 ##

## 六、DOM节点对象对值的操作 ##

## 七、DOM节点-标签属性的操作(例如id class src href等) ##

## 八、DOM节点显示隐藏的两种方式 ##

## 九、DOM节点创建 ##

## 十、查找DOM节点 ##

# \-----------------------------------   一、DOM的概念 #

# 二、DOM可以做什么 #

1、找到元素节点(获取DOM)  
2、设置标签属性值(对标签属性的操作)  
3、设置标签的样式(对样式的操作)  
4、设置标签的值  
5、动态的创建和删除元素(对DOM的增删改建)  
6、事件的触发响应：找对象，加事件，事件的业务逻辑

# 三、DOM对象的获取 #

//1.获取文档对象  
document  
//2.获取HTML  
document.documentElement  
//3.获取body  
document.body  
//4.获取body中元素节点对象的三种方式  
4.1通过ID获取找到一个  
document.getElementById('box');  
4.2通过类名获取找到多个(伪数组)  
document.getElementsByClassName('box');  
4.3通过标签名获取多个(伪数组)  
document.getElementsByTagName('div');

# 四、事件的介绍 #

onclick: 鼠标单击  
ondblclick: 鼠标双击  
onkeyup: 按下并释放键盘上的一个键时触发  
onchange: 文本内容或下拉菜单选项发生改变  
onfocus: 获得焦点  
onblur: 失去焦点  
onmouseover: 鼠标悬停  
onmouseout: 鼠标移出

onmouseenter:鼠标进入

onmouseleve:鼠标离开  
onload: 网页文档加载事件  
onunload: 关闭网页时  
onsubmit: 表单提交时  
onreset: 重置表单时

0.键盘事件监听，监听ipt输入框按下回车键（如果监控全局就是$(document)）

$('ipt').οnkeydοwn=function (event) {
          
        if(event.keyCode===13){
          
            alert('按了回车键');
        }
    };

1. onload事件  
<body>  
　　<div id="box"></div>  
</body>  
  
JavaScript中有入口函数：window.onload()  
window.onload可以写在任何地方。作用是等待文档和图片资源加载完成后，会自动触发onload事件  
给函数赋值  
window.onload = function()\{  
　　var o = document.getElementById('box');  
　　console.log(o);  
\}  
所以以后写script脚本写在body之后，可以不用window.onload了,也表示文档和图片加载完成后执行  
而且这个是等待文档和图片资源加载完后才触发  
如果客户网速卡了，就必须要等到加载完成  
window.onload有事件覆盖现象：只打印2  
window.οnlοad=function()\{  
console.log(1);  
\}  
window.οnlοad=function()\{  
console.log(2);  
\}  
如果只等待文档资源加载完成就触发可以写document.onload：也一般不用  
document.οnlοad=function()\{  
...  
\}  
2.绑定事件的步骤  
window.onload = function () \{  
　　//获取事件源  
　　var o = document.getElementById('box');  
　　console.log(o);  
　　//绑定事件方式  
　　o.οnclick=function()\{  
　　　　alert(1);  
　　\}  
\}

# 五、DOM节点标签样式属性的操作 #

1，需求：初始化的时候是红色，点击盒子变为绿色  
<div class="box"></div>  
  
  
写在body后  
var o = document.getElementsByClassName('box')\[0\];  
o.onclick = function()\{  
　　//获取css属性对象(内置的style样式)  
　　var css = o.style;  
　　//设置属性值  
　　css.backgroundColor = "green";  
　　//css.backgroundColor改之前为空。  
　　//因为这个获取的是标签内置的style属性里的样式，优先级最高  
\}

2，需求：节点样式属性颜色切换

# 六、DOM节点对象对值的操作 #

<button id="btn">设置值</button>  
<div id="box"></div>  
  
点击按钮给div设置值alex  
  
var btn = document.getElementById("btn");  
var div = document.getElementById("box");  
btn.onclick = function\{  
　　//只获取文本  
　　console.log(div.innerText);  
　　div.innerText="alex";  
　　//获取所有节点，包括文本、标签、换行  
　　console.log(div.innerHTML);  
　　div.innerHTML='<h2>alex</h2>';  
\}  
  
如果是表单控件，有value属性的必须通过value来设置和获取：  
<input value='123' id='input'>  
var input = document.getElementById('input');  
console.log(input.value);  
input.value='321';

#    七、DOM节点-标签属性的操作(例如id class src href等) #

获取标签属性值：  
this.getAttribute('src');获取相对路径 等价于 this.src 获取绝对的路径  
this.getAttribute('id'); 等价于 this.id  
this.getAttribute('class'); 等价于 this.class  
设置标签属性值：  
this.setAttribute('src','./images/image.png'); 等价于 this.src='xxx'  
  
  
示例：  
<a href="javascript:void(0);">  
<img id="prev" src="./images/image.png" alt="上一张">  
</a>  
  
  
window.οnlοad=function()\{  
　　var img = document.getElementById('prev');  
　　img.οnmοuseοver=function()\{  
　　　　console.log(img); //相当于python中的self 谁调用的事件this就是谁  
　　　　//设置属性值  
　　　　this.setAttribute('src','./images/image-hover.png');  
　　\};  
　　img.οnmοuseοut=function()\{  
　　　　this.setAttribute('src','./images/image.png');  
　　\}  
\}

#    八、DOM节点显示隐藏的两种方式 #

.hidden\{  
　　display:none;  
\} //网页中频繁切换建议使用display:none的方式

<button id="btn">隐藏</button>  
<div id="box" class="box"></div>  
  
第一种方式：  
window.οnlοad=function()\{  
　　function $(id)\{  
　　　　return document.getElementById(id);  
　　\}  
　　var isShow=true;  
　　$('btn').οnclick=function()\{  
　　　　if(isShow)\{  
　　　　　　//通过控制样式属性的display属性对盒子进行显示和隐藏  
　　　　　　$('box').style.display='none';  
　　　　　　isShow=false;  
　　　　　　this.innerText='显示';  
　　　　\}else\{  
　　　　　　$('box').style.display='block';  
　　　　　　isShow=true;  
　　　　　　this.innerText='隐藏';  
　　　　\}  
　　\}  
\}  
第二种方式：在类后面添加隐藏类  
window.οnlοad=function () \{  
　　function $(id)\{  
　　　　return document.getElementById(id);  
　　\}  
　　var isShow=true;  
　　$('btn').οnclick=function () \{  
　　　　if(isShow)\{  
　　　　　　$('box').className += ' hidden';  
　　　　　　this.innerText='显示';  
　　　　　　isShow=false;  
　　　　\}else\{  
　　　　　　var newClaNam=$('box').className.replace(' hidden','');  
　　　　　　$('box').className = newClaNam;  
　　　　　　this.innerText='隐藏';  
　　　　　　isShow=true;  
　　　　\}  
　　\}  
\}

# 九、DOM节点创建 #

标签有创建有销毁，页面性能有损耗。  
如果页面中出现频繁性的切换，不要使用创建元素的形式创建而是使用显示隐藏的方式  
  
<button class="create">创建p标签</button>  
<button class="remove">移除p标签</button>  
<div class="box">  
  
</div>  
  
添加节点  
window.οnlοad=function()\{  
　　function $(id)\{  
　　　　return document.getElementById(id);  
　　\}  
　　var p = null;  
　　$('create').οnclick=function()\{  
　　　　//创建p节点元素  
　　　　p = document.createElement('p');  
　　　　p.innerText='alex';  
　　　　//追加元素 父子 父元素.appendChild(子元素)  
　　　　$('box').appendChild(p);  
　　\}  
　　$('remove').οnclick=function()\{  
　　　　//删除元素 父子 父元素.removeChild(子元素)  
　　　　$('box').removeChild(p);  
　　\}  
\}  
还有一种方式添加节点：  
//父节点.insertBefore(新的子节点, 作为参考的节点)  
$('box').document.body.insertBefore(op ,$('hh')); //在box下，在hh节点之前添加op节点

# 十、查找DOM节点 #

<div id='box'>  
<button id='btn'>  
<span>哈哈</span>  
<span>呵呵</span>  
</button>  
</div>  
  
//获取父节点  
$('btn').parentNode  
//获取子节点  
$('btn').children  
//移除自己（注意：移除后再创建的跟之前不是同一个对象慎用）  
this.parentNode.removeChild(this);

parentElement // 父节点标签元素  
children // 所有子标签  
firstElementChild // 第一个子标签元素  
lastElementChild // 最后一个子标签元素  
nextElementtSibling // 下一个兄弟标签元素  
previousElementSibling // 上一个兄弟标签元素  
不常用：查找节点，节点包括：元素，文本，不包括属性

parentNode // 父节点  
childNodes // 所有子节点  
firstChild // 第一个子节点  
lastChild // 最后一个子节点  
nextSibling // 下一个兄弟节点  
previousSibling // 上一个兄弟节点

posted on 2019-03-27 09:24 [要一直走下去][Link 1] 阅读( ...) 评论( ...) [编辑][Link 2] 收藏

转载于:https://www.cnblogs.com/staff/p/10605288.html

[JS_--DOM]: https://www.cnblogs.com/staff/p/10605288.html
[Link 1]: https://www.cnblogs.com/staff/
[Link 2]: https://i.cnblogs.com/EditPosts.aspx?postid=10605288