JavaScript-day39

Day39 DOM操作、事件

1. DOM操作

1.1 webAPI
(1)、api的概念
API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。例如:alert()、 prompt()、log()、reverse()、getMonths()
任何开发语言都有自己的API
API的特征输入和输出(I/O)
API的使用方法(console.log())
(2)、webapi的概念
浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)
我们可以通过API去操作DOM和BOM
此处的web API特指浏览器提供的API(一组方法),web API在后面的课程中有其它含义

(3) 、JavaScript的组成

在这里插入图片描述
1.2 DOM概述
事件基础文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标准模型就称为DOM。Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”,双方为了在JavaScript与JScript一决生死,于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物,既有VBScript、ActiveX、以及微软自家的DHTML格式等,使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时蕴酿出来的杰作。

DOM又称为文档树模型
在这里插入图片描述
文档:一个网页可以称为文档
节点:网页中的所有内容都是节点(标签、属性、文本、注释等)
元素:网页中的标签
属性:标签(元素)的属性
1.3 获取元素对象的方式
想要操作DOM,核心问题,你得先找到它,而获取对象的方式,就是用来找到某个/某些元素的

伪数组定义:
1、拥有length属性,其它属性(索引)为非负整数(对象中的索引会被当做字符串来处理,这里你可以当做是个非负整数串来理解)
2、不具有数组所具有的方法
伪数组,就是像数组一样有 length 属性,也有 0、1、2、3 等属性的对象,看起来就像数组一样,但不是数组
常见的参数的参数 arguments,DOM 对象列表(比如通过 document.getElementsByTags 得到的列表)

 <style>
        #box1 {
            height: 100px;
            width: 100px;
            background-color: blueviolet;
        }
    </style>
</head>

<body>
    <div id="box1">1</div>
    <div class="box2">2</div>
    <div name='a' class="box2">3</div>
</body>

1.3.1 根据ID获取

 // 1 根据ID获取 返回单个DOM对象
    var box1 = document.getElementById("box1");
    console.log(box1);
    // 对 box1绑定点击事件,当点击之后触发
    box1.onclick = function () {
        // alert("box1被点击了");
        // 点击之后 更改文本内容
        this.innerText = "box1被点击了";
    }

1.3.2 根据class获取

 // 2 根据class获取,返回伪数组
    // (DOM对被保存在伪数组中,想要操作,需在数组中取出,在进行操作)
    var box2s = document.getElementsByClassName("box2");
    // [div.box2, div.box2]
    console.log(box2s);
    // 必须把DOM对象在数组中取出,才可操作该DOM对象
    for (var i = 0; i < box2s.length; i++) {
        box2s[i].onclick = function () {
            // alert("box1被点击了");
            // 点击之后 更改文本内容
            this.innerText = "box2被点击了";
        }
    }

1.3.3 根据标签名获取

 // 3 根据标签名获取,返回伪数组
    var divs = document.getElementsByTagName("div");
    // [div#box1, div.box2, div.box2, box1: div#box1]
    console.log(divs);

1.3.4 根据name获取

   // 4 根据name属性获取,返回为数组
    var as = document.getElementsByName('a');
    // [div.box2]
    console.log(as);

1.3.5 querySelector

  // 5 querySelector 获取指定选择器中的第一个元素,参数是选择器,返回单个DOM对象
        var box1 = document.querySelector("#box1");
        var box2 = document.querySelector(".box2");
        console.log(box1);
        console.log(box2);

1.3.6 querySelectorAll

  // 6 querySelectorAll 获取指定选择器中的所有元素,参数是选择器,返回伪数组
    var box1 = document.querySelectorAll("#box1");
    // [div#box1]
    console.log(box1);
    var box2 = document.querySelectorAll(".box2")
    // [div.box2, div.box2]
    console.log(box2);

2. 事件

2.1 概述
事件:触发-响应机制
Event接口表示在DOM中发生的任何事件,一些是用户生成的(例如鼠标或键盘事件),而其他由API生成。

