学习JS第四周

长期顽固性肥胖

已于 2023-05-31 21:41:27 修改

阅读量54

点赞数

文章标签： javascript 前端学习

于 2023-05-21 20:54:40 首次发布

本文链接：https://blog.csdn.net/weixin_75004747/article/details/130791730

版权

DOM（2）

5.节点操作

引入节点概念（获取元素通常使用两种方式：利用DOM提供的方法获取元素；利用节点层级关系获取元素）
节点概述：网页中所有内容都是节点（标签、属性、文本、注释等）。在DOM中，节点使用node来表示。
一般情况下，节点至少拥有nodeType（节点类型）、nodeName(节点名称)、nodeValue（节点值）三个基本属性。
- 元素节点 nodeType为1
- 属性节点 nodeType为2
- 文本节点 nodeType为3（文本节点包含文字、空格、换行等）

5.1 节点层级

利用DOM树可以把节点划分为不同的层级关系，常见的是父子兄层级关系。

父级节点：node.parentNode

<div class="box">
<span class="erweima"></span>
</div>
<script>
var erweima = document.querySelector('.erweima');
//var box = document.querySelector('.box');
console.log(erweima.parentNode);//得到的是离元素最近的父节点；如果找不到父节点就返回为null
</script>

子级节点1：parentNode.childNodes
由于返回值里面包含了所有的子节点，包括元素节点、文本节点等。

var ul = document.querySelector('ul');
for(var i = 0;i<ul.childNodes.length;i++){
    if (ul,childNodes[i],nodeType ==1){
    //ul.childNodes[i]是元素节点
    console.log(ul.childNodes[i]);
    }
 }

子级节点2：parentNode.children
parentNode.children是一个只读属性，返回所有的子元素节点。只返回子元素节点，其他节点不返回。
子级节点3：parentNode.firstChild
firstChild返回的是第一个子节点，不论是文本节点还是元素节点
子级节点4：parentNode.lastChild
lastChild返回的是最后一个子节点，不论是文本节点还是元素节点
子级节点5：parentNode.firstElementChild
firstElementChild返回的是第一个子元素节点，找不到则返回null
子级节点5：parentNode.firstElementChild
lastElementChild返回的是最后一个子元素节点，找不到则返回null
后两者兼容性，I9以上才可使用
如果想要第一个子元素节点，可以使用parentNode.children[0]（解决兼容性）

<body>
 <ol>
  <li>我是li1</li>
  <li>我是li2</li>
  <li>我是li3</li>
 <ol>
<script>
  var ol = document.querySelector('ol');
  console.log(ol.children[0]);//第一个
  console,log(ol.children[ol.children.length - 1]);//最后一个
</script>
</body>

兄弟节点1node.nextSibling
nextSibling返回当前元素的下一个兄弟节点，找不到就返回null。包含所有节点（文本节点、元素节点等）
兄弟节点2node.previousSibling
previousSibling返回当前元素的上一个兄弟节点，找不到就返回null。包含所有节点（文本节点、元素节点等）
兄弟节点3node.nextElementSibling
nextSibling返回当前元素的下一个兄弟元素节点，找不到就返回null。
兄弟节点4node.previousElementSibling
nextSibling返回当前元素的上一个兄弟元素节点，找不到就返回null。
后两者兼容性，I9以上才可使用
如果想要获取兄弟元素节点（解决兼容性）

function getNextElementSibling(element){
  var el = element;
  while (el = el.nextSibling){
   if (el.nodeType == 1){
       return el;
   }
  }
  return null;
}

5.2创建节点

document.createElement('tagName')方法创建由tagName指定的HTML元素。因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点。

5.3添加节点

node.appendChild(child)方法将一个节点添加到指定父节点的子节点列表末尾。是向后面追加元素。
node.insertBefore(child,指定元素)方法将一个节点添加到指定父节点的指定子节点前面。
添加新元素（先创建元素再添加元素）

5.4删除节点

node.removeChild(child)方法从DOM中删除一个子节点，返回删除的节点

点击按钮依次删除元素，直到没有元素

5.5复制节点

node.cloneNode()方法返回调用该方法的节点的一个副本

如果括号参数为空或者为false，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点
如果括号参数为true，则是深拷贝，即克隆复制节点本身，也克隆里面的子节点

5.6三种动态创建元素区别

document.write()
element.innerHTML
document.createElement()
document.write是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘
innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘
innerHTML创建多个元素效率更高（在不拼接字符串，采取数组形式拼接的情况下），结构稍微复杂
createElement（）创建多个元素效率稍低，但是结构更清晰

6.DOM重点核心

关于dom操作，我们主要针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作

