前端js学习随笔--DOM

最新推荐文章于 2021-06-04 02:30:26 发布

奋斗、理想

最新推荐文章于 2021-06-04 02:30:26 发布

阅读量120

点赞数 1

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/qq_50937686/article/details/117375180

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.js基础与Web APIs两阶段的关联性

js基础学习ECMAScript基础语法为后面做铺垫，Web APIs是JS的应用，大量使用JS基础语法做交互效果

2.API与Web APIs

API一些工具接口,实现某种功能
Web API是浏览器提供的一套操作浏览器功能(BOM) 和页面元素(DOM) 的API

3.DOM

文档：一个页面就是一个文档，用document表示
元素：页面中所有标签都是元素，用element表示
节点：网页中所有内容都是节点(标签、属性、文本、注释等)，用node表示
DOM可以吧以上都看成是一个对象

4. 获取元素(细节看获取元素.html)

4.1 根据ID获取(返回对象)

  document.getElementById('box');

4.2 根据标签名获取(返回集合)

  document.getElementsByTagName('li')

4.3 通过HTML5新增方式获取
(1) 根据类名获取(返回集合)

    document.getElementsByClassName('box');

(2) 根据指定选择器返回第一个元素对象(返回对象)

  document.querySelector('选择器');

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

  document.querySelectorAll('选择器');

4.4 特殊元素获取

(1) 获取body元素(返回对象)

   document.body;

(2) 获取html元素(返回对象)

   document.docmentElement;

5. 事件基础

事件是可以被JavaScript侦测到的行为

5.1 事件三要素

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

5.2 执行事件的步骤

(1) 获取事件源 
(2) 注册事件(绑定事件)
(3) 添加事件处理程序(采取函数赋值的形式)

5.3 常见的鼠标事件(自己找找)

在这里插入图片描述

6.操作元素

6.1 改变元素的内容

(1) element.innerText
   从起始位置到终止位置的内容，但去除html标签以及空格与换行
(2) element.innerHTML
   从起始位置到终止位置的内容，包含html标签以及空格与换行

6.2 修改元素属性

img.src = ""

6.3 修改表单属性

input.value

6.4 修改样式属性

element.style 行内样式
element.className 类名样式

7.自定义属性的操作

7.1 获取属性值

(1) element.属性
(2) element.getAttribute('属性');
(3) 若属性名为" data- "开头的时候，还可：
       element.dataset.属性（h5新增）
       dataset是一个包含data-前缀的集合
      例如：data-index可以element.dataset.index
区别：
(1) 获取的是内置的属性值
(2) 主要获得自定义的属性（标准）

7.2 设置属性值

(1) element.属性 = 'value';
(2) element.setAttribute('属性', 'value');

7.3 移除属性

element.removeAttribute('属性');

8.节点操作

8.1 节点概述
一般的节点至少拥有nodeType(节点类型)、nodeName(节点名称)、nodeValue(节点值)。

(1) nodeType
   元素节点 1
   属性节点 2
   文本节点 3   包含文字、空格、换行等
(2) nodeName
(3) nodeValue

8.2 节点操作

(1) 父节点parentNode

   得到的是个元素
   得到的是里元素最近的父亲 无就null

(2) 子节点

  a. childNode（不常用）
    得到的是一个"节点"集合，结果非常杂，需要过滤
  b. children（非标准，但常用）
    得到的是一个"子元素"集合
  c. firstChild   lastChild
     第一个"子节点"   最后一个"子节点"
  d. firstElementChild   lastElementChild(兼容性有问题)
     第一个"子元素"      最后一个"子元素"

(3) 兄弟节点

   nextSibling 下一个"节点"
   previousSibling 上一个"节点"
   nextElementSibling 下一个"元素"
   previousElementSibling 上一个"元素"

(4) 创建节点

   document.createElement("tagName");
   var li = document.createElement("li");

(5) 添加节点

   node.appendChild(child);(追加,加后面)
   ul.appendChild(li);

   node.insertBefore(child,指定元素);
   ul.insertBefore(li,ul.children[0]);

(6) 删除节点

   node.removeChild(child);删除

(7) 复制节点

   node.cloneNode(bool);
   bool为false(默认)，表示浅拷贝，只拷贝标签
        true，全拷贝

9.三种创建元素方式的区别

9.1 document.write() 
如果页面文档流加载完毕，在调用这句话会导致页面重绘
9.2 document.innerHTML
采用数组，用时几毫秒，字符串，用时几秒
9.3 document.createElement()
用时几十毫秒

10.事件高级

10.1 注册事件

(1) 传统方式
    唯一性：一个元素对于同一个事件，只能设置一个处理函数，后面可以覆盖前面
(2) 方法监听注册方式
    addEventListener()
    一个元素对于同一个事件，可以注册多个监听器,按注册顺序执行
    eventTarget.addEventListener(type, listener[,useCapture])
    type: 事件类型字符串，不带on
    listener: 事件处理函数
    useCapture：一个布尔值,true则处于捕获阶段，false则处于冒泡阶段。默认false

10.2 删除事件

(1) 传统方式
    eventTarget.onclick = null;
(2) 方法监听注册方式
    eventTarget.removeEventListener(type, listener[,useCapture]);
    listener：如果需要移除，此参数在add时不能为匿名函数，需要另外声明函数，
    且此处不带小括号，函数名直接调用

11.DOM事件

11.1 事件流

    冒泡和捕获

11.2 事件对象

