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

时间:2022-04-30 09:09:26

一、DOM的概念

二、DOM可以做什么

三、DOM对象的获取

四、事件的介绍

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

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

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

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

九、DOM节点创建

十、查找DOM节点

-----------------------------------
一、DOM的概念

Document Object Model文档对象模型
万事万物皆对象:

(DOM树中一切皆节点,节点是一个标签)
document对象
|
html对象
| |
head对象 body对象
| | | | | | | |
......
DOM对象产生是为了让js操纵文档
对象有属性和方法

二、DOM可以做什么

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

三、DOM对象的获取

<body>
  <div id="box" class="box"></div>
  <div id="box2" class="box"></div>
</body>

//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').onkeydown=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.onload=function(){
console.log(1);
}
window.onload=function(){
console.log(2);
}
如果只等待文档资源加载完成就触发可以写document.onload:也一般不用
document.onload=function(){
...
}
2.绑定事件的步骤
window.onload = function () {
  //获取事件源
  var o = document.getElementById('box');
  console.log(o);
  //绑定事件方式
  o.onclick=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,需求:节点样式属性颜色切换

var o = document.getElementsByClassName('box')[0];
//事件的操作是异步的不会阻塞
var isRed=true;
o.onclick = function(){
  if(isRed){
    o.style.backgroundColor='green';
    isRed=false;
  }else{
    o.style.backgroundColor='red';
    isRed=true;
  }
}

六、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.onload=function(){
  var img = document.getElementById('prev');
  img.onmouseover=function(){
    console.log(img); //相当于python中的self 谁调用的事件this就是谁
    //设置属性值
    this.setAttribute('src','./images/image-hover.png');
  };
  img.onmouseout=function(){
    this.setAttribute('src','./images/image.png');
  }
}

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

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

<button id="btn">隐藏</button>
<div id="box" class="box"></div>

第一种方式:
window.onload=function(){
  function $(id){
    return document.getElementById(id);
  }
  var isShow=true;
  $('btn').onclick=function(){
    if(isShow){
      //通过控制样式属性的display属性对盒子进行显示和隐藏
      $('box').style.display='none';
      isShow=false;
      this.innerText='显示';
    }else{
      $('box').style.display='block';
      isShow=true;
      this.innerText='隐藏';
    }
  }
}
第二种方式:在类后面添加隐藏类
window.onload=function () {
  function $(id){
    return document.getElementById(id);
  }
  var isShow=true;
  $('btn').onclick=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.onload=function(){
  function $(id){
    return document.getElementById(id);
  }
  var p = null;
  $('create').onclick=function(){
    //创建p节点元素
    p = document.createElement('p');
    p.innerText='alex';
    //追加元素 父子 父元素.appendChild(子元素)
    $('box').appendChild(p);
  }
  $('remove').onclick=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 // 上一个兄弟节点