【Javascript —— DOM】

Rita_zzf

已于 2022-05-28 13:26:02 修改

阅读量314

点赞数 2

分类专栏： Javascript 基础文章标签： javascript 前端开发语言

于 2022-05-22 10:09:05 首次发布

本文链接：https://blog.csdn.net/Rita_zf/article/details/124907250

版权

Javascript 基础专栏收录该内容

3 篇文章 0 订阅

订阅专栏

javascript DOM

DOM简介

文档对象模型（Document Object Model，简称DOM）

DOM是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(目前,HTML和XML文档是通过说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面。DOM是一种基于树的API文档，它要求在处理过程中整个文档都表示在存储器中。另外一种简单的API是基于事件的SAX，它可以用于处理很大的XML文档，由于大，所以不适合全部放在存储器中处理。

DOM树结构

在这里插入图片描述

文档:一个页面就是一个文档,DOM中使用document表示
元素:页面中所有的标签都是元素,DOM中使用element表示
节点:网页中所有内容的位置都是节点,DOM中使用node表示

获取DOM页面元素

getElementByld

根据id获取

<!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>传统方式获取DOM</title>
</head>

<body>
    <div id="family">
        <div class="father">
            爸爸
            <div class="son">儿子</div>
        </div>
    </div>
    <div id="b">我是div</div>
    <span>我是span</span>
    <ul>
        <li name="date-list" class="item-list">东</li>
        <li name="date-list" class="item-list">西</li>
        <li name="date-list" class="item-list">南</li>
        <li name="date-list" class="item-list">北</li>
    </ul>
    <input type="text" name="account" id="" value="admin">
    <input type="password" name="password" id="" value="admin">
</body>

</html>
<script>
    let family = document.getElementById('family');
    console.log(family);
</script>

在这里插入图片描述

getElementsByClassName

根据css类选择器获取

<!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>传统方式获取DOM</title>
</head>

<body>
    <div id="family">
        <div class="father">
            爸爸
            <div class="son">儿子</div>
        </div>
    </div>
    <div id="b">我是div</div>
    <span>我是span</span>
    <ul>
        <li name="date-list" class="item-list">东</li>
        <li name="date-list" class="item-list">西</li>
        <li name="date-list" class="item-list">南</li>
        <li name="date-list" class="item-list">北</li>
    </ul>
    <input type="text" name="account" id="" value="admin">
    <input type="password" name="password" id="" value="admin">
</body>

</html>
<script>
    let family = document.getElementById('family');
    console.log(family);
    let item_list = document.getElementsByClassName('item-list');
    console.log(item_list);
    // object
    console.log(typeof(item_list));
    for (const li of item_list) {
        console.log(li);
    }
</script>

在这里插入图片描述

getElementsByTagName

根据标签名获取

<!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>传统方式获取DOM</title>
</head>

<body>
    <div id="family">
        <div class="father">
            爸爸
            <div class="son">儿子</div>
        </div>
    </div>
    <div id="b">我是div</div>
    <span>我是span</span>
    <ul>
        <li name="date-list" class="item-list">东</li>
        <li name="date-list" class="item-list">西</li>
        <li name="date-list" class="item-list">南</li>
        <li name="date-list" class="item-list">北</li>
    </ul>
    <input type="text" name="account" id="" value="admin">
    <input type="password" name="password" id="" value="admin">
</body>

</html>
<script>
    let family = document.getElementById('family');
    console.log(family);
    let item_list = document.getElementsByClassName('item-list');
    console.log(item_list);
    console.log(typeof(item_list));
    for (const li of item_list) {
        console.log(li);
    }
    let lis = document.getElementsByTagName('li');
    console.log(lis); 
    for (const li of lis) {
        console.log(li);
    }
</script>

在这里插入图片描述

getElementsByTagName

根据属性名name获取

<!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>传统方式获取DOM</title>
</head>

<body>
    <div id="family">
        <div class="father">
            爸爸
            <div class="son">儿子</div>
        </div>
    </div>
    <div id="b">我是div</div>
    <span>我是span</span>
    <ul>
        <li name="date-list" class="item-list">东</li>
        <li name="date-list" class="item-list">西</li>
        <li name="date-list" class="item-list">南</li>
        <li name="date-list" class="item-list">北</li>
    </ul>
    <input type="text" name="account" id="account" value="admin">
    <input type="password" name="password" id="password" value="admin">
</body>

</html>
<script>
    // 根据id获取页面元素
    let family = document.getElementById('family');
    console.log(family);
    // 根据css类选择器 获取页面元素
    // HTMLCollection 
    let item_list = document.getElementsByClassName('item-list');
    console.log(item_list);
    // object 对象
    console.log(typeof(item_list));
    for (const li of item_list) {
        console.log(li);
    }
    // 根据标签名获取页面元素
    // HTMLCollection
    let lis = document.getElementsByTagName('li');
    console.log(lis); 
    for (const li of lis) {
        console.log(li);
    }
    // 根据属性name获取页面节点
    // NodeList 
    let date_list = document.getElementsByName('date-list');
    console.log(date_list);
    date_list.forEach(element => {
        console.log(element);
    });
</script>

在这里插入图片描述

querySelector

<!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>ES6获取DOM</title>
</head>
<body>
    <div id="family">
        <div class="father">
            爸爸
            <div class="son">儿子</div>
        </div>
    </div>
    <div id="b">我是div</div>
    <span>我是span</span>
    <ul>
        <li name="date-list" class="item-list">东</li>
        <li name="date-list" class="item-list">西</li>
        <li name="date-list" class="item-list">南</li>
        <li name="date-list" class="item-list">北</li>
    </ul>
    <input type="text" name="account" id="account" value="admin">
    <input type="password" name="password" id="password" value="admin">
</body>
</html>
<script>
    // 根据id获取
    let family = document.querySelector('#family');
    console.log(family);
</script>

在这里插入图片描述

querySelectorAll

<!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>ES6获取DOM</title>
</head>
<body>
    <div id="family">
        <div class="father">
            爸爸
            <div class="son">儿子</div>
        </div>
    </div>
    <div id="b">我是div</div>
    <span>我是span</span>
    <ul>
        <li name="date-list" class="item-list">东</li>
        <li name="date-list" class="item-list">西</li>
        <li name="date-list" class="item-list">南</li>
        <li name="date-list" class="item-list">北</li>
    </ul>
    <input type="text" name="account" id="account" value="admin">
    <input type="password" name="password" id="password" value="admin">
</body>
</html>
<script>
    // 根据id获取
    let family = document.querySelector('#family');
    console.log(family);
    // 根据css类选择器 获取
    // NodeList 节点列表
    let item_list = document.querySelectorAll('.item-list');
    console.log(item_list);
    // console.log(item_list[0]);
    item_list.forEach(li => {
        console.log(li);
    });
    // 根据属性名获取
    // NodeList 节点列表
    console.log(document.querySelectorAll('[name]'));
    console.log(document.querySelectorAll('input[name]'));
    
    console.log(document.querySelector('input[name=account]'));
    console.log(document.querySelector('input[name=password]'));
    
    let date_list = document.querySelectorAll('[name=date-list]');
    console.log(date_list);
    date_list.forEach(li => {
        console.log(li);
    });
    // 根据标签名获取
    // NodeList 节点列表
    let lis = document.querySelectorAll('li');
    console.log(lis); 
    lis.forEach(li => {
        console.log(li);
    });
    
</script>

在这里插入图片描述

DOM关系

parentNode与parentElement

parentNode跟parentElement除了前者是w3c标准，后者只ie支持
当父节点的nodeType不是1，既不是element节点的话，它的parentElement就会是null
一般情况parentNode可以取代parentElement的所有功能
parentElement匹配的是parent为element的情况，而parentNode匹配的则是parent为node的情况， element是包含在node里的，它的nodeType是1

<!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>DOM关系</title>
</head>
<body>
    <div id="family">
        <div class="father">
            爸爸
            <div class="son">儿子</div>
        </div>
    </div>
    <div id="b">我是div</div><!-- 我爱你中国亲爱的母亲 -->
    <span>我是span</span>
    <ul>
        <li name="date-list" class="item-list">东</li>
        <li name="date-list" class="item-list">西</li>
        <li name="date-list" class="item-list">南</li>
        <li name="date-list" class="item-list">北</li>
    </ul>
    <input type="text" name="account" id="account" value="admin">
    <input type="password" name="password" id="password" value="admin">
</body>
</html>
<script>
    let son = document.querySelector('.son');
    console.log(son);
    // 返回元素的父节点
    console.log(son.parentNode);
    // 返回元素的父元素
    // parentElement 只支持IE浏览器
    console.log(son.parentElement);
</script>

在这里插入图片描述

childNodes与children

childNodes 返回元素的一个子节点的数组( NodeList) 包含文本节点和注释节点
children 返回元素的子元素的集合(HTMLCollection)

<!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>DOM关系</title>
</head>
<body>
    <div id="family">
        <div class="father">
            爸爸
            <div class="son">儿子</div>
        </div>
    </div>
    <div id="b">我是div</div><!-- 我爱你中国亲爱的母亲 -->
    <span>我是span</span>
    <ul>
        <li name="date-list" class="item-list">东</li>
        <li name="date-list" class="item-list">西</li>
        <li name="date-list" class="item-list">南</li>
        <li name="date-list" class="item-list">北</li>
    </ul>
    <input type="text" name="account" id="account" value="admin">
    <input type="password" name="password" id="password" value="admin">
</body>
</html>
<script>
    let family = document.querySelector('#family');
    // NodeList 返回元素的一个子节点的数组 包含文本节点和注释节点
    console.log(family.childNodes);
    // HTMLCollection 返回元素的子元素的集合
    console.log(family.children);

    let ul = document.querySelector('ul')
    let lis = ul.children;
    for (const li of lis) {
        console.log(li.innerText);
    }
</script>

在这里插入图片描述

firstElementChild与lastElementChild

<!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>DOM关系</title>
</head>
<body>
    <div id="family">
        <div class="father">
            爸爸
            <div class="son">儿子</div>
        </div>
    </div>
    <div id="b">我是div</div><!-- 我爱你中国亲爱的母亲 -->
    <span>我是span</span>
    <ul>
        <li name="date-list" class="item-list">东</li>
        <li name="date-list" class="item-list">西</li>
        <li name="date-list" class="item-list">南</li>
        <li name="date-list" class="item-list">北</li>
    </ul>
   <input type="text" name="account" id="account" value="admin">
    <input type="password" name="password" id="password" value="admin">
</body>
</html>
<script>
	let ul = document.querySelector('ul')
    let lis = ul.children;
    for (const li of lis) {
        console.log(li.innerText);
    }
    // 获取ul标签第一个子元素的文本内容
    console.log(ul.firstElementChild);
    console.log(ul.firstElementChild.innerText);
    console.log(ul.firstChild);
    console.log('+++++++++++++++');
    // 获取ul标签最后一个子元素的文本内容
    console.log(ul.lastElementChild);
    console.log(ul.lastElementChild.innerText);
    console.log(ul.lastChild);
    console.log('+++++++++++++++');
</script>

在这里插入图片描述

nextSibling与 nextElementSibling

nextSibling 属性与 nextElementSibling 属性的差别：
nextSibling 属性返回元素节点之后的兄弟节点（包括文本节点、注释节点）；
nextElementSibling 属性只返回元素节点之后的兄弟元素节点（不包括文本节点、注释节点）；
nextElementSibling 属性为只读属性
nextElementSibling 属性返回指定元素之后的下一个兄弟元素（相同节点树层中的下一个元素节点）。

<!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>DOM关系</title>
</head>
<body>
    <div id="family">
        <div class="father">
            爸爸
            <div class="son">儿子</div>
        </div>
    </div>
    <div id="b">我是div</div><!-- 我爱你中国亲爱的母亲 -->
    <span>我是span</span>
    <ul>
        <li name="date-list" class="item-list">东</li>
        <li name="date-list" class="item-list">西</li>
        <li name="date-list" class="item-list">南</li>
        <li name="date-list" class="item-list">北</li>
    </ul>
    <input type="text" name="account" id="account" value="admin">
    <input type="password" name="password" id="password" value="admin">
</body>
</html>
<script>
    let b = document.querySelector('#b');
    // 返回某个元素之后紧跟的节点
    console.log(b.nextSibling);
    // 返回下一个 HTML 内容
    console.log(b.nextElementSibling);
</script>

在这里插入图片描述

innerText与innerHtml

innerText 原样输出字符串
innerHTML 内容标签输出

<!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>innerText与innerHtml</title>
</head>

<body>
    <p id="bilibili_text"></p>
    <p id="bilibili_html"></p>
    <p id="csdn_text"></p>
    <p id="csdn_html"></p>

</body>

</html>
<script>
    let bilibili_text = document.querySelector('#bilibili_text');
    let bilibili_html = document.querySelector('#bilibili_html');
    let csdn_text = document.querySelector('#csdn_text');
    let csdn_html = document.querySelector('#csdn_html');
    // 页面显示
    bilibili_text.innerText = '<a href="https://www.bilibili.com/">bilibili</a>';
    bilibili_html.innerHTML = '<a href="https://www.bilibili.com/">bilibili</a>';
    csdn_text.innerText = '<a href="https://www.csdn.net/">csdn</a>';
    csdn_html.innerHTML = '<a href="https://www.csdn.net/">csdn</a>';
    // 页面获取
    console.log(bilibili_text);
    console.log(bilibili_html);
    console.log(csdn_text);
    console.log(csdn_html);
</script>

在这里插入图片描述

动态创建添加节点

创建添加节点

createElement 创建节点

<!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>
</head>
<body>
    <ul>
        <li>张三</li>
    </ul>
</body>
</html>
<script>
    // 创建元素节点
    let li = document.createElement('li');
    // 编写准备向节点中添加内容
    li.innerText = '李四';
    // 添加节点 找到添加的位置
    let ul = document.querySelector('ul')
    ul.appendChild(li);
</script>

在这里插入图片描述

创建指定位置添加节点

insertBefore 插入到某节点之前

<!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>
</head>
<body>
    <ul>
        <li>张三</li>
    </ul>
</body>
</html>
<script>
    // 创建元素节点
    let li = document.createElement('li');
    // 编写准备向节点中添加内容
    li.innerText = '李四';
    // 添加节点 找到添加的位置
    let ul = document.querySelector('ul')
    ul.appendChild(li);
    // 创建元素节点
    let love = document.createElement('li');
    // 编写准备向节点中添加内容
    love.innerText = '小王';
    // 添加节点 找到添加的位置
    console.log(ul.children[0].innerText);
    ul.insertBefore(love,ul.children[1]);
</script>

在这里插入图片描述

创建元素的方式动态创建表格

<!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>创建元素方式动态创建表格</title>
</head>

<body>
    <table align="center" cellspacing="0" cellpadding="0" border="1px" width="300px">
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
            </tr>
        </thead>
        <tbody id="content"></tbody>
    </table>
</body>

</html>
<script>
    let data = [{
        name: '张三',
        gender: 1
    }, {
        name: '李四',
        gender: 1
    }, {
        name: '小王',
        gender: 0
    }, {
        name: '小罗',
        gender: 0
    }];
    // 获取页面元素 
    let content = document.querySelector('#content');
    data.forEach(person => {
        // 创建元素
        let tr = document.createElement('tr');
        // 编写元素内容
        for (const fieldName in person) {
            let td = document.createElement('td');
            if ('gender' == fieldName) {
                td.innerText = person[fieldName] == 1 ? '男' : '女';
            } else {
                td.innerText = person[fieldName];
            }
            tr.appendChild(td);
        };
        // 将新元素添加到页面
        content.appendChild(tr);
    });
</script>

![在这里插入图片描述](https://img-blog.csdnimg.cn/373cc7131

字符串拼接方式动态创建表格

<!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>字符串拼接方式动态创建表格</title>
</head>

<body>
    <table align="center" cellspacing="0" cellpadding="0" border="1px" width="300px">
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
            </tr>
        </thead>
        <tbody id="content"></tbody>
    </table>
</body>

</html>
<script>
    let data = [{
        name: '张三',
        gender: 1
    }, {
        name: '李四',
        gender: 1
    }, {
        name: '小王',
        gender: 0
    }, {
        name: '小罗',
        gender: 0
    }];
    // 获取页面元素 
    let content = document.querySelector('#content');
    let html = '';
    data.forEach(person => {
        html += '<tr><td>' + person.name + '</td><td>' + (person.gender == 1 ? '男' : '女') + '</td></tr>';
    });
    content.innerHTML = html;
</script>

在这里插入图片描述

字符串模板的方式动态创建表格

<!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>字符串模板的方式动态创建表格</title>
</head>

<body>
    <table align="center" cellspacing="0" cellpadding="0" border="1px" width="300px">
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
            </tr>
        </thead>
        <tbody id="content"></tbody>
    </table>
</body>

</html>
<script>
    let data = [{
        name: '张三',
        gender: 1
    }, {
        name: '李四',
        gender: 1
    }, {
        name: '小王',
        gender: 0
    }, {
        name: '小罗',
        gender: 0
    }];
    // 获取页面元素 
    let content = document.querySelector('#content');
    let html = '';
    data.forEach(person => {
        html += `<tr><td>${person.name}</td><td>${person.gender == 1 ? '男' : '女'}</td></tr>`;
    });
    content.innerHTML = html;
</script>

在这里插入图片描述

数组字符串拼接方式动态创建表格

<!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>数组字符串拼接方式动态创建表格</title>
</head>

<body>
    <table align="center" cellspacing="0" cellpadding="0" border="1px" width="300px">
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
            </tr>
        </thead>
        <tbody id="content"></tbody>
    </table>
</body>

</html>
<script>
    let data = [{
        name: '张三',
        gender: 1
    }, {
        name: '李四',
        gender: 1
    }, {
        name: '小王',
        gender: 0
    }, {
        name: '小罗',
        gender: 0
    }];
    // 获取页面元素 
    let content = document.querySelector('#content');
    let array = new Array;
    data.forEach(person => {
       array.push('<tr><td>' + person.name + '</td><td>' + (person.gender == 1 ? '男' : '女') + '</td></tr>');
    });
    content.innerHTML = array.join('');
</script>

在这里插入图片描述

数组字符串模板方式动态创建表格

<!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>数组字符串模板方式动态创建表格</title>
</head>

<body>
    <table align="center" cellspacing="0" cellpadding="0" border="1px" width="300px">
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
            </tr>
        </thead>
        <tbody id="content"></tbody>
    </table>
</body>

</html>
<script>
    let data = [{
        name: '张三',
        gender: 1
    }, {
        name: '李四',
        gender: 1
    }, {
        name: '小王',
        gender: 0
    }, {
        name: '小罗',
        gender: 0
    }];
    // 获取页面元素 
    let content = document.querySelector('#content');
    let array = new Array;
    data.forEach(person => {
       array.push(`<tr><td>${person.name}</td><td>${person.gender == 1 ? '男' : '女'}</td></tr>`);
    });
    // content.innerHTML = html;
    content.innerHTML = array.join('');
</script>

在这里插入图片描述

性能比较

字符串拼接性能

<!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>字符串拼接性能</title>
    <style>
        div{
            width: 100px;
            height: 2px;
            border: 1px solid #0f0;
        }
    </style>
</head>

<body>
</body>

</html>
<script>
    let html = '';
    let startTime = new Date().getTime();
    for (let index = 0; index < 500000; index++) {
        html += '<div></div>';
    }
    document.body.innerHTML = html;
    let stopTime = new Date().getTime();
    console.log(stopTime - startTime);
</script>

在这里插入图片描述

字符串模板性能

<!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>字符串模板性能</title>
    <style>
        div{
            width: 100px;
            height: 2px;
            border: 1px solid #0f0;
        }
    </style>
</head>

<body>
</body>

</html>
<script>
    let html = '';
    let startTime = new Date().getTime();
    for (let index = 0; index < 500000; index++) {
        html += `<div></div>`;
    }
    document.body.innerHTML = html;
    let stopTime = new Date().getTime();
    console.log(stopTime - startTime);
</script>

在这里插入图片描述

数组字符串拼接性能

<!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>数组字符串拼接性能</title>
    <style>
        div{
            width: 100px;
            height: 2px;
            border: 1px solid #0f0;
        }
    </style>
</head>

<body>
</body>

</html>
<script>
    let array = new Array();
    let startTime = new Date().getTime();
    for (let index = 0; index < 500000; index++) {
        array.push('<div></div>');
    }
    document.body.innerHTML = array.join('');
    let stopTime = new Date().getTime();
    console.log(stopTime - startTime);
</script>

在这里插入图片描述

数组字符串模板性能

<!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>数组字符串模板性能</title>
    <style>
        div{
            width: 100px;
            height: 2px;
            border: 1px solid #0f0;
        }
    </style>
</head>

<body>
</body>

</html>
<script>
    let array = new Array();
    let startTime = new Date().getTime();
    for (let index = 0; index < 500000; index++) {
        array.push(`<div></div>`);
    }
    document.body.innerHTML = array.join('');
    let stopTime = new Date().getTime();
    console.log(stopTime - startTime);
</script>

在这里插入图片描述

创建元素性能

<!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>创建元素性能</title>
    <style>
        div{
            width: 100px;
            height: 2px;
            border: 1px solid #0f0;
        }
    </style>
</head>

<body>
</body>

</html>
<script>
    let startTime = new Date().getTime();
    for (let index = 0; index < 500000; index++) {
       document.body.appendChild(document.createElement('div'));
    }
    let stopTime = new Date().getTime();
    console.log(stopTime - startTime);
</script>

在这里插入图片描述

事件

事件属性

<!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>事件属性</title>
</head>
<body>
    <button ondblclick="slgan()">双击</button>
</body>
</html>
<script>
    function slgan(params) {
        alert('桃李不言下自成蹊');
    }
</script>

在这里插入图片描述

void

<!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>void</title>
</head>

<body>
    <a href="https://www.bilibili.com/">bilibili</a>
    <a href="https://www.csdn.net/">csdn</a>
    <a href="javascript:{alert('桃李不言下自成蹊')}"></a>
    <a href="javascript:slogan()">slogan</a>
    <a href="javascript:void(0)"></a>
</body>

</html>
<script>
    function slogan(params) {
        alert('桃李不言下自成蹊');
    }
    if (0) {
        alert(0);
    } else {
        alert(1);
    }
</script>

在这里插入图片描述

事件监听

addEventListener 添加事件监听

<!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>事件监听</title>
</head>
<body>
    <script>
        function fun() {
            alert('我爱你中国');
        }
    </script>
    <button onclick="fun()">单击</button>
    <button id="btn01">事件注册</button>
    <button id="btn02">事件监听</button>
    <button id="btn02">事件解绑</button>
    <span id="content" style="display: none;">span</span>
</body>
</html>
<script>
    // 获取页面按钮
    let btn01 = document.querySelector('#btn01');
    let btn02 = document.querySelector('#btn02');
    let btn03 = document.querySelector('#btn03');
    btn01.onclick = function (params) {
        alert(btn01.innerText);
    }
    btn02.addEventListener('click',function (params) {
        alert(btn02.innerText);
    });

</script>

在这里插入图片描述

事件的绑定与解绑

事件注册不能绑定多个函数
removeEventListener 事件解绑
addEventListener 事件绑定

<!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>事件绑定与解绑</title>
</head>
<body>
    <script>
        function fun() {
            alert('我爱你中国');
        }
    </script>
    <button onclick="fun()">单击</button>
    <button id="btn01">事件注册</button>
    <button id="btn02">事件监听</button>
    <button id="btn03">事件绑定与解绑</button>
    <span id="content" style="display: none;"></span>
</body>
</html>
<script>
    // 获取页面按钮
    let btn01 = document.querySelector('#btn01');
    let btn02 = document.querySelector('#btn02');
    let btn03 = document.querySelector('#btn03');
    btn01.onclick = function (params) {
        alert(btn01.innerText);
    }
    btn01.onclick = function (params) {
        alert(btn02.innerText);
    } 
    // addEventListener 添加事件监听
    btn02.addEventListener('click',function (params) {
        alert(btn02.innerText);
    });
    btn02.addEventListener('click',function (params) {
        alert(btn01.innerText);
    });
    btn02.addEventListener('click',function (params) {
        show01();
        // 事件解绑
        btn02.removeEventListener('click',show02);
    });
    btn02.addEventListener('click',show02);
    // 立即执行
    // btn03.addEventListener('click',show());
    // 此处调用函数不加括号
    btn03.addEventListener('click',show);
    function show(params) {
        let content = document.querySelector('#content');
        content.append(btn01.innerText);
        content.style.display = 'block';
    }
    function show01(params) {
        let content = document.querySelector('#content');
        content.append(btn01.innerText);
        content.style.display = 'block';
    }
    function show02(params) {
        let content = document.querySelector('#content');
        content.append(btn02.innerText);
        content.style.display = 'block';
    }  
    
</script>

在这里插入图片描述

事件冒泡

<!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>事件冒泡</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #out_box {
            width: 450px;
            height: 450px;
            background-color: rgb(7, 100, 16);
            text-align: center;
            position: absolute;
            top: 100px;
            left: 100px;
        }

        #inner_box {
            width: 300px;
            height: 300px;
            background-color: rgb(222, 5, 84);
            line-height: 75px;
            text-align: center;
            position: absolute;
            top: 75px;
            left: 75px;
        }
    </style>