三要素 :
事件源:触发(被)事件的元素
事件类型:事件的触发方式(例如鼠标点击或键盘点击)
事件处理程序:事件触发后要执行的代码(函数形式)

 /**
     * JS中对HTML绑定事件,有两种方式
     *  第一种 : 标签中直接绑定
     *  第二种 : 在js中获取标签的DOM对象,然后绑定,又叫迟邦定
     * 
     * 对象绑定一个事件,事件触发一个函数,在函数中执行代码,找对象,改属性
     * 
     * 绑定事件的对象,叫事件对象
     * 触发事件的对象,叫事件源对象
     */

2.2 绑定方式

 <style>
        #sup{
            width: 500px;
            height: 500px;
            background-color: blueviolet;
        }
        #sub{
            width: 200px;
            height: 200px;
            background-color: red; 
        }
    </style>
</head>
<body>
   <button id="btn">按钮</button> 
   <div id="sup">
       <div id="sub"></div>
   </div>
   <button onclick="btn2()">按钮2</button>
</body>
<script>
    function btn2(){
        alert("点击了")
    }
    /**
     * JS中对HTML绑定事件,有两种方式
     *  第一种 : 标签中直接绑定
     *  第二种 : 在js中获取标签的DOM对象,然后绑定,又叫迟邦定
     * 
     * 对象绑定一个事件,事件触发一个函数,在函数中执行代码,找对象,改属性
     * 
     * 绑定事件的对象,叫事件对象
     * 触发事件的对象,叫事件源对象
     */
    var btn = document.getElementById('btn');
    btn.onclick = function(){
        alert("我被点击了")
    }


    var sup = document.getElementById("sup")
    sup.onclick=function(e){
        console.log("this : "+this.id);
        console.log("事件源 : "+e.target.id);
    }


</script>

2.3 Onload事件
获取DOM对象的语句,必须放在body之后,否则会因为代码执行顺序的原因,导致获取不到对应的DOM对象

 <script>
   
            var btn = document.getElementById('btn');
            btn.onclick = function () {
                alert("点击了");
            
        }
    </script>
</head>

<body>
    <button id='btn'>按钮</button>
</body>

在这里插入图片描述
而onload事件,就是用来解决这个问题的,
Onload : 文档加载完之后,立即触发执行

 <script>
        // 文档加载完后,触发
        window.onload = function () {
            var btn = document.getElementById('btn');
            btn.onclick = function () {
                alert("点击了");
            }
        }
    </script>

在这里插入图片描述

3. 属性操作

3.1 表单操作
3.1.1 常用属性

value 用于大部分表单元素的内容获取(option除外)
type 可以获取input标签的类型(输入框或复选框等)
disabled 禁用属性checked 复选框选中属性
selected 下拉菜单选中属性
checked
Readonly
3.1.2 案例

<!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>
    <style>
        form{
            width: 500px;
            height: 500px;
            border: 1px solid;
            border-radius: 15px;
            margin: 0 auto;
            text-align: center;
        }
        .userBox,.pwdBox,.sexBox{
            margin-top: 15px;
            margin-bottom: 15px;
        }
        #login{
            width: 200px;
            height: 50px;
            font-size: 24px;
            border-radius: 15px;
        }
    </style>
    <script src="./common.js"></script>
    <script>
        // 文档加载完就初始化执行
        window.onload=function(){
            // 对象初始化
            var username = $("#username")[0];
            var password = $("#password")[0];
            var man = $("#man")[0];
            var woman = $("#woman")[0];
            var login = $("#login")[0];
            var form = $('form')[0];

            login.onclick=function(){
                // console.log(username.value);
                // 获取用户名输入框的值
                var usernameValue = username.value;
                if( usernameValue == null || usernameValue == undefined || usernameValue.trim() == ""){
                    alert("用户名不能为空");
                    return;
                }

                // 获取密码
                var passwordValue = password.value;
                if( passwordValue == null || passwordValue == undefined || passwordValue.trim() == ""){
                    alert("密码不能为空");
                    return;
                }else if(passwordValue.trim().length < 6){
                    alert("密码长度不能小于6位");
                    // password.value='';
                    return;
                }

                // 判断是否选中性别
                // console.log(man.checked);
                if(man.checked || woman.checked){
                    // 设置禁用按钮
                    login.disabled = true;
                    login.value='正在登陆...'
                    login.style.backgroundColor='gray';

                    // 提交表单
                    form.submit();

                    // 浏览器跳转
                    // window.location.href='http://www.baidu.com';
                }else{
                    alert('莫非阁下是...?');
                    return;
                }
            }
        }
    </script>