1.创建
- document.write
- innerHTML
- createElement
2.增
- appendChild
- insertBefore
3.删
- removeChild
4.改
- 修改元素属性：src、href、title
- 修改普通元素内容：innerHTML、innerText
- 修改表单元素:value、type、disabled等
- 修改元素样式：style、className
5.查
- DOM提供的API方法：getElementByld、getElementsByTagName
- H5提供的新方法：querySelector、querySelectorAll
- 利用节点操作获取元素：父（parentNode）、子（children）、兄（previousElementSibling、nextElementSibling）
6.属性操作
- setAttribute:设置dom的属性值
- getAttribute:得到dom的属性值
- removeAttribute:移除属性
7.事件操作

7.事件高级

7.1注册事件概括

给元素添加事件，称为注册事件或者绑定事件
注册事件有两种方式：传统方式和方法监听注册方式

传统注册方式
- 利用on开头的事件onclick
- <button onclick="alert('hi~')"></button>
- btn.onclick = function(){}
- 特点：注册事件的唯一性
- 同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数
方法监听注册方式
- w3c标准
- addEventListener()
- I9之前不支持，可使用attachEvent()代替
- 特点：同一个元素同一个事件可以注册多个监听器
addEventListener()事件监听方式
eventTarget.addEventListener(type, listener[,useCapture])
eventTarget.addEventListener()方法将指定的监听器注册到eventTarget(目标对象)上，当该对象触发指定的事件时，就会执行事件处理函数。
- type：事件类型字符串，比如click、mouseover、注意这里不要带on
- listener：事件处理函数，事件发生时，会调用该监听函数
- useCapture：可选参数，是个布尔值，默认是false
- addEventListener()里面的事件类型是字符串，必定加引号，而且不带on;同时里面同一个元素，同一个事件可以添加多个侦听器（事件处理程序）
attachEvent事件监听方式
eventTarget.attachEvent(eventNameWithOn,callback)
eventTarget.attachEvent()方法将指定的监听器注册到eventTarget（目标对象）上，当该对象触发指定的事件时，指定的回调函数就会被执行
- eventNameWithOn：事件类型字符串，比如onclick、onmouseover,这里要带on
- callback：事件处理函数，当目标触发事件时回调函数被调用

7.2删除事件（解绑事件）

1.删除事件的方式

传统注册方式eventTarget.onclick = null;
方法监听注册方式
eventTarget.removeEventListener(type,listener[,useCapture]);
eventTarget.detachEvent(eventNameWithOn.callback);

<body>
 <div>1</div>
 <div>2</div>
 <div>3</div>
  <script>
     var divs = document.querySelectorAll('div');
     divs[0].onclick = function(){
     alert(11);
     divs[0].onclick = null;//传统方式
   }
     divs[1].addEventListener('click',fn)//里面的fn不需要调用加小括号
     function fn(){
     alert(22);
     divs[1].removeEventListener('click',fn);//第二种方式
     }
     divs[2].attachEvent('onclick',fn1);
     function fn1(){
     alert(33);
     divs[2].detachEvent('onclick',fn1);//第三种方式
     }
  </script>
</body>

2.删除事件兼容性解决方案

在这里插入图片描述

7.3DOM事件流

事件流描述的是从页面中接收事件的顺序。
事件发生时会在元素节点之间按照待定的顺序传播，这个传播过程即DOM事件流。
DOM事件流分为三个阶段：

捕获阶段
当前目标阶段
冒泡阶段
- 事件冒泡：IE最早提出，事件开始时由最具体的元素接收，然后逐级向上传播到DOM最顶层节点的过程。
- 事件捕获：网景最早提出，由DOM最顶层节点开始，然后逐级向下传播到最具体的元素接收的过程。
JS代码中只能执行捕获或者冒泡其中的一个阶段
onclick和attachEvent只能得到冒泡阶段
addEventListener(type,listener[,useCapture])第三个参数如果是true，表示在事件捕获阶段调用事件处理程序；如果是false，表示在事件冒泡阶段调用事件处理程序

7.4事件对象

1.什么是事件对象

event对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态；
即事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象event，它有很多属性和方法。

<body>
<div></div>
<script>
var div = document.querySelector('div');
div.onclick = function(event){//event就是一个事件对象，写到侦听函数的小括号中，当形参来看
console.log(event);
}
</script>
</body>

<body>
<div></div>
<script>
var div = document.querySelector('div');
div.addEventListener('clcik', function(event){
console.log(event);
})
</script>
</body>

若存在兼容性问题，通过 window.event
e = e || window.event;
event是个形参，系统帮我们设定为事件对象，不需要传递实参过去。当我们注册事件时，event对象就会被系统自动创建，并依次传递给事件监听器（事件处理函数）。