</head>

<body>
    <div id="out_box">
        <div id="inner_box">盒子</div>
    </div>
</body>

</html>
<script>
    let out_box = document.querySelector('#out_box');
    out_box.addEventListener('click',function (params) {
        alert('out_box');
    });
    let inner_box = document.querySelector('#inner_box');
    inner_box.addEventListener('click',function (params) {
        alert('inner_box');
    });
</script>

点击绿色区域
在这里插入图片描述
点击红色区域显示两次

事件流

1、Javascript 代码中默认只能执行捕获或冒泡其中一个阶段
2、onclick 和 attachEvent(ie) 只能得到冒泡阶段
3、捕获阶段如果 addEventListener 第三个参数为 true 那么进入捕获阶段
4、冒泡阶段如果 addEventListener 第三个参数为 false 那么进入冒泡阶段

<!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>事件流</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #out_box {
            width: 450px;
            height: 450px;
            background-color: rgb(7, 100, 16);
            text-align: center;
            position: absolute;
            top: 100px;
            left: 100px;
        }

        #inner_box {
            width: 300px;
            height: 300px;
            background-color: rgb(222, 5, 84);
            line-height: 75px;
            text-align: center;
            position: absolute;
            top: 75px;
            left: 75px;
        }
    </style>
</head>
<body>
    <div id="out_box">
        <div id="inner_box">盒子</div>
    </div>