</head>
<body>
    <form action="http://www.taobao.com" method="get">
        <div class="userBox">
            <label for="username">用户名 : </label>
            <input type="text" name="username" placeholder="请输入用户名" id="username">
        </div>
        <div class="pwdBox">
            <label for="password">密码 : </label>
            <input type="password" name="password" placeholder="请输入密码" id="password">
        </div>
        <div class="sexBox">
            <label >性别 : </label>
            <input type="radio" name="sex"  id="man">男
            <input type="radio" name="sex"  id="woman">女
        </div>
        <input type="button" value="登陆" id='login'>
    </form>
</body>
</html>

3.2 非表单操作
3.2.1 基础语法

href、title、id、src、className width height等等

在这里插入图片描述
比如宽高属性,并不是所有标签都有的,比如img 有宽高属性,所以可以直接通过DOM对象.width = 222 来进行设置
但是比如div等 是没有宽高标签属性的,但是可以通过css进行设置
DOM.style.width=”222px”;
这种设置CSS的写法,如果是两个单词的话,就需要把-改为字母大写
比如 : font-size 通过js设置 就要这样 fontSize

 <style>
        img{
            width: 200px;
        }
      
    </style>
</head>
<body>
    <img src="./images/jie.jpg" width="150" height="100" alt="">
    <div style="width: 200px;">内容</div>

3.2.2 案例

<!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>
    <style>
        .img1{
            border: 2px solid red;
        }
        .img2{
            border: 3px solid green;
        }
    </style>
    <script src="./common.js"></script>
    <script>
        window.onload = init;
        function init() {
            // 对象初始化
            var changeImg = getId('changeImg');
            var changeSize = getId('changeSize');
            var hide = getId('hide');
            var show = getId('show');
            var img = getId('img');
            var changeClass = getId('changeClass');
            // 事件绑定
            changeImg.onclick = function () {
                img.src='./images/2.jpg';  
            }
            changeSize.onclick = function () {
                // 通过标签属性直接更改
                img.width=150;
                // 通过style更改(css)
                img.style.height='200px';
            }
            hide.onclick = function () {
                // 1 src
                // img.src='';
                // 2 display=none 不占有位置
                img.style.display='none';

                // 3 visibility ='hidden' 占有位置
                // img.style.visibility = 'hidden';
            }
            show.onclick = function () {
                // img.style.visibility = 'block';
                
            }
            changeClass.onclick = function () {
                // 会覆盖原来的class
                img.className ='img2'

                // 可以利用 += 做到新增class属性,注意 空格隔开
                img.className +=' img2'
            }
        }
    </script>
</head>

<body>
    <div>
        <button id="changeImg">切换图片</button>
        <button id="changeSize">更改大小</button>
        <button id="hide">隐藏</button>
        <button id="show">显示</button>
        <button id="changeClass">切换class</button>
    </div>
    <br>
    <img src="./images/1.jpg" class="img1" id="img" alt="">
    <div>222</div>
</body>

</html>

4. 扩展-CSS函数

js设置样式太复杂,代码过长,不太方便

4.1.1 CSS函数封装


