从零开始学前端：DOM、BOM、焦点事件 --- 今天你学习了吗？（JS：Day20）

Coisini_甜柚か

已于 2022-11-22 16:37:02 修改

阅读量610

点赞数

分类专栏：从零开始学前端文章标签：前端 javascript 学习

于 2022-11-21 17:23:19 首次发布

本文为Coisini博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/weixin_45266979/article/details/127968937

版权

从零开始学前端专栏收录该内容

48 篇文章 10 订阅

订阅专栏

从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（JS）

复习：从零开始学前端：CSSOM视图模式 — 今天你学习了吗？（JS：Day19）

前言

最近有点忙，又拉下了。

第十五节课：DOM、BOM、焦点事件、键盘事件

一、JS三大组成部分

es （ECMAScript）语法
DOM 文档对象模型
BOM 浏览器对象模型

DOM：是一个对象文档对象模型
1.操作标签节点
2.严格不专属于js

        var box = document.querySelector('#box');
        // childNodes获取到所有的子节点，包括文本节点。
        console.log(box.childNodes);
        // text节点  文本节点 ：空格，任意的文字，换行，空白行
        // document.documentElement
        /* 
            节点：
                1.元素节点(ele) element
                2.text节点  文本节点 ：空格，任意的文字，换行，空白行
                3.属性节点
                4.注释节点comment
        */

        // children:返回第一级子元素节点;
        console.log(box.children);

        // 元素节点的节点类型;
        console.log(box.childNodes[6].nodeType);

        // nodeName返回节点名称
        console.log(box.children[3].nodeName);
        // tagName返回节点名称 
        console.log(box.children[3].tagName);

        console.log(box.getAttribute('id')); // 值
        console.log(box.getAttributeNode('id')); //id 名 值
        console.log(box.getAttributeNode('name')); // null

        // 返回第一个节点
        console.log(box.firstChild);
        // 返回第一个元素节点       
        console.log(box.firstElementChild)
        // 返回最后一个节点
        console.log(box.lastChild);
        // 返回最后一个元素节点
        console.log(box.lastElementChild);

        // 兄弟节点
        console.log(box.nextSibling)

        // 兄弟元素节点
        console.log(box.nextElementSibling)

        // 找父节点
        console.log(box.parentNode)
        // 找父节点
        console.log(box.offsetParent)

        // 获取元素节点个数
        console.log(box.childElementCount);

效果：
在这里插入图片描述

二、DOM方法

1. childNodes

获取到所有的子节点，包括文本节点。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        console.log(box.childNodes)
        // 操作子节点；带了s,返回集合。
        // 1. 返回
        //     01：text
        //     02: ul
        //     03: text
        // 解析空格text;

        // 注意：在低版本IE里面只会返回元素节点而不会返回无效的文本节点（除非有添加文本内容）。
        // 在低版本IE里面只会返回元素节点而不会返回无效的文本节点（除非有添加文本内容）。
        // 无效的文本节点：指空格或换行；
        // 在主流浏览器里面，把换行和空格都视为正常的文本节点，跟普通的文本没区别。
    </script>
</head>

<body>
    <div id="box">
        <div id="p1"></div>
    </div>
</body>

</html>

2. children

返回第一级子元素节点
box.children
返回一个类数组，类数组的取值操作：[ ]下标取值；
children是一个属性，不是一个方法，所以不用加（）

3.nodeType

元素节点的节点类型

<div id="box">
    <div id='p1'></div>
    <div id='p2'></div>
    <!---->
</div>

var box = document.getElementById('box');
console.log( box.childNodes[0].nodeType )   //3
console.log( box.children[0].nodeType )  //1
//不同的节点，数据类型是不一样。比如：类数组与类组，类型不一样。
//百度找nodeType
元素节点的类型：1;
属性：2;
text文本内容：3;
注释：8;

4. nodeName

返回节点名称

console.log( box.children[0].nodeName );
<div id="box">
   <div id='p1'>123</div>
   <div id='p2'>123</div>
</div>
box.children[0].onclick = function(){
    alert( 123 )
}
//children为类数组，类数组通常有length的方法;

属于动态获取;

    只要里面孩子的个数变了，都能动态地反馈出来。

5. tagName

//与nodeName的区别 
console.log( box.childNodes[1].nodeName );  // document 能返回注释节点
console.log( box.childNodes[1].tagName );   // 返回undefined
 //区别：nodeName能返回各种各样的节点，但是tagName只能返回对象节点;

6. firstChild

//返回第一个子节点
//在主流浏览器返回子节点
//在低版本IE的情况下返回的是元素节点
console.log( box.firstChild );

7. parentNode

//返回父节点 , 没有兼容问题
console.log( box.parentNode );

8. offsetParent

