Ereignisse in BOM, DOM und JS-js-Tutorial-php.cn

二、“N世同堂”——DOM

1、朝阳群众又立功，代码中竟出现如此神秘的“庞大组织”——DOM简介

DOM（Document Object Model），是指文档对象模型，是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型，而DOM中的每一条分支都被称作一个“节点”，所有节点及节点属性构成的结构图会呈现出很强的层次性（栗子如下图，源于万能的度娘）。

DOM节点分为三大类：元素节点，文本节点，属性节点。文本节点、属性节点为元素节点的两个子节点，通过gelElement系列方法，可以取到元素节点。

2、如此组织，其真相竟然是...——DOM操作详解

DOM操作是JS中应用性非常强的一部分，所以本K就以代码的形式来给大家叙述。

2.1 获取节点与样式修改

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>DOM代码详述（一）</title>
        
        <script type="text/javascript">            

            
            window.onload = function(){                var p1 = document.getElementById("p1");//通过ID获取唯一的节点；多个同名ID只会取第一个                console.log(p1);
                
                console.log(p1.tagName);//查看节点：①属性；获取节点的标签名                console.log(p1.innerHTML);//②设置或者获取节点内部的所有HTML代码                console.log(p1.innerText);//③设置或者获取节点内部的所有文字                
                console.log(window.getComputedStyle(p1,null));//查看所有属性（非IE属性）                console.log(p1.currentStyle);//查看所有属性（IE属性）                
            }            function getById(){                //取到元素节点的样式属性节点
                var p1 = document.getElementById("p1").style;//获取                p1.backgroundColor = "#FF00FF";//行级样式表权重1000;所有节点属性，一律驼峰命名法
                
                //取到元素节点
                var pDoc = document.getElementById("p1");//获取                pDoc.innerHTML = "<s>king_land</s>";//重置修改p中的HTML代码            }            
            //——————————————分割线——————————————————
            
            function getByName(){//通过Name取到一个数组，包含1到多个节点;
                
                var p = document.getElementsByName("p1");
                
                console.log(p.length);                
                //使用方式：通过循环，取到每一个节点，循环次数从0开始，<数组.length
                for(var n = 0 ;n < p.length ; n++){
                    p[n].style.backgroundColor = "#FFFF00";
                }                
                //p1.backgroundColor = "#FFFF00";
                //p[0].style.backgroundColor = "#FFFF00";//★                
            }            
            //——————————————分割线——————————————————
            
            //document.getElementsByTagName();//同Name

            function getByTagName(){                
                var p = document.getElementsByTagName("p");
                
                p[0].style.backgroundColor = "#00FF00";
                
            }            
            //——————————————分割线——————————————————
            
            //document.getElementsByClassName();//同Name

            function getByClass(){                
                var p = document.getElementsByClassName("p1");
                
                p[0].style.backgroundColor = "#00FFFF";
                
            }            //——————————————分割线——————————————————
            
            function getAttr () {                
                var img1 = document.getElementById("img1");
                alert(img1.getAttribute("src"));
                
            }//查看属性节点 getAttribute("属性名");
            
            //——————————————分割线——————————————————
            
            function setAttr () {                
                var img1 = document.getElementById("img1");
                img1.setAttribute("src","../../2-CSS基础语法/img/bg_flower_multi.gif");
                img1.setAttribute("style","width: 100px;height: 100px;");
                
            }//设置属性节点 getAttribute("属性名","属性值");
            
            //——————————————分割线——————————————————
            
            //JS修改样式总结
            //1、.className：为元素设置一个新的class名字   例如：p1.className = "p2";
            //2、.style：为元素设置新的样式   例如：p1.style.background-color = "blue";
            //3、.style.cssText：为元素同时修改多个样式   例如：p1.style.cssText = "width:100px;height:200px;";
            

            
            
            
        </script>
        
        <style type="text/css">
            
            .p1{
                height: 100px;
                width: 100px;
                background-color: #000000;
                color: #FFFFFF;
                line-height: 100px;
                text-align: center;
            }
            
        </style>
        
        
    </head>
    <body>
        
        <p id="p1" name="p1" class="p1">
            这里是测试区
        </p>
        <p id="p1" name="p1" class="p1">
            这里是测试区
        </p>
        <p id="p1" name="p1" class="p1">
            这里是测试区
        </p>
        <img src="../../2-CSS基础语法/img/bg_flower_multi.gif" id="img1"/>
        
        
        <br />
        <button onclick="getById()">通过ID修改pcolor</button>
        <br />
        <button onclick="getByName()">通过Name修改pcolor</button>
        <br />
        <button onclick="getByTagName()">通过TagName修改pcolor</button>
        <br />
        <button onclick="getByClass()">通过ClassName修改pcolor</button>
        <br />
        <button onclick="getAttr()">取到img的src属性值</button>
        <br />
        <button onclick="setAttr()">修改img的src属性值</button>
        
    </body>
</html>

Nach dem Login kopieren

2.2 层次节点常用操作

2.3 表格操作

三、鼠标和键盘、那些不得不说的事——JS中的事件

1、三足鼎立——JS中的事件分类

1.1 鼠标事件

【Hinweise】
①Ausführungssequenz: Taste nach unten, Taste drücken, Taste nach oben
②Bei längerem Drücken wird die Ausführung fortgesetzt in einer Schleife Tastendruck nach unten
③Es liegt ein Tastendruck-Ereignis vor, aber möglicherweise kein Tastendruck-Ereignis (während des Ereignisauslösevorgangs kann es zu keinem Tastendruck-Ereignis kommen, wenn die Maus bewegt wird)
④Das Tastendruck-Ereignis kann nur erfasst werden. Buchstaben, Zahlen und Symbole (einschließlich Wagenrücklauf und Leerzeichen) können keine Funktionstasten erfassen. Mit der Tastenkombination „Taste nach unten“ können grundsätzlich alle Funktionstasten erfasst werden, mit besonderen Ausnahmen
⑤Bei Tastendruck wird die Groß-/Kleinschreibung beachtet, bei Tastendruck wird nicht zwischen der Haupttastatur und der kleinen Tastatur unterschieden, bei Tastendruck jedoch schon
[So ermitteln Sie die Tastatur-Triggertaste]
⑴ In der Trigger--Funktion
stellt der Triggerparameter e das Tastenereignis dar; ⑵ Bestätigen Sie den ASCII-Codewert des Falls über e.keyCode und bestimmen Sie dann den Schlüssel ⑶ Kompatibel mit allen Browsern (im Allgemeinen nicht erforderlich):
var evn = e||event; //Schaltfläche abrufen
var code = evn .keyCode||evn.which||evn.charCode; //Schlüsselcode abrufen

1.3 HTML-Ereignis

2. Dieses Ufer und das andere Ufer – Ereignismodell in JS

2.1 DOM0-Ereignismodell

2.1. 1 Inline-Modell: Verwenden Sie den Funktionsnamen direkt als Attributwert eines Ereignisattributs von HTML-Tag ;

;/button> Nachteile: Verstößt gegen das W3C-
Grundprinzip der Trennung von HTML und JS!
2.1.2 Skriptmodell: Bindung durch Ereignisattribute im JS-Skript

Einschränkungen: Derselbe Knoten kann nur sein gebunden an ein Ereignis desselben Typs;

2.2 DOM2-Ereignismodell (es gibt Kastanien später!)

Vorteile: Mehrere Listener für Ereignisse desselben Typs können demselben Knoten hinzugefügt werden

①添加事件绑定：
IE10之前：btn1.attachEvent("onclick",函数);
其他浏览器：btn1.addEventListener("click",函数,true/false);
true：表示事件捕获；false（默认）：表示事件冒泡
兼容写法：if(btn1.attackEvent){btn1.attachEvent("onclick",函数);}else{btn1.addEventListener("click",函数,true/false);}
②取消事件绑定：
.detachEvent("onclick",函数名);
.removeEventListener("click",函数名);
注：如果取消时间帮顶，回调函数必须使用有名函数，而不能使用匿名函数。因为在取消事件帮顶时，需要传入函数名；

Das obige ist der detaillierte Inhalt vonEreignisse in BOM, DOM und JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!