</body>
</html>
<script>
    let out_box = document.querySelector('#out_box');
    out_box.addEventListener('click',function (params) {
        alert('out_box捕获');
    },true);
    out_box.addEventListener('click',function (params) {
        alert('out_box冒泡');
    },false);
    let inner_box = document.querySelector('#inner_box');
    inner_box.addEventListener('click',function (params) {
        alert('inner_box捕获');
    },true);
    inner_box.addEventListener('click',function (params) {
        alert('inner_box冒泡');
    },false);
</script>

事件对象

1、even 就是一个事件对象写到我们监听函数的小括号里面当参数来看
2、事件对象只有事件触发才会存在他是系统给我们自动创建的不需要我们传递参数
3、事件对象是我们事件的一系列相关数据的集合跟事件相关
4、事件对象作为参数可以自己命名比如：even ent e
5、事件对象存在兼容问题 ie6、7、8 通过window.even 兼容性写法

<!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>事件对象</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            margin: 0 auto;
            width: 300px;
            height: 300px;
            text-align: center;
            line-height: 300px;
            background-color: blue;
            font-size: 36px;
        }
    </style>
</head>
<body>
    <div id="box">盒子</div>
</body>
</html>
<script>
    let box = document.querySelector('#box');
    box.addEventListener('click',function (e) {
        console.log(e);
    });

