JavaScript基础总结(下) | 青训营笔记

syrlinkstart
136 阅读7分钟

这是我参与「第四届青训营 」笔记创作活动的的第7天

一、重点内容

  • DOM和BOM
  • 事件

二、详细知识点

DOM

  • DOM是JS操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个JS对象，从而可以用脚本进行各种操作
  • HTML DOM树中的所有节点均可通过JS进行访问，所有HTML元素(节点)均可被修改，也可以创建或删除。
  • DOM 将 HTML 文档表达为树结构(DOM树)。
    1. 文档对象：一个页面就是一个文档，DOM中使用 document表示
    2. 元素对象：页面中的所有标签都是元素，DOM中使用 element表示
    3. 节点对象：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示

image.png

  • DOM核心：主要是针对元素的操作，有创建、增、删、改、查、属性操作、事件操作 创建
  1. document.write()
  2. insertHTML 例如：bnt.innerHTML = '点我！';
  3. creatElement
  • 增
    1. appendChild()
    2. insertBefore()
  • 删
    1. removeChild()
  • 改
    1. 修改元素属性：src、href、titlt等
    2. 修改元素样式：style、className
    3. 修改元素内容：insertHTML、insertText
    4. 修改表单元素：value、type、disable
  • 查
    1. querySelector()
    2. querySelectorALL()
    3. 利用当前节点获取元素：父(parentNode)、子(child)、(nextElementsibling)
  • 属性操作
    1. setAttribute：设置dom的属性值
    2. getAttribute：得到dom的属性值
    3. removeAttribute 移除属性

获取DOM元素

  • var x = document.documentElement：得到整个文档（html元素）
  • var x = document.head：得到head元素
  • var x = document.body：得到body元素

根据Id获取特定元素

  • 使用document.getElementById('id属性值')方法可以返回带有指定id属性值的对象
// 因为我们文档页面从上往下加载，所以先得有标签所以我们script写到标签的下面
<div id="x1">我在哪??</div>

var x1 = document.getElementById('x1');  //注意要带引号
console.dir(x1);  // 打印我们返回的元素对象，更好的查看里面的属性和方法

根据标签名获取元素集合

  • 使用 document.getElementsByTagName('标签名')：返回带有指定标签名的对象的集合
  • eg: var x = document.getElementsByTagName('li');
  1. 因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历。
  2. 返回的是一个元素对象的集合，以伪数组的形式存储，可以是(x[0])获取一个对象
  3. 得到元素对象是动态的，通过html可以改变元素标签的内容

根据类名返回元素集合

  • 使用 document.geElementsByClassName('类名')：返回带有指定标签名的对象的集合

根据指定选择器返回第一个元素

  • document.queryselector()：返回指定选择器的第一个元素对象，切记里面的选择器需要加符号 .box #nav
document.querySelector('.box')
document.querySelector('#box')
document.querySelector('span')  //里面也可以直接加标签

根据指定选择器返回所有元素对象集合

  • document.querySelectorAll('.box')：返回指定选择器的所有元素对象，切记里面的选择器需要加符号 .box #nav
document.querySelectorAll('.box')
document.querySelectorAll('#box')
document.querySelectorAll('span')

操作属性节点

<div class="box" id="xxx" title="标题" abc="yes" xyz="222" data-mn="333">我是div</div>
  • 标准属性：指的是html中规定好的属性 class id title
  • 自定义属性：程序员自己写的属性 abc xyz叫自定义属性
  • 在H5中规定，如果是自定义属性，最好使用data-打头，如：data-mn="888"

属性节点是位于元素节点上面的。 获取属性节点，首先要得到元素节点。

  1. div.className：只能获取标准属性
  2. getAttribute()：可以获取自定义属性，也能获取标准属性

例子：

  1. 修改图片背景
  • src、href
  • id、alt、title
<button class="x1">1</button>
<button class="x2">2</button>
<img src="../../img.ACG/天音.jpg" alt="" title="柠檬">
<script>
    // 先要获取元素节点
    var but1 = document.querySelector('.x1');
    var but2 = document.querySelector('.x2');
    var img = document.querySelector('img');
    // 再根据元素节点操作对应的属性
    but1.onclick = function () {
        img.src = '../../img.ACG/kz！.jpg';
        img.title = '8+';
    }
    but2.onclick = function () {
        img.src = '../../img.ACG/8899.jpg';
        img.title = '18+';
    }
</script>
  1. 修改元素样式(我们可以通过JS修改元素的大小、颜色、位置等样式)
  • js里面的样式采取驼峰命名法比如 fontSize、 backgroundColor
  • js修改style样式操作，产生的是行内样式，css权重比较高
<div></div>
<script>
    var div = document.querySelector('div');
    div.onclick = function() {
        this.style.backgroundColor = 'green';
    }
</script>
  1. className 可以统一改变属性样式
  • 操作类名：
    1. 设置类名：元素.className="box"
    2. 修改类名：元素.className="新值"
    3. 追加类名：元素.className = 元素.className + " 新类名" 在新类名前面需要有一个空格
    4. 删除类名：获取类型 置为空 截取字符串 循环遍历 删除你要删除的类型
