投稿
  1. 首页
  2. html-js-css

【Javascript —— DOM】

irf540 • 2022-6-11 • html-js-css • 阅读 15

【Javascript —— DOM】,第1张

目录 javascript DOMDOM简介DOM树结构获取DOM页面元素getElementByldgetElementsByClassNamegetElementsByTagNamegetElementsByTagNamequerySelectorquerySelectorAll DOM关系parentNode与parentElementchildNodes与childrenfirstElementChild与lastElementChildnextSibling与 nextElementSibling innerText与innerHtml动态创建添加节点创建添加节点创建指定位置添加节点创建元素的方式动态创建表格字符串拼接方式动态创建表格字符串模板的方式动态创建表格数组字符串拼接方式动态创建表格数组字符串模板方式动态创建表格 性能比较字符串拼接性能字符串模板性能数组字符串拼接性能数组字符串模板性能创建元素性能 事件事件属性void事件监听事件的绑定与解绑事件冒泡事件流事件对象阻止事件默认行为的两种方式javascript:void(0) 含义 阻止表单默认提交五种方式 *** 作cssmouseover与mouseoutmouseenter与 mouseleave

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>传统方式获取DOMtitle>
head>

<body>
    <div id="family">
        <div class="father">
            爸爸
            <div class="son">儿子div>
        div>
    div>
    <div id="b">我是divdiv>
    <span>我是spanspan>
    <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>传统方式获取DOMtitle>
head>

<body>
    <div id="family">
        <div class="father">
            爸爸
            <div class="son">儿子div>
        div>
    div>
    <div id="b">我是divdiv>
    <span>我是spanspan>
    <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>传统方式获取DOMtitle>
head>

<body>
    <div id="family">
        <div class="father">
            爸爸
            <div class="son">儿子div>
        div>
    div>
    <div id="b">我是divdiv>
    <span>我是spanspan>
    <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>传统方式获取DOMtitle>
head>

<body>
    <div id="family">
        <div class="father">
            爸爸
            <div class="son">儿子div>
        div>
    div>
    <div id="b">我是divdiv>
    <span>我是spanspan>
    <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获取DOMtitle>
head>
<body>
    <div id="family">
        <div class="father">
            爸爸
            <div class="son">儿子div>
        div>
    div>
    <div id="b">我是divdiv>
    <span>我是spanspan>
    <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获取DOMtitle>
head>
<body>
    <div id="family">
        <div class="father">
            爸爸
            <div class="son">儿子div>
        div>
    div>
    <div id="b">我是divdiv>
    <span>我是spanspan>
    <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">我是divdiv>
    <span>我是spanspan>
    <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">我是divdiv>
    <span>我是spanspan>
    <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">我是divdiv>
    <span>我是spanspan>
    <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">我是divdiv>
    <span>我是spanspan>
    <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与innerHtmltitle>
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 = 'bilibili';
    bilibili_html.innerHTML = 'bilibili';
    csdn_text.innerText = 'csdn';
    csdn_html.innerHTML = 'csdn';
    // 页面获取
    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>Documenttitle>
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>Documenttitle>
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 += '' + person.name + '' + (person.gender == 1 ? '男' : '女') + '';
    });
    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 += `${person.name}${person.gender == 1 ? '男' : '女'}`;
    });
    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('' + person.name + '' + (person.gender == 1 ? '男' : '女') + '');
    });
    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(`${person.name}${person.gender == 1 ? '男' : '女'}`);
    });
    // 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 += '';
    }
    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 += ``;
    }
    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('');
    }
    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(``);
    }
    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>voidtitle>
head>

<body>
    <a href="https://www.bilibili.com/">bilibilia>
    <a href="https://www.csdn.net/">csdna>
    <a href="javascript:{alert('桃李不言下自成蹊')}">a>
    <a href="javascript:slogan()">slogana>
    <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;">spanspan>
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 e5、事件对象存在兼容问题 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/">bilibilia>
    <a id="csdn" href="https://www.csdn.net/">csdna>
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 = false4、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">
        <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> *** 作csstitle>
    <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与mouseouttitle>
    <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与mouseleavetitle>
    <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>

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1321104.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
irf540 irf540 一级用户组
0 0
上一篇 2022-06-11
下一篇 2022-06-11

发表评论

登录后才能评论

评论列表（0条）

保存