</script>

在这里插入图片描述

阻止事件默认行为的两种方式

javascript:void(0) 含义

我们经常会使用到 javascript:void(0) 这样的代码，那么在 JavaScript 中 javascript:void(0) 代表的是什么意思呢？

javascript:void(0) 中最关键的是 void 关键字， void 是 JavaScript 中非常重要的关键字，该操作符指定要计算一个表达式但是不返回值。

语法格式如下：

void func()
javascript:void func()

或者

void(func())
javascript:void(func())

下面的代码创建了两个超级链接，当用户点击以后不会发生页面跳转。

<!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>阻止事件默认行为</title>
</head>

<body>
    <a id="bilibili" href="https://www.bilibili.com/">bilibili</a>
    <a id="csdn" href="https://www.csdn.net/">csdn</a>
</body>

</html>
<script>
    // 方式一：
    let bilibili = document.querySelector('#bilibili');
    bilibili.addEventListener('click',function (e) {
        // DOM 标准写法
        e.preventDefault();
    });
    // 方式二：
    let csdn = document.querySelector('#csdn');
    csdn.addEventListener('click',function (e) {
        // returnValue 返回值
        e.returnValue = false;
        // return false 用于表单
    });
</script>

阻止表单默认提交五种方式

1、οnsubmit=“return false”
2、e.preventDefault()
3、e.returnValue = false
4、return false