/**
 * 传入选择器,获取对应的DOM对象,返回伪数组
 * 主要解决创建对象的时候,不需要调用很多方法,一个方法搞定
 * @param {*} selector 
 */
function $(selector) {
    var obj = document.querySelectorAll(selector);
 // --------1
    // obj.css = function(attr,value){
    //     // this就是这个obj 伪数组对象
    //     for(var i = 0 ; i < this.length; i++){
    //         this[i].style[attr]=value;
    //     }
    //     // reutrn this 可以链式调用
    //     return this;
    // }

    // -------------2
    // obj.css = function (x) {
    //     for (key in x) {
    //         // this就是这个obj 伪数组对象
    //         for (var i = 0; i < this.length; i++) {
    //             this[i].style[key] = x[key];
    //             // style.color  style['color']
    //         }
    //     }

    //     // reutrn this 可以链式调用
    //     return this;



   /**
     * 向obj中添加css函数,可以通过obj对象.css()进行调用
     * 
     * 向伪数组中所有的DOM对象,设置相同的样式
     * 
     * 只能设置单个样式
     * 并且 属性 要把-变为首字母大写 : font-size 写成 fontSize
     * 
     * 设置单个属性,可以链式调用
     * $('xxx').css('属性','值').css('属性','值').....;
     * 
     * 同时设置多个属性 , 可以链式调用
     * $("xxx").css({
     *      属性:值,
     *      属性:值,
     *      ....
     * }).css(xxxxx);
     * 
     * 
     * $("xxx").css('属性')  返回对应的属性的值,不能链式调用
     * 
     * 1 一个参数 , 如果是对象,则对所有DOM对象设置多个样式,支持链式调用
     * 2 一个参数 , 不是对象,就认为是属性,则返回第一个DOM对象的属性的值,不支持链式调用
     * 3 两个参数 , 第一个attr是属性,第二个value是属性对应的值,则对所有DOM设置该样式和值
     * 
     * @param {属性名} attr 
     * @param {属性值} value 
     */
    obj.css = function (attr,value) {
        // 传递了1个参数,说明有可能传递的是对象,想要设置多个
        if(arguments.length == 1){
            // 判断attr是否是对象
            if(typeof attr == 'object'){
                // 遍历对象,获取key和value(属性和值)
                for (key in attr) {
                    // this就是这个obj 伪数组对象
                    // 循环遍历 对 DOM对象进行样式设置
                    for (var i = 0; i < this.length; i++) {
                        this[i].style[key] = attr[key];
                        // style.color  style['color']
                    }
                }
            }else{
                // 1个值,不是对象,说明是获取,就返回第一个DOM对象的属性值
                return this[0].style[attr];
            }
        }else{
            // 到这里 说明是 设置单个属性
            for (var i = 0; i < this.length; i++) {
                this[i].style[attr] = value;
            }
        }
        // reutrn this 可以链式调用
        return this;
    }

    /**
     * 封装innerText属性,该方法,无参是获取,有参是设置
     * 
     * 如果obj中有多个DOM对象,则全部设置,如果是获取操作,则只获取第一个元素的innerText
     * 
     * @param {需要设置的内容} text 
     */
    obj.text = function(text){
        
        // 判断 是否传递参数
        if(arguments.length >= 1){
            for(var i = 0; i< this.length ; i++){
                this[i].innerText = text;
            }
            return this;
        }else{
            // 无参是获取
            return this[0].innerText;
        }
    }
      /**
     * 封装innerHTML属性,该方法,无参是获取,有参是设置
     * 
     * 如果obj中有多个DOM对象,则全部设置,如果是获取操作,则只获取第一个元素的innerHTML
     * 
     * @param {需要设置的内容} html 
     */
    obj.html = function(html){
        
        // 判断 是否传递参数
        if(arguments.length >= 1){
            for(var i = 0; i< this.length ; i++){
                this[i].innerHTML = html;
            }
            return this;
        }else{
            // 无参是获取
            return this[0].innerHTML;
        }
    }
    return obj;
}