div{width:300px; height:300px;background-color: #90f;}
div#box{position:absolute; }
p{background-color:#f0f;font-size:30px;}
<div id="box">
    <!---->
    <div id='p1'>123</div>
    <div id='p2'>123</div>
</div>
//返回定位父级
console.log( p2.offsetParent )

9. createElement/appendChild

创建元素与添加子节点，通常是结合起来使用的。
clone:

var cloneBox = box.cloneNode(); //有两个值，默认为false.
    false：  //代表的是浅复制，浅复制只复制节点本身，不复制子元素的内容，只复制标签本身。
    true：   //深度复制，深度复制里面有什么东西的话，JS里面也是要有（比如属性，事件，）。
document.body.appendChild( cloneBox );

10. removeChild

删除子节点（通过父级来杀，不能自杀）**

var wrap = document.getElementsByClassName('wrap');
box.removeChild( wrap[1] );
//如果有多个节点的话，先找到子节点之后再去找到父级

11. replaceChild

<div id="box">
    <div class='wrap'>wrap1</div>
    <div class='wrap'>wrap2</div>
    <div class='wrap'>wrap3</div>
    <div class='wrap'>wrap4</div>
</div>



var wrap = document.getElementsByClassName('wrap')[1];
var p = document.createElement('p');
p.innerHTML = 'p0';
box.replaceChild( p , wrap );
//node.replaceChild(newnode,oldnode)

三、BOM(browser object Model) 浏览器对象

1.window对象

    /*
        浏览器对象模型：
        BOM browser object Model 提供方法操作浏览器的功能；
    */
    /*
        Screen 对象包含有关客户端显示屏幕的信息。
        History 对象包含用户（在浏览窗口中）访问过的URL。
        Location 对象包含有关当前URL的信息。
    */
    console.log(window.location);

    window.onblur = function () {
        console.log('切换到别的地方去了。')
    }
    window.onfocus = function () {
        console.log('又切换回来了。')

效果：
在这里插入图片描述
提示框：

    //警告框经常用于确保用户可以得到某些信息。
    alert('提示文本！')
    //确认框用于使用户可以验证或者接收某些信息。
    confirm('文本')
    //提示框：经常用于提示用户在进入页面前输入某个值。
    prompt("文本2", "默认值")

效果：
在这里插入图片描述

2.Navigator 对象包含有关浏览器的信息

    console.log(navigator.appName)         
    console.log(navigator.cookieEnabled)    //返回浏览器是否启用cookie的布尔值

效果：
在这里插入图片描述

3.Screen对象包含有关用户屏幕的信息

    /*
        window 对象
            所有浏览器都支持 window 对象。它表示浏览器窗口。
            window.screen 对象在编写时可以不使用 window 这个前缀。
    */
    //  相关属性：
    console.log('可用宽度：' + screen.availWidth);  //1920
    /*
        screen.availHeight 可用屏幕高度
        属性返回访问者屏幕高度，以像素计，减去界面特性，比如窗口任务栏。
    */
    //  相关属性:
    console.log("可用高度：" + screen.availHeight); //1032

效果：
在这里插入图片描述

4.Window Location

//对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
//Window Location Href
 //用中文的形式：会被传为unicode码
    console.log( location.href );//返回（当前页面的）整个 URL：
//Window Location Pathname
    console.log(location.pathname); //返回当前 URL 的路径名：

效果：
在这里插入图片描述

5.History

//Window Location Assign
<input type="button" value="Back" >
<input type="button" value="Forward">
var input = document.getElementsByTagName( 'input' );
input[0].onclick = function(){
    window.history.back()
}
input[1].onclick = function(){
    window.history.forward()
}

6.onblur 失去焦点

//页面切换，也可以获取光标或失去光标;
//当前页面不会被渲染;
//轮播会报错，因为切换到别的页面，页面不会渲染到，但是定时器还是会走。
var input = document.getElementsByTagName( 'input' )[0];
input.onfocus = function(){
    console.log( '获得焦点' );
}
input.onblur = function(){
    console.log( '失去焦点' )
}
//理论上是内容发生改变的时候才会触发;前提是得失去内容才能触发事件
input.onchange = function(){
    console.log( this.value );
}
//内容改变就会触发（能获取光标，），没有任何前提;
//H5新事件，不兼容低版本IE浏览器.
input.oninput = function(){
    console.log( this.value );
} 
//focus 聚焦于某个能获取焦点的对象;
//blur  让某个能获得焦点的对象失去焦点;
input.onblur = function(){
    this.focus();
}
input.focus = function(){
    this.blur();
}

7.键盘事件

//先后顺序:先down,再press,后：up;
input.onkeydown = function(){
    console.log( '键盘按下' )
}
input.onkeyup = function(){
    console.log( '键盘抬起' )
}
input.onkeypress = function(){
    console.log( '键盘按下事件' )
} 
/*
    onkeydown  键盘按下 (任何按键按下都会触发)
    onkeyup  键盘抬起（任何按键抬起都出触发）
    onkeypress  键盘按下事件 (只会相应字母键、数字键、符号键 / 不响应功能键F1等等 )
    onkeydown 与 onkeypress的区别：
    onkeypress
        这个事件在用户按下并放开任何字母数字键时发生。系统按钮（例如，箭头键和功能键）无法得到识别。 
    onkeydown
        这个事件在用户按下任何键盘键（包括系统按钮，如箭头键和功能键）时发生。
*/

8.`e.keyCode` / `e.key` 具体按下某个键

对应的属性：

input.onkeydown = function(e){
    console.log( '键盘按下' )
    console.dir( e )
}

<input type="text" id='input'>
input.onkeydown = function(e){
    if( e.keyCode ===116 ){ //116 F5键
        console.log( '按下了是F5键');
        e.preventDefault();//阻止默认事件，也就是阻止了刷新;
    }else{
        console.log( '按下了'+ e.key +'键');
        e.preventDefault();//阻止默认事件，也就是阻止了刷新;
    }
}

input.onkeyup = function(){
    console.log( 'up:键盘抬起了！' );
}
input.onkeypress = function(){
    console.log( 'press:键盘按下了！' )
}
/*
    key与code都是返回对应的键：
        推荐使用key;
            1.形象（ key本身就是为键; ）
            2.code更智能
*/
/*
    组合键：
        ctrlkey 
        altkey
*/
//按下事件进行赋值：
input.onkeydown = function( e ){
    //同时按下Ctrl+alt+波浪符 ，弹出对应的内容
    if( e.ctrlKey && e.altKey ){
       this.value = ' hello wold! '
    }
}