<!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>阻止表单默认提交</title>
    <style>
        .hide{
            display: none;
        }
    </style>
</head>

<body>
    <!-- 方法一 -->
    <!-- <form action="https://passport.csdn.net/v1/register/pc/login/doLogin" method="post" οnsubmit="return false"> -->
    <form action="https://passport.csdn.net/v1/register/pc/login/doLogin" method="post">
        <input type="text" name="userIdentification" value="15311484568" placeholder="手机号/邮箱/用户名" type="text">
        <input type="password" name="pwdOrVerifyCode" value="" placeholder="密码">
        <input class="hide" type="text" name="loginType" value="1">
        <input class="hide" type="text" name="uaToken" value="">
        <input class="hide" type="text" name="webUmidToken" value="">
        <input type="submit" value="登录">
    </form>
</body>

</html>
<script>
    let submit = document.querySelector('input[type=submit]');
    // 方法二
    submit.onclick = function (e) {
        return false;
    }
    // 方法三
    submit.addEventListener('click',function (e) {
        e.preventDefault();
    });
    // 方法四
    submit.addEventListener('click',function (e) {
        e.returnValue = false;
    });
    // 方法五
    submit.addEventListener('click',function (e) {
        e.preventDefault();
        e.returnValue = false;
    });
</script>

操作css

<!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>操作css</title>
    <style>
        div {
            margin: 0;
            padding: 0;
            width: 300px;
            height: 300px;
            text-align: center;
            line-height: 300px;
            border-width: 3px;
            border-style: solid;
            font-size: 30px;
            background-color: #eaf0def3;
        }
        #box01 {
            border-color: #d838c2;
        }
        #box02 {
            border-color: #8ae058;
        }
        .enter {
            font-size: 60px;
            background-color: #d838c2;
        }
        .leave {
            font-size: 30px;
            background-color: #eaf0def3;
        }
    </style>
</head>

<body>
    <div id="box01">
        张三
    </div>
    <div id="box02" class="default a b c">
        李四
    </div>
</body>