2.事件对象的常见属性和方法

在这里插入图片描述
（1）返回触发事件对象

<body>
 <div>123</div>
 <script>
  var div = document.querySelector('div');
  div.addEventListener('click',function(e)){
   console.log(e.target);
   console.log(this);
  })
 </script>
</body>

e.target返回的是触发事件的对象（元素）；this（与currentTarget相同）返回的是绑定事件的对象（元素）

（2）返回事件类型

<body>
 <div>123</div>
 <script>
  var div = document.querySelector('div');
  div.addEventListener('click',fn);
   function fn(e){
      console.log(e.type);
  }
 </script>
</body>

（3）阻止默认行为（事件）

<body>
 <a href="http://www.baidu.com">百度</a>
 <form action="http://www.baidu.com">
    <input type="submit" value="提交" name="sub">
 </form>
 <script>
  var a = document.querySelector('a');
  a.addEventListener('click',function(e){
e.preventDefault();//dom标准写法
})
   function fn(e){
      console.log(e.type);
  }
 </script>
</body>

利用return false也能阻止默认行为（没有兼容性问题）特点：return后面的代码不执行，但只限于传统的写法
（4）阻止事件冒泡
事件冒泡：开始时由最具体的元素接收，然后逐级向上传播到DOM最顶层节点
标准写法e.stopPropagation();
非标准写法e.cancelBubble = true;
兼容性解决方案

if(e && e.stopPropagation){
     e.stopPropagation();
 }else{
     window.event.cancelBubble = true;
 }

（5）事件委托（代理、委派）

事件委托也称为事件代理，在jQuery里面称为事件委派
事件委托的原理：不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点
点击某条背景颜色改变

<body>
  <ul>
   <li>123</li>
   <li>456</li>
   <li>789</li>
  </ul>
  <script>
   var ul = document.querySelector('ul');
   ul.addEventListener('click',function(e){
   e.target.style.backgroundColor = 'pink';
   })
  </script>
</body>

7.5常用的鼠标事件

在这里插入图片描述

禁止鼠标右键菜单：contexmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单

document.addEventListener('contextmenu',function(e){
e.preventDefault();
})

禁止鼠标选中（selectstart 开始选中）

document.addEventListener('selectstart',function(e){
e.preventDefault();
})

鼠标事件对象
event对象代表事件的状态，跟事件相关的一系列信息的集合。现阶段我们主要是用鼠标事件对象MouseEvent和键盘事件对象KeyboardEvent
前两者是相较于可视区域，不论你主页设置多少；X是距离上方的距离，Y是距离左边的距离
中间两者是相较于文档页面的距离
跟随鼠标的天使
（1）鼠标不断的移动，使用鼠标移动事件：mousemove
（2）在页面中移动，给document注册事件
（3）图片要移动距离，而且不占位置，使用绝对定位
（4）核心原理：每次鼠标移动，我们都会获得最新的鼠标坐标，把这个x和y坐标作为图片的top和left值就可以移动图片

<head>
  <style>
     img {
     position:absolute;
     }
   </style>
</head>
<body>
    <img src="images/angel.gif" alt="">
    <script>
    
  var pic = document.querySelector('img'); 
  document.addEventListener('mousemove',function(){
  var x = e.pageX;
  var y = e.pageY;
  console.log('x坐标是' + x,'y坐标是' + y);
  pic.style.left = x-50 + 'px';
  pic.style.top = y-40 + 'px';
  })
    </script>
</body>

7.5常用的键盘事件

在这里插入图片描述

如果使用addEventListener不需要加on
三个事件的执行顺序是：keydown–keypress–keyup
键盘事件对象

<body>
  <script>
   document.addEventListener('keyup',function(e){
    console.log(e.keyCode);
   })
  </script>
</body>

keyCode是返回该键的ASCⅡ值
onkeydown和onkeyup不区分字母大小写，onkeypress区分字母大小写
在实际开发中，更多的使用keydown和keyup，能识别所有的键（包括功能键）

长期顽固性肥胖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
学习JS第四周

方法创建由tagName指定的HTML元素。因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点。关于dom操作，我们主要针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作。利用DOM树可以把节点划分为不同的层级关系，常见的是父子兄层级关系。方法将一个节点添加到指定父节点的子节点列表末尾。方法将一个节点添加到指定父节点的指定子节点前面。方法从DOM中删除一个子节点，返回删除的节点。给元素添加事件，称为注册事件或者绑定事件。方法返回调用该方法的节点的一个副本。
复制链接

扫一扫