<style>
    div {
        background-color: black;
        width: 100px;
        height: 100px;
    }

    .change {
        background-color: pink;
        width: 200px;
        height: 100px;
    }
</style>
    
<script>
    var bnt = document.querySelector('button');
    var div = document.querySelector('div');
    bnt.onclick = function () {
        div.className = 'change';
    }
</script>

操作文本节点

  • element.innerHTML：获取标签中所有的内容，识别htm标签、W3C标准、保留空格和换行
  • element.innerText：不识别htm标签、非标准、去除空格和换行
  • element.value：针对输入框中的文本节点s
//排它思想
var list = document.querySelectorAll('button');
for (var i = 0; i < list.length; i++) {
    list[i].onclick = function () {
        for (var j = 0; j < list.length; j++) {
        list[j].style.backgroundColor = '';
        }
        this.style.backgroundColor = 'pink';
    }
}

BOM

未完待续

事件

事件是有三部分组成：事件源、事件类型、事件处理程序，我们也称为事件三要素

  1. 事件源：事件被触发的对象(类似按钮)
  2. 事件类型：如何触发 什么事件 (比如鼠标点击 还是鼠标经过 还是键盘按下)
  3. 事件处理程序：通过一个函数赋值的方式 完成

例如：

<button id="x2">我是id元素x2</button>
<script>
   var s = document.getElementById('x2');   //s为事件源
   s.onclick = function() {                 //onclick为事件类型
       alert('不要点我！');                 //function为事件处理程序
   }
</script>

注册事件

  1. 给元素添加事件，称为注册事件或者绑定事件。
  2. 注册事件有两种方式：传统方式和方法监听注册方式
  • 传统注册方式
    1. 利用on开头的事件 如：onclick
    2. 特点：同一个元素同一个事件只能设置一个处理数，最后注册的处理函数将会覆盖前面注册的处理函数
  • 方法监听注册方式
    1. xx.addEventListener(type, listener, useCapture)
    2. 此方法将指定的监听器注册到xx（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。
    3. 该方法接收三个参数：
      1. type：事件类型字符串，比如click、mouseover，注意这里不要带on
      2. listener：事件处理函数，事件发生时，会调用该监听函数
      3. useCapture：true是冒泡阶段，false是捕获阶(段默认是false)
        • 实际开发中我们很少使用事件捕获，我们更关注事件冒泡。
        • 有些事件是没有冒泡的，比如onb1ur、onfocus..
// 1. 里面的事件类型是字符串必定加引号而且不带on
// 2. 同一个元素同一个事件可以添加多个侦听器（事件处理程序）
bnt.addEventListener('click',function() {
alert('你好！');
})
或：bnt.addEventListener('click',f)
    function f() {
        alert('22');
    }

删除事件

  1. xx.onclick = null (传统注册方式)
  2. removeEventListener(type, listener, useCapture) 如：removeEventListener('click', fun)

事件对象

event对象代表事件的状态，比如键盘按键的状态鼠标的位置、鼠标按钮的状态

  1. event就是一个事件对象写到我们侦听函数的小括号里面当形参来看
  2. 事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数
  3. 事件对象是我们事件的一系列相关数据的集合，比如 鼠标点击里面就包含了鼠标的相关信息，鼠标坐标等；如果是键盘事件，那么里面就包含的键盘事件的信息比如判断用户按下了那个键

e.target返回的是触发事件的对象

this返回的是绑定事件的对象

事件对象属性方法说明
e.target            返回触发事件的对象  标准
e.srcElement        返回触发事件的对象  非标准ie6-8使用
e.type              返回事件的类型  比如 click mouseover不带on 
e.cancelBubble      该属性阻止冒泡      非标准ie6-8使用
e.returnValue       该属性阻止默认事件（默认行为）非标准ie68使用比如不让链接跳转
e.preventDefault()   该方法阻止默认事件（默认行为）标准比如不让链接跳转
e.stopPropagation()  阻止冒泡标准

鼠标事件

鼠标事件         触发条件
onclick         鼠标点击左键触发
onmouseover     鼠标经过触发
onmouseout      鼠标离开触发
onfocus         获得鼠标焦点触发
onblur          失去鼠标焦点触发
onmousemove     鼠标移动触发
onmouseu        鼠标弹起触发
onmousedown     鼠标按下触发

例如：

<button id="x2">当前时间是</button>
<div>时间</div>
<div class="x1">我呢！</div>
<script>
var btn = document.querySelector('#x2');
var div = document.querySelector('div');
var x1 = document.querySelector('.x1');
var date = new Date();
btn.onclick = function() {
        div.innerText = '今天是：'+date.getDate() + '号';
        x1.innerHTML = '<strong>在这呢！</strong>';
}

三、参考引用

CSDN - WebAPIs介绍

CSDN - WebAPIs-基础知识

avatar
文章
阅读
粉丝