</html>
<script>
    let box02box01 = document.querySelector('#box01');
    box01.addEventListener('mouseenter', function name(params) {
        this.style.fontSize = '60px';
        this.style.backgroundColor = '#8ae058';
    });
    box01.addEventListener('mouseleave', function name(params) {
        this.style.fontSize = '30px';
        this.style.backgroundColor = '#eaf0def3';
    });
    let box02 = document.querySelector('#box02');
    box02.addEventListener('mouseenter', function name(params) {
        // this.className = 'enter';
        // DOMTokenList 
        let classList = this.classList;
        // console.log(classList);
        classList.remove('leave');
        classList.add('enter');
    });
    box02.addEventListener('mouseleave', function name(params) {
        // this.className = 'leave';
        let classList = this.classList;
        // console.log(classList);
        classList.remove('enter');
        // classList.add('leave');
    });
</script>

在这里插入图片描述

mouseover与mouseout

mouseover：当鼠标移入某元素时触发，移入和移出其子元素时也会触发。
mouseout：当鼠标移出某元素时触发，移入和移出其子元素时也会触发。
mousemove：鼠标在某元素上移动时触发，即使在其子元素上也会触发。

<!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>mouseover与mouseout</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #out_box {
            width: 450px;
            height: 450px;
            background-color: #929854;
            text-align: center;
            position: absolute;
            top: 100px;
            left: 100px;
        }
        #inner_box {
            width: 300px;
            height: 300px;
            background-color: #4365c3;
            line-height: 75px;
            position: absolute;
            left: 75px;
            top: 75px;
        }
    </style>
</head>
<body>
    <div id="out_box">
        <div id="inner_box">盒子</div>
    </div>
</body>
</html>
<script>
    let out = document.querySelector('#out_box')；
    out.addEventListener('mouseover',function (e) {
        console.log('mouseover 进入 out_box');
    });
    out.addEventListener('mouseout',function (e) {
        console.log('mouseout 离开 out_box');
    });
</script>

在这里插入图片描述

mouseenter与 mouseleave

mouseenter：当鼠标移入某元素时触发。
mouseleave：当鼠标移出某元素时触发。
mouseout、mouseover和mouseleave、mouseenter最大的区别，在于子元素连带触发。

<!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>mouseenter与mouseleave</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #out_box {
            width: 450px;
            height: 450px;
            background-color: #929854;
            text-align: center;
            position: absolute;
            top: 100px;
            left: 100px;
        }
        #inner_box {
            width: 300px;
            height: 300px;
            background-color: #4365c3;
            line-height: 75px;
            position: absolute;
            left: 75px;
            top: 75px;
        }
    </style>
</head>
<body>
    <div id="out_box">
        <div id="inner_box">盒子</div>
    </div>
</body>
</html>
<script>
    let out = document.querySelector('#out_box')；
    out.addEventListener('mouseenter',function (e) {
        console.log('mouseenter 进入 out_box');
    });
    out.addEventListener('mouseleave',function (e) {
        console.log('mouseleave 离开 out_box');
    });
</script>

在这里插入图片描述

事件委托与事件代理

<!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>事件委托与事件代理</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div{
            position: absolute;
            left: 300px;
            top: 100px;
        }
        ul>li {
            list-style: none;
            display: block;
            width: 300px;
            height: 30px;
            line-height: 30px;
            font-size: 16px;
            background-color: #fedeba;
        }

        .enter {
            width: 600px;
            height: 60px;
            line-height: 60px;
            font-size: 32px;
            background-color: #abcdef;
        }
    </style>
</head>

<body>
    <div>
        <ul id="u01">
            <li>张三</li>
            <li>李四</li>
        </ul>
        <ul id="u02">
            <li>小王</li>
            <li>小罗</li>
        </ul>
    </div>
</body>

</html>
<script>
    let u01 = document.querySelector('#u01');
    // console.log(u01.children);
    let lis = u01.children;
    for (const li of lis) {
        li.addEventListener('mouseenter', function (e) {
            // let classList = li.classList;
            let classList = this.classList;
            classList.add('enter');
        });
        li.addEventListener('mouseleave', function (e) {
            // let classList = li.classList;
            let classList = this.classList;
            classList.remove('enter');
        })
    }
    let u02 = document.querySelector('#u02');
    // 事件绑定者 与 事件触发者
    u02.addEventListener('click', function (e) {
        // this 事件绑定者
        console.log(this);
        // e 事件对象
        // console.log(e);
        // e.target 事件触发者
        console.log(e.target);
    });
    // ul 受 li 的委托
    // ul 是 li 的代理
    u02.addEventListener('mouseover', function (e) {
        let classList = e.target.classList;
        classList.add('enter');
    });
    u02.addEventListener('mouseout', function (e) {
        let classList = e.target.classList;
        classList.remove('enter');
    });
</script>

鼠标事件

一、clientX、clientY

鼠标位置距离当前body可视区域的x，y坐标
window.console.log(e.clientX + ’ >>> ’ + e.clientY);

二、pageX、pageY

对于整个页面来说，包括了被卷去的body部分的长度
window.console.log(e.pageX + ’ >>> ’ + e.pageY);

三、screenX、screenY

点击位置距离当前电脑屏幕的x，y坐标

四、offsetX、offsetY

相对于带有定位的父盒子的x，y坐标

<!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>鼠标事件</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            margin-top: 50px;
            margin-left: 100px;
            width: 300px;
            height: 300px;
            border: 3px solid #123456;
            text-align: center;
            line-height: 300px;
        }

        #angle {
            position: absolute;
            top: 360px;
            left: 200px;
        }
    </style>
</head>

<body>
    <div id="box01">桃李不言</div>
    <div id="box02">下自成蹊</div>
    <img id="angle" src="../head.png" alt="">
</body>

</html>
<script>
    let box01 = document.querySelector('#box01');
    box01.addEventListener('selectstart', function (e) {
        e.preventDefault();
    });
    let box02 = document.querySelector('#box02');
    box02.addEventListener('contextmenu', function (e) {
        e.preventDefault();
    });
    document.addEventListener('click',function (e) {
        let angle = document.querySelector('#angle');
        let x = e.pageX + 15;
        let y = e.pageY + 15;
        angle.style.left = `${x}px`;
        angle.style.top = `${y}px`;
        angle.style.transition = '2s';
    });
</script>

在这里插入图片描述

键盘事件

<!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>键盘事件</title>
    <style>
        span {
            display: none;
            color: red;
            font-size: 32px;
        }
        div {
            margin-bottom: 30px;
        }
    </style>
