Day21_学点儿JavaScript_JS DOM、点击事件（不是重点，但是要敲一遍）-CSDN博客

本文链接：https://blog.csdn.net/Mr_Tang4/article/details/137657620

0 前文回顾

Day15_学点儿JavaScript_JS对象、DOM、innerText和innerHtml
Day15_学点儿JavaScript_数据类型、关系运算符、String、Boolean、Array、Math、eval

1 什么是加载事件onload

js代码执行时候，需要html&css的支持，就让html先执行(先进入内存)，js代码后执行。

window.onload = function() { 

}

onload:在页面加载完之后执行
dom:用JS对html标签进行增删改查

2 元素结点获取

在这里插入图片描述

3 文本节点获取

<div>hello</div>
需要借助div元素节点再获得其内部的文本节点.

var dvnode = document.getElementsByTagName(‘div’)[0];
dvnode.firstChild;  //(或调用lastChild)获得元素div内部的第一个子节点对象,而不是自己这个节点

在这里插入图片描述

4 兄弟节点

firstChild、lastChild:父节点获得第一个/最后一个子节点
nextSibling:获得下个兄弟节点
previousSibling:获得上个兄弟节点
childNodes:父节点获得内部全部的子节点信息
在这里插入图片描述

5 父节点

节点.parentNode
在这里插入图片描述

6 属性值操作

<input  type="text"  name="username"  value="tom"  class="orange" />
<a href="http://www.baidu.com"  addr="beijing" target="_blank">百度</a>

获取属性值

itnode.属性名称;   //只能操作w3c规定的属性
itnode.getAttribute(属性名称);  //规定的 和 自定义的都可以获取

设置属性值

itnode.属性名称 = 值;  //只能操作w3c规定的属性
itnode.setAttribute(名称，值); //规定的 和 自定义的都可以设置

在这里插入图片描述

Field、Attribute、Property：差不多都是属性的意思

7 节点创建和追加

节点创建

元素节点：document.createElement(tag标签名称);
文本节点：document.createTextNode(文本内容);
属性设置：node.setAttribute(名称，值);

节点追加：

父节点.appendChild(子节点);
父节点.insertBefore(newnode,oldnode); //newnode放到oldnode的前边
父节点.replaceChild(newnode,oldnode); //newnode替换到oldnode节点

<!DOCTYPE html>
<html>
    <head>
       <meta charset="utf-8">
       <title></title>
    </head>
    <body>
       <!-- 
       <ul>
          <li mean='热情'>red</li>
          <li mean='冷静'>green</li>
          <li mean='生机'>blue</li>
       </ul> 
       -->
       
       <script type="text/javascript">
          window.onload = function() {
             var colors = ['red', 'green', 'blue'];
             var colorMeans = ['热情', '冷静', '生机'];
             var ul = document.createElement('ul');
             /*for (var color of colors) {
                console.log(color);
             }*/
             /*for (var i in colors) {
                console.log(i); // 0, 1, 2
             }*/
             for (var i = 0; i < colors.length; i++) {
                var li = document.createElement('li');
                li.setAttribute('mean', colorMeans[i]);
                var textNode = document.createTextNode(colors[i]);
                li.appendChild(textNode);
                ul.appendChild(li);
             }
             document.body.appendChild(ul);
          }
       </script>
    </body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
    <head>
       <meta charset="utf-8">
       <title></title>
    </head>
    <body>
       <ul>
          <li mean='热情'>red</li>
          <li mean='生机'>blue</li>
          <li mean='冷静'>green</li>
       </ul> 
       <ul>
          <li mean='饿'>orange</li>
       </ul> 
       
       <script type="text/javascript">
          window.onload = function() {
             var blue = document.getElementsByTagName('li')[1];
             var orange = document.getElementsByTagName('li')[3];
             var firstUl = document.getElementsByTagName('ul')[0];
             //firstUl.appendChild(orange);
             //firstUl.insertBefore(orange, blue);
             firstUl.replaceChild(orange, blue);
          }
       </script>
    </body>
</html>

8 节点删除

父节点.removeChild(子节点);
在这里插入图片描述

9 总结

DOM操作

元素、文本、属性、document节点获取

元素：getElementById()/getElementsByTagName()
文本：元素节点.firstChild/lastChild;
属性：元素节点.attributes;元素节点.attributes.属性名称;
document:元素节点.parentNode

属性值操作

元素节点.属性名称;
元素节点.属性名称 = 值;
元素节点.getAttribute(属性名称);
元素节点.setAttribute(属性名称，值);

节点创建、追加、复制、删除

创建：
元素-document.createElement(tag名称);
文本-document.createTextNode(文本内容);
元素节点.setAttribute();
追加：
父.appendChild(子);
父.replaceChild(new，old);
父.insertBefore(new,old);
删除：
父.removeChild(子)

10 点击事件

通过鼠标、键盘对页面所做的动作就是事件。
事件一旦发生需要有事件处理，该处理称为“事件驱动”，事件驱动通常由函数担任
onclick onmouseover onmouseout onkeyup onkeydown onblur onfocus onsubmit

在标签内写onclick事件
<input id="btnId" type="button" value="Press Me" onclick="alert('thanks');" >
在JS写onlicke=function(){}函数

var btn = document.getElementById('btnId');
btn.onclick = function () {
    alert('thanks');
}

<!DOCTYPE html>
<html>
    <head>
       <meta charset="utf-8">
       <title></title>
    </head>
    <body>
       <button onclick="alert('hello')">click1</button>
       <input type="button" value="click2" onclick="cli()" onmouseover="over()" onmouseout="out()"/>
       <input type="text" onfocus="focu()" onblur="blu()">

       <input id="btnId" type="button" value="click3" />

       <script type="text/javascript">
          window.onload = function () {
             var btn = document.getElementById('btnId');
             btn.onclick = function () {
                console.log('onlick');
             }
             btn.onmouseover = function () {
                console.log('onmouseover');
             }
             btn.onmouseout = function () {
                console.log('onmouseout');
             }
          }

          function cli() {
             console.log('cli');
          }

          function over() {
             console.log('over');
          }

          function out() {
             console.log('out');
          }

          function focu() {
             console.log('focus');
          }

          function blu() {
             console.log('blur');
          }
       </script>
    </body>
</html>