• JavaScript DOM中获取元素、事件基础、操作元素、节点操作

    目录

    JavaScript事件三要素

    常见的事件​编辑

    2、执行事件的步骤：

    1. 获取元素

    1.1 方式

    1.1.1 根据ID获取 

    1.1.2 根据标签名获取

    1.1.3 通过html5新增的方法获取

    1.1.4 特殊元素获取

    2. 事件基础

    2.1 事件三要素

    2.1.1 事件源

    2.1.2 事件类型

    2.1.3 事件处理程序

    2.2 执行事件的步骤

    2.3 常见的鼠标事件

    3. 操作元素

    3.1 改变元素内容

    3.1.1 innerText

    3.1.2 innerHTML

    3.2 修改图片 src

    3.3 表单属性

    3.4 样式属性操作

    3.5 排他思想

     3.6 自定义属性的操作

    4.节点操作 

    4.1 父节点

    4.2 子节点

    4.3 兄弟节点

    4.4 创建节点

    4.5 删除节点

    4.6  复制节点

    4.7 动态生成表格

    4.8  三种动态创建元素的区别

    JavaScript事件三要素

    事件三要素：        a.事件源            b.事件类型                 c.事件处理程序。


    事件源：要触发的对象 （一般是名词，事件发起者，比如开关按钮）。


    事件类型：怎么触发这个事情 （一般是动词，触发事件，比如点击开关）。


    事件处理程序：发生了什么事情 （处理结果，比如灯亮了）。

    常见的事件

    2、执行事件的步骤：

    1.获取事件源
    2.为事件绑定
    3.添加事件处理程序（以函数赋值的方式）

    1. <body>		
    2. 	<button id="btn">点击弹窗button>
    3. 		<div>我是元素div>
    4. 		<script type="text/javascript">
    5. 		1.获取事件源
    6. 			var btn = document.getElementById('btn');
    7. 		2.为事件绑定.onclick事件
    8. 		3.添加函数（效果为弹窗）
    9. 			btn.onclick = function(){
    10. 					alert("这时弹出的对话框")
    11. 			}	
    12. 			var divv = document.querySelector('div')
    13. 			console.log(divv)
    14. 			divv.onclick = function(){
    15. 				console.log("我被选中了")
    16. 			}
    17. 		script>
    18. body>

    1. 获取元素

    1.1 方式

    1.1.1 根据ID获取 

    语法：

    var element = document.getElementById('id');

    参数：

    element是一个 Element 对象。

    如果当前文档中拥有特定ID的元素不存在则返回null.
    id是大小写敏感的字符串，代表了所要查找的元素的唯一ID.

    返回值：

    返回一个匹配到 ID 的 DOM Element 对象。

    若在当前 Document 下没有找到，则返回 null。

    1.1.2 根据标签名获取

    语法

    document.getElementsByTagName('标签名');

    返回值：

    返回的是获取过来元素对象的集合，以伪数组的形式存储的
    想要依次打印里面的元素对象，可以采取遍历的方式

    1. element.getElementsByTagName()
    2. //可以得到这个元素里面的某些标签

    1.1.3 通过html5新增的方法获取

    语法

    1. getElementsByClassName('类名');
    2. //根据类名获得某些元素
    3.  
    4. querySelector(‘’);  
    5. //返回指定选择器的第一个元素对象，里面的选择器要加符号， .nav，#list
    6.  
    7. querySelectorAll(‘’); 
    8. //返回指定选择器的所有元素对象集合

    1.1.4 特殊元素获取

    1. //获取body元素
    2.  
    3.         document.body;
    4.  
    5. //获取html元素
    6.  
    7.         document.documentElement;

    2. 事件基础

    2.1 事件三要素

    2.1.1 事件源

    事件被触发的对象

    2.1.2 事件类型

    如何触发？鼠标点击？鼠标经过？

    2.1.3 事件处理程序

    通过一个函数赋值的方式完成

    2.     <button id='btn'>123button>
    3.     <script>
    4.         var btn = document.getElementById('btn');
    5.         btn.onclick = function() {
    6.             alert('456');
    7.         }
    8.     script>

    2.2 执行事件的步骤

    • 获取事件源
    • 注册事件（绑定事件）
    • 添加事件处理程序（采取函数赋值的形式）

    2.3 常见的鼠标事件

    3. 操作元素

    3.1 改变元素内容

    3.1.1 innerText

    1. element.innerText='';
    2.  
    3. //从起始位置到终止位置的内容，但他取出html标签，同时空格和换行也会去掉

    3.1.2 innerHTML

    1.  element.innerHMTL='';
    2.  
    3. //从起始位置到终止位置的内容，包括html标签，同时保留空格和换行

    3.2 修改图片 src

    2.     <button id='qwe'>logobutton>
    3.     <button id='asd'>7button>
    4.     <img src="img/logo.png" alt="">
    5.     <script>
    6.         var btn1 = document.getElementById('qwe');
    7.         var btn2 = document.getElementById('asd');
    8.         var img = document.querySelector('img');
    9.         btn1.onclick = function() {
    10.             img.src = 'img/logo.png';
    11.         }
    12.         btn2.onclick = function() {
    13.             img.src = 'img/qitian.png';
    14.         }
    15.     script>
    16. body>

    3.3 表单属性

    表单里面的文字内容是通过value来修改的，不能使用innerHTML来修改。

    disabled禁用 

    type等

    3.4 样式属性操作

    1. element.style; 
    2. //行内样式操作，驼峰命名法
    3.  
    4. element.className=''; 
    5. // 类名样式操作，className会直接覆盖原先的类名

    3.5 排他思想

    如果有同一组元素， 我们想要某一个元素实现某种样式，需要用到循环的排他思想

    排他算法基础：

    所有元素全部清除样式
    给当前元素设置样式
    注意顺序不能颠倒

     3.6 自定义属性的操作

    1. element.getAttribute('属性')；
    2. //获得属性
    3.  
    4. element.setAttribute('属性','值')；
    5. //设置属性值
    6.  
    7. element.removeAttribute('属性')；
    8. //移除属性

    自定义属性以“data-”开头

    h5新增的获取自定义属性的方法，dataset是能获取data-开头的自定义属性

    1. <body>
    2.     <div data-index="20" data-time-today="2020">div>
    3.     <script>
    4.         var div=document.querySelector('div');
    5.         // dataset是一个集合里面存放了所有以data开头的自定义属性
    6.         div.dataset.index;
    7.         // 如果自定义属性名有多个-连接，则获取时采用驼峰命名法
    8.         div.dataset.timeToday;
    9.     script>
    10. body>

    4.节点操作 


    4.1 父节点

    element.parentNode

    4.2 子节点

    1. element.childNodes 
    2. //集合，得到所有的子节点，包括元素节点，文本节点等，不好用
    3.  
    4. element.children 
    5. //好用
    6.  
    7. element.firstElementChild 
    8.  //第一个子元素节点
    9.  
    10. element.lastElementChild   
    11. //最后一个子元素节点

    4.3 兄弟节点

    1. node.nextSibling 
    2. //上一个节点，不好用
    3.  
    4. node.previousSibling 
    5. //下一个节点，不好用
    6.  
    7. node.nextElementSibling 
    8. //下一个兄弟元素节点，好用，ie9以上
    9.  
    10. node.previousElementSibling 
    11. //上一个兄弟元素节点，好用，ie9以上

    兼容性问题的解决方法：封装一个兼容性函数

    4.4 创建节点

    1. document.createElement（‘tagName’） 
    3.     <ul>
    4.         <li>123li>
    5.     ul>
    6.     <script>
    7.         // 1.创建节点 元素节点
    8.         var li = document.createElement('li');
    9.         // 2.添加节点 node.appendChild(child) node-父级，child-子级
    10.         var ul = document.querySelector('ul');
    11.         ul.appendChild(li);
    12.         // 3. 添加节点 node.insertBefore(child,指定元素) 添加在指定元素的前面
    13.         var li2 = document.createElement('li');
    14.         ul.insertBefore(li2, ul.children[0]);
    15.     script>
    17.  
    18. appendChild(child)，在后面添加，不影响原来的元素

    4.5 删除节点

    1. node.removeChild(child) 
    2. //node-父级，child-子级

    留言板案例：

    2.     <textarea>textarea>
    3.     <button id='fs'>发送button>
    4.     <ul>ul>
    5.  
    6.     <script>
    7.         var ul = document.querySelector('ul');
    8.         var btn1 = document.getElementById('fs');
    9.         var txt = document.querySelector('textarea');
    10.         btn1.onclick = function() {
    11.             if (txt.value == '') {
    12.                 alert('内容不能为空');
    13.             } else {
    14.                 var li = document.createElement('li');
    15.                 li.innerHTML = txt.value + '\t' + getDate() + '\t' + "删除";
    16.                 // ul.appendChild(li);
    17.                 txt.value = '';
    18.                 ul.insertBefore(li, ul.children[0]);
    19.                 var as = document.querySelectorAll('a');
    20.                 for (var i = 0; i < as.length; i++) {
    21.                     as[i].onclick = function() {
    22.                         ul.removeChild(this.parentNode);
    23.                     }
    24.                 }
    25.             }
    26.         }
    27.  
    28.         function getDate() {
    29.             var date = new Date;
    30.             var s = date.getSeconds();
    31.             var m = date.getMinutes();
    32.             var h = date.getHours();
    33.             if (s < 10) {
    34.                 s = '0' + s;
    35.             } else if (m < 10) {
    36.                 m = '0' + m;
    37.             } else if (h < 10) {
    38.                 h = '0' + h;
    39.             }
    40.             return h + ':' + m + ':' + s;
    41.         }
    42.     script>

    4.6  复制节点

    node.cloneNode();

    注：

    如果括号里面参数为空或者false，则是浅拷贝，只复制节点本身，不复制里面的内容
    如果括号里面参数为true，则是深拷贝，复制节点本身以及里面的内容

    4.7 动态生成表格

    1. <head>
    2.     <meta charset="UTF-8">
    3.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    4.     <title>Documenttitle>
    5.     <style>
    6.         table {
    7.             width: 500px;
    8.             margin: 100px auto;
    9.             border-collapse: collapse;
    10.             text-align: center;
    11.         }
    12.         td,
    13.         th {
    14.             border: 1px solid #333;
    15.         } 
    16.         thead tr {
    17.             height: 40px;
    18.             background-color: #ccc;
    19.         }
    20.     style>
    21. head> 
    22. <body>
    23.     <table>
    24.         <thead>
    25.             <tr>
    26.                 <th>姓名th>
    27.                 <th>科目th>
    28.                 <th>成绩th>
    29.                 <th>操作th>
    30.             tr>
    31.         thead>
    32.         <tbody>
    33.  
    34.         tbody>
    35.     table>
    36.     <script>
    37.         var dataset = [{
    38.             name: '赵钱',
    39.             sunject: 'javaScript',
    40.             score: 100
    41.         }, {
    42.             name: '孙李',
    43.             sunject: 'javaScript',
    44.             score: 96
    45.         }, {
    46.             name: '周吴',
    47.             sunject: 'javaScript',
    48.             score: 86
    49.         }, {
    50.             name: '郑王',
    51.             sunject: 'javaScript',
    52.             score: 98
    53.         }]; 
    54.         var tbody = document.querySelector('tbody');
    55.         for (var i = 0; i < dataset.length; i++) {
    56.             var tr = document.createElement('tr');
    57.             tbody.appendChild(tr);
    58.             for (var k in dataset[i]) {
    59.                 var td = document.createElement('td');
    60.                 tr.appendChild(td); 
    61.                 td.innerHTML = dataset[i][k];
    62.             }
    63.             var td = document.createElement('td');
    64.             td.innerHTML = '删除';
    65.             tr.appendChild(td);
    66.         }
    67.         var as = document.querySelectorAll('a');
    68.         for (var i = 0; i < as.length; i++) {
    69.             as[i].onclick = function() {
    70.                 tbody.removeChild(this.parentNode.parentNode);
    71.             }
    72.         }
    73.     script>
    74. body>

    4.8  三种动态创建元素的区别

    1. document.write（）
    2. element.innerHTML
    3. document.createElement（）


    区别：

    1.         document.write是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘
    2.         innerHTML 是将内容写入某个DOM节点，不会导致页面重绘；创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂
    3.         document.createElement（）创建多个元素效率稍低一点点，但是结构更清晰

  • 相关阅读:
    python-jupyter notebook安装教程
    多线程之线程的执行顺序
    Redis 服务器端优化方案
    服务号迁移到订阅号流程步骤
    【报错】springboot3启动报错
    2023年亚马逊云科技中国峰会记录
    2022-Aug-28
    python数据库——Mongodb
    Vue3 + Vite2 项目实战复盘总结（干货！）
    抛弃for循环遍历list
  • 原文地址：https://blog.csdn.net/qq_53414724/article/details/127913371