</head>

<body>
    <div>
        <input type="text" name="account" id="account" value="" placeholder="请输入账号" autocomplete="off">
        <span>账号不能为空</span>
    </div>
    <div>
        <input type="password" name="password" id="password" value="" placeholder="请输入密码">
        <span>密码不能为空</span>
    </div>
    <button id="submit">登录</button>
</body>

</html>
<script>
    let submit = document.querySelector('#submit');
    function commit() {
        let account = document.querySelector('#account');
        let password = document.querySelector('#password');
        if ('' == account.value.trim()) {
            let msg = account.nextElementSibling;
            msg.style.display = "block";
            account.focus();
        } else if ('' == password.value.trim()) {
            let msg = password.nextElementSibling;
            msg.style.display = "block";
            password.focus();
        } else {
            alert(`账号=${account.value.trim()}\n密码=${password.value.trim()}`);
        }
    }
    submit.addEventListener('click', commit);
    document.addEventListener('keyup', function (e) {
        if (e.keyCode == 13) {
            commit();
        }
    });
</script>

在这里插入图片描述

图片旋转

37 左
38 上
39 右
40 下

<!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>图片旋转</title>
    <style>
        div {
            margin-bottom: 30px;
        }
        #game {
            width: 300px;
            height: 300px;
            border: 1px solid #abcdef;
            position: absolute;
            top: 150px;
            left: 150px;
        }
        #angle {
            width: 30px;
            height: 30px;
            position: absolute;
            left: 0px;
            top: 0px;
        }
    </style>
</head>

<body>
    <div id="game"><img src="../head.png" alt="" id="angle"></div>
</body>

</html>
<script>
    submit.addEventListener('click', commit);
    document.addEventListener('keyup', function (e) {
        if (e.keyCode == 13) {
            commit();
        }
    });
    let pos = 30;
    let x = document.querySelector('#angle').offsetLeft;
    let y = document.querySelector('#angle').offsetTop;
    document.addEventListener('keydown', function (e) {       
        let angle = document.querySelector('#angle');
        switch (e.keyCode) {
            case 37:
                x -= pos;
                if (x < 0) {
                    alert('游戏结束');
                } else {
                    angle.style.left = x + "px";
                    angle.style.transform = 'rotate(180deg)';
                }
                break;
            case 38:
                y -= pos;
                if (y < 0) {
                    alert('游戏结束');
                } else {
                    angle.style.top = y + "px";
                    angle.style.transform = 'rotate(270deg)';
                }
                break;
            case 39:
                x += pos;
                if (x >= 300) {
                    alert('游戏结束');
                } else {
                    angle.style.left = x + "px";
                    angle.style.transform = 'rotate(0deg)';
                }
                break;
            case 40:
                y += pos;
                if (y >= 300) {
                    alert('游戏结束');
                } else {
                    angle.style.top = y + "px";
                    angle.style.transform = 'rotate(90deg)';
                }
                break;
            default:
                break;
        }
    });
</script>

在这里插入图片描述

操作属性

<!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>操作属性</title>
    <style>
        button {
            width: 300px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            font-size: 32px;
        }
        img {
            width: 600px;
            display: none;
        }
    </style>
</head>

<body>
    <button id="sw">状态切换</button>
    <button id="login">启用</button>
    <button id="love">切换图片</button>
    <br>
    <img src="" alt="">
</body>

</html>
<script>
    let login = document.querySelector('#login');
    login.addEventListener('click', function (e) {
        alert('桃李不言下自成蹊');
    });
    let sw = document.querySelector('#sw');
    sw.addEventListener('click', function (e) {
        // true 是启用
        // false 是禁用
        let isDisabled = login.disabled
        if (isDisabled) {
            login.removeAttribute('disabled');
            login.innerText = '启用';
        } else {
            login.setAttribute('disabled', true);
            login.innerText = '禁用';
        }
    });
    let love = document.querySelector('#love');
    love.addEventListener('click', function (e) {
        let img = document.querySelector('img');
        let lucky = Math.ceil(Math.random() * 4);
        img.setAttribute('src', `../img/${lucky}.jpg`);
        img.style.display = 'block';
    });
</script>

在这里插入图片描述

百度换肤

<!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>百度换肤</title>
    <style>
        ul>li{
            list-style: none;
        }
        .data_list{
            width: 300px;
        }
        ul{
            position: absolute;
            left: 0px;
            top: 0px;
        }
        div{
            width: 1024px;
            height: 786px;
            right: 0px;
            top: 0px;
            position: absolute;
            background-image: url(../img/1.jpg);
            background-size: 1024px auto;
            background-repeat: no-repeat;
        }
    </style>    
</head>
<body>
    <ul>
       <li><img class="data_list" src="../img/1.jpg" alt=""></li>
       <li><img class="data_list" src="../img/2.jpg" alt=""></li>
       <li><img class="data_list" src="../img/3.jpg" alt=""></li>
       <li><img class="data_list" src="../img/4.jpg" alt=""></li>
    </ul>
    <div>

    </div>
</body>
</html>
<script>
    let data_list = document.querySelectorAll('.data_list');
    data_list.forEach(element => {
        element.addEventListener('click',function (e) {
            let src = element.getAttribute('src');
            let div = document.querySelector('div');
            div.style.background = `url(${src}) no-repeat`;
        });
    });
</script>

获取表单值

<!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>获取表单值</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div>
        <form action="" method="get">
            <br>手机号: <input type="text" name="mobile" id="mobile" value="12345678901" autocomplete="off">
            <br> 密码: <input type="password" name="authText" id="authText" value="123456" autocomplete="off"><br>
            <br>性别:<br>
            <label for="male">帅哥</label>
            <input type="radio" name="gender" value="1" id="male" checked><br>
            <label for="female">靓妹</label>
            <input type="radio" name="gender" value="0" id="female"><br>
            <br>爱好:
            <label for="swimming">游泳</label>
            <input type="checkbox" name="hobby" value="swimming" id="swimming">&nbsp;&nbsp;&nbsp;&nbsp;
            <label for="running">跑步</label>
            <input type="checkbox" name="hobby" id="running" value="running">&nbsp;&nbsp;&nbsp;&nbsp;
            <label for="skiing">滑雪</label>
            <input type="checkbox" name="hobby" id="skiing" value="skiing">
        </form>
        <button id="submit">提交</button>
    </div>
</body>