4.1.2 使用方式

<!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 src="./common.js"></script>
    <script>
        window.onload = function () {
            // var btn = $("#btn")
            // 没有新增css函数之前
            // console.log($("#txt").style);
            // console.log($("#txt").css());
            // $("#txt").css();

            var ps = $(".t");
            // for(var i = 0 ; i < ps.length; i++){
            //     ps[i].style.color="red";
            // }
            // ps.css('pink');

            /**
             *  新增css函数之后
             */
            var txt = $("#txt");
            // txt.css('color','red');
            // txt.css('fontSize','20px');
            // txt.css('backgroundColor','green');
            // txt.css('height','200px');

            /**
             * css函数return this之后 可以链式调用
             */
            // 插件
            // txt.css('color', 'red').css('fontSize', '20px').css('backgroundColor', 'green').css('height', '200px');

            /**
             * 修改css函数,一次设置多个样式,需要传入对象 属性:值....
             */
            txt.css({
                color: 'red',
                fontSize: '20px',
                backgroundColor: 'yellow',
                height: '200px',
                width: '200px',
                margin: 'auto'
            });
            // 通过上面测试,方便了很多,但是设置单个属性和值的时候,也需要编写一个对象
            var btn = $("#btn");
            //    btn.css({
            //        color:'red'
            //     });

            /**
             *  优化css,使 设置单个属性 可以这样写 $('xxx').css('color','red');
             * 并且也可以设置多个, $("xxx").css({ color:'red',fontSize:'20px' });
             */
            // 设置多个
            txt.css({
                color: 'red',
                fontSize: '20px',
                backgroundColor: 'yellow',
                height: '200px',
                width: '200px',
                margin: 'auto'
            });
            // 设置单个
            txt.css('color','green');
            txt.css({
                color:'pink'
            });
            // 获取属性值
            console.log(txt.css('color'));
            console.log(txt.css('width'));

        }
    </script>
</head>

<body>
    <button id='btn'>变色</button>
    <p id='txt'>我是段落</p>

    <p class="t">1</p>
    <p class="t">2</p>
    <p class="t">3</p>
    <p class="t">4</p>
    <p class="t">5</p>
</body>

</html>

5. innerText

在这里插入图片描述
可以获取和设置标签中的内容

<!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 src="./common.js"></script>
    <script>
        window.onload = function () {
            var txt = $("#txt")[0];
            // 获取标签中  的文本,不含子标签,但是含子标签中的内容
            // 我是段落 学习学习
            console.log(txt.innerText);

            // 设置P标签中 的文本内容,如果内容中含有标签,则不会被解析
            // txt.innerText = '<span>xxx</span>';

      
        }
    </script>
</head>

<body>
    <p id="txt">我是段落 <span>学习学习</span></p>
</body>

</html>

在这里插入图片描述

与之相似的有一个innerHTML

 // 获取标签中  的文本,含子标签
// 我是段落 <span>学习学习</span>
console.log(txt.innerHTML);

// 设置p标签中的内容,如果内容中含有子标签,会被解析
txt.innerHTML='2222<span>哈哈</span>'

在这里插入图片描述
在这里插入图片描述

6. 扩展-text和html函数

 /**
     * 封装innerHTML属性,该方法,无参是获取,有参是设置
     * 
     * 如果obj中有多个DOM对象,则全部设置,如果是获取操作,则只获取第一个元素的innerHTML
     * 
     * @param {需要设置的内容} html 
     */
    obj.html = function(html){
        
        // 判断 是否传递参数
        if(arguments.length >= 1){
            for(var i = 0; i< this.length ; i++){
                this[i].innerHTML = html;
            }
            return this;
        }else{
            // 无参是获取
            return this[0].innerHTML;
        }
    }
    return obj;
相关推荐
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页