(1) event就是一个事件对象，写到我们侦听函数小括号里面 当形参来看
(2) 事件对象只有有了事件才会存在，是系统自己创建的，不需要我们传实参
(3) 事件对象时事件的一系列相关数据的集合，跟时间相关的 比如鼠标点击里面就包含了鼠标的相关信息，
    鼠标坐标等，如果是键盘案事件就包含了键盘事件的信息 比如判断用户按下了哪个键
(4) 可以用其他单词命名，比如event e
(5) 有兼容性问题 ie678要用window.event, 不能用event

11.3 e.target与this的区别

e.target 返回的是触发事件的对象(元素)
this 返回的是绑定事件的对象

11.3 阻止默认事件让链接不跳转或者提交按钮不提交

 e = e || windows.event;
 e.preventDefault();  普通浏览器
 e.returnValue;   低版本浏览器
 return false;  不存在兼容性问题 但只能用于传统注册方式，且屏蔽return 之后的语句

11.4 阻止冒泡

 e.stopPropagation();
 e.cancelBubble = true;取消泡泡
 
 兼容性写法
 if(e && e.stopPropagation){
   e.stopPropagation();
 }else{
   windows.event.cancelBubble = true;
 }

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

 原理：不是每个子节点单独设置事件监听器，而是事件监听器设置在父节点上，
 然后利用冒泡原理影响设置每个子节点

12.禁止右键菜单与禁止选中文字

12.1 禁止右键菜单 contextmenu

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

12.2 禁止选中文字 selectstart

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

13.鼠标事件对象MouseEnent

14.常用的键盘事件

14.1 键盘事件

在这里插入图片描述

<script>
        // 常用的键盘事件
        //1. keyup 按键弹起的时候触发 
        document.addEventListener('keyup', function() {
            console.log('我弹起了');
        })

        //3. keypress 按键按下的时候触发  不能识别功能键 比如 ctrl shift 左右箭头啊
        document.addEventListener('keypress', function() {
                console.log('我按下了press');
        })
        //2. keydown 按键按下的时候触发  能识别功能键 比如 ctrl shift 左右箭头啊
        document.addEventListener('keydown', function() {
                console.log('我按下了down');
        })
        // 4. 三个事件的执行顺序  keydown -- keypress -- keyup
    </script>

14.2 键盘事件对象

document.addEventListener('onkeydown',function(e){
   e.keyCode;//返回ASCLL码值
 })
//1.keyup keydown 事件不区分大小写
//2.press 事件区分大小写
//keyup 是先输入值，再执行事件函数
//keypress、keydown是执行函数再输入值

在这里插入图片描述

1.1.2 键盘事件对象

使用keyCode属性判断用户按下哪个键

 <script>
        // 键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
        document.addEventListener('keyup', function(e) {
            console.log('up:' + e.keyCode);
            // 我们可以利用keycode返回的ASCII码值来判断用户按下了那个键
            if (e.keyCode === 65) {
                alert('您按下的a键');
            } else {
                alert('您没有按下a键')
            }
        })
        document.addEventListener('keypress', function(e) {
            // console.log(e);
            console.log('press:' + e.keyCode);
        })
    </script>

1.1.3 案例：模拟京东按键输入内容
当我们按下 s 键，光标就定位到搜索框（文本框获得焦点）。

在这里插入图片描述

注意：触发获得焦点事件，可以使用元素对象.focus()

    <input type="text">
    <script>
        // 获取输入框
        var search = document.querySelector('input');
        // 给document注册keyup事件
        document.addEventListener('keyup', function(e) {
            // 判断keyCode的值
            if (e.keyCode === 83) {
                // 触发输入框的获得焦点事件
                search.focus();
            }
        })
    </script>

1.1.4 案例：模拟京东快递单号查询
要求：当我们在文本框中输入内容时，文本框上面自动显示大字号的内容。
在这里插入图片描述

<div class="search">
        <div class="con">123</div>
        <input type="text" placeholder="请输入您的快递单号" class="jd">
    </div>
    <script>
        // 获取要操作的元素
        var con = document.querySelector('.con');
        var jd_input = document.querySelector('.jd');
        // 给输入框注册keyup事件
        jd_input.addEventListener('keyup', function() {
                // 判断输入框内容是否为空
                if (this.value == '') {
                    // 为空，隐藏放大提示盒子
                    con.style.display = 'none';
                } else {
                    // 不为空，显示放大提示盒子，设置盒子的内容
                    con.style.display = 'block';
                    con.innerText = this.value;
                }
            })
        // 给输入框注册失去焦点事件，隐藏放大提示盒子
        jd_input.addEventListener('blur', function() {
                con.style.display = 'none';
            })
        // 给输入框注册获得焦点事件
        jd_input.addEventListener('focus', function() {
            // 判断输入框内容是否为空
            if (this.value !== '') {
                // 不为空则显示提示盒子
                con.style.display = 'block';
            }
        })
    </script>

奋斗、理想

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端js学习随笔--DOM

1.js基础与Web APIs两阶段的关联性js基础学习ECMAScript基础语法为后面做铺垫，Web APIs是JS的应用，大量使用JS基础语法做交互效果2.API与Web APIsAPI一些工具接口,实现某种功能Web API是浏览器提供的一套操作浏览器功能(BOM) 和页面元素(DOM) 的API3.DOM文档：一个页面就是一个文档，用document表示元素：页面中所有标签都是元素，用element表示节点：网页中所有内容都是节点(标签、属性、文本、注释等)，用node表示D
复制链接

扫一扫