</html>
<script>
    // 获取按钮元素
    let submit = document.querySelector('#submit');
    submit.addEventListener('click', function (e) {
        // 获取表单元素
        let mobile = document.querySelector('#mobile');
        let authText = document.querySelector('#authText');
        // 获取表单的值
        let mobileValue = mobile.value;
        let authTextValue = authText.value;
        console.log(mobileValue);
        console.log(authTextValue);
        // 获取单选按钮
        let genders = document.querySelectorAll('input[type=radio]');
        genders.forEach(gender => {
            if (gender.checked) {
                console.log(gender.value == 1 ? '男' : '女');
            }
        });
        // 获取多选按钮
        let hobbys = document.querySelectorAll('input[type=checkbox]');
        hobbys.forEach(hobby => {
            if (hobby.checked) {
                console.log(hobby.value);
            }
        });
    });
</script>

在这里插入图片描述

获取下拉列表表单值

<!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>获取下拉列表表单值</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div>
        <form action="" method="get">
            <br>手机号: <input type="text" name="mobile" id="mobile" value="12345678901" autocomplete="off">
            <br> 密码: <input type="password" name="authText" id="authText" value="123456" autocomplete="off"><br>
            <br>性别:
            <select name="gender" id="gender">
                <option value="1" selected>男</option>
                <option value="0" >女</option>
            </select>
            <br><br><br><br>爱好:
            <!--multiple 多个-->
            <select name="hobby" id="hobby" multiple>
                <option value="swimming">游泳</option>
                <option value="running" selected>跑步</option>
                <option value="skiing" >滑雪</option>
            </select>
        </form>
        <button id="submit">提交</button>
    </div>
</body>
</html>
<script>
    // 获取按钮元素
    let submit = document.querySelector('#submit');
    submit.addEventListener('click',function (e) {
        // 获取按钮元素
        let mobile = document.querySelector('#mobile');
        let authText = document.querySelector('#authText');
        // 获取表单的值
        let mobileValue = mobile.value;
        let authTextValue = authText.value;
        console.log(mobileValue);
        console.log(authTextValue);
        // 获取单选下拉列表
        let genders = document.querySelector('#gender');
        for (const gender of genders) {
            if (gender.selected) {
                console.log(gender.value == 1 ? '男' : '女');
            }
        }
        // 获取多选按钮
        let hobbys = document.querySelector('#hobby');
        for (const hobby of hobbys) {
            if (hobby.selected) {
                console.log(hobby.value);
            }
        }
    });
</script>

在这里插入图片描述

表单赋值

<!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>表单赋值</title>
</head>

<body>
    <input type="text" name="mobile" id="mobile" value="">
    <select name="hometown" id="hometown"></select>
</body>

</html>
<script>
    let mobile = document.querySelector('#mobile');
    mobile.value = '12345678901';
    // data数组中国存放中国省份地址 数组中国每个对象 对应下拉列表中每一个 option
    data = [
        {
            "id": 11,
            "pid": 0,
            "name": "北京"
        },
        {
            "id": 12,
            "pid": 0,
            "name": "天津"
        },
        {
            "id": 13,
            "pid": 0,
            "name": "河北"
        },
        {
            "id": 14,
            "pid": 0,
            "name": "山西"
        },
        {
            "id": 15,
            "pid": 0,
            "name": "内蒙古"
        },
        {
            "id": 21,
            "pid": 0,
            "name": "辽宁"
        },
        {
            "id": 22,
            "pid": 0,
            "name": "吉林"
        },
        {
            "id": 23,
            "pid": 0,
            "name": "黑龙江"
        },
        {
            "id": 31,
            "pid": 0,
            "name": "上海"
        },
        {
            "id": 32,
            "pid": 0,
            "name": "江苏"
        },
        {
            "id": 33,
            "pid": 0,
            "name": "浙江"
        },
        {
            "id": 34,
            "pid": 0,
            "name": "安徽"
        },
        {
            "id": 35,
            "pid": 0,
            "name": "福建"
        },
        {
            "id": 36,
            "pid": 0,
            "name": "江西"
        },
        {
            "id": 37,
            "pid": 0,
            "name": "山东"
        },
        {
            "id": 41,
            "pid": 0,
            "name": "河南"
        },
        {
            "id": 42,
            "pid": 0,
            "name": "湖北"
        },
        {
            "id": 43,
            "pid": 0,
            "name": "湖南"
        },
        {
            "id": 44,
            "pid": 0,
            "name": "广东"
        },
        {
            "id": 45,
            "pid": 0,
            "name": "广西"
        },
        {
            "id": 46,
            "pid": 0,
            "name": "海南"
        },
        {
            "id": 50,
            "pid": 0,
            "name": "重庆"
        },
        {
            "id": 51,
            "pid": 0,
            "name": "四川"
        },
        {
            "id": 52,
            "pid": 0,
            "name": "贵州"
        },
        {
            "id": 53,
            "pid": 0,
            "name": "云南"
        },
        {
            "id": 54,
            "pid": 0,
            "name": "西藏"
        },
        {
            "id": 61,
            "pid": 0,
            "name": "陕西"
        },
        {
            "id": 62,
            "pid": 0,
            "name": "甘肃"
        },
        {
            "id": 63,
            "pid": 0,
            "name": "青海"
        },
        {
            "id": 64,
            "pid": 0,
            "name": "宁夏"
        },
        {
            "id": 65,
            "pid": 0,
            "name": "新疆"
        },
        {
            "id": 71,
            "pid": 0,
            "name": "台湾"
        },
        {
            "id": 81,
            "pid": 0,
            "name": "香港"
        },
        {
            "id": 91,
            "pid": 0,
            "name": "澳门"
        }
    ];
    let hometown = document.querySelector('#hometown');
    // 先清空 后追加
    // hometown.empty();
    // 清空
    data.forEach(element => {
        // 第一参数是显示内容 第二个参数是value值
        let option = new Option(element.name,element.id);
        if (element.id == 62) {
            // 默认被旋转
            option.selected = true;
        }
        hometown.append(option);
    });
</script>

在这里插入图片描述

Rita_zzf

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
【Javascript —— DOM】

目录javascript DOMDOM简介DOM树结构获取DOM页面元素getElementByldgetElementsByClassNamegetElementsByTagNamegetElementsByTagNamequerySelectorquerySelectorAllDOM关系parentNode与parentElementchildNodes与childrenfirstElementChild与lastElementChildnextSibling与 nextElementSiblingin
复制链接

扫一扫