事件

1.概述

JS是以事件驱动为核心的一门语言。

2.事件三要素

事件源、事件、事件驱动程序。

三句话：获取事件源、绑定事件、书写事件驱动程序。

获取事件源：document.getElementById(“box”);

绑定事件： box.onclick = function(){ 程序 };

书写事件驱动程序：以后要学习的关于DOM的操作。

2.1事件有哪些

2.2小知识点补充

扫描二维码关注公众号，回复： 2668256 查看本文章

什么条件下触动window.onload事件？（文本和图片加载完毕的时候）

js的加载时和html同步加载的。（如果使用元素在定义元素之间，容易报错。）

window.onload可以预防使用标签在定义标签之前。

整个页面上所有元素加载完毕再执行js内容。

window.onload可以预防使用标签在定义标签之前。

window.onload = function () {
var aaa = document.getElementById("box");
aaa.style.width = "100px";
}

DOM概述

3.解析过程

HTML加载完毕，渲染引擎会在内存中把HTML文档，生成一个DOM树，getElementById是获取内中DOM上的元素节点。然后操作的时候修改的是该元素的属性。

4.DOM (文档对象模型)

document是文档对象模型的一部分。

DOM是一个复合的数据类型。

5.DOM的数据结构（树状）

6.HTML的组成部分为节点（ Node ）

在HTML当中一切都是节点……

由结构图中我们可以看到，整个文档就是一个文档节点。

每一个HMTL标签都是一个元素节点（标签）。

标签中的文字则是文字节点。（文本）

标签的属性是属性节点。（属性）

7.DOM节点的获得

操作节点，必须首先找到该元素。有三种方法来做这件事：

通过 id 找到 HTML 元素

document.getElementById("demo");

通过标签名找到 HTML 元素

document.getElementsByTagName("div");

通过类名找到 HTML 元素

document.getElementsByClassName("a");

通过类名查找 HTML 元素在 IE 5,6,7,8 中无效

标签=document.getElementById("demo"); 通过ID获得标签

他的返回值是一个标签，可以直接使用。获得属性值，设置属性。

标签数组= document.getElementsByTagName("div"); 通过标签名获得标签数组

标签数组= document.getElementsByClassName("a");通过类名获得标签数组

他们两个的返回值是标签数组，习惯性是遍历之后再使用。

特殊情况：数组中的值只有1个。

document.getElementsByTagName("div")[0];取数组中第一个元素

document.getElementsByClassName("a")[0];取数组中第一个元素

8.DOM 访问关系（节点的获得）

节点的访问关系，是以属性的方式存在的。

DOM的节点并不是孤立的，因此可以通过DOM节点之间的相对关系对它们进行访问。

8.1父节点（ parentNode ）

调用者就是节点。一个节点只有一个父节点。调用方式就是节点.parentNode.

8.2兄弟节点

Sibling就是兄弟的意思。Next：下一个的意思。Previous:前一个的意思。

nextSibling：调用者是节点。

IE678中指下一个元素节点（标签）。在火狐谷歌IE9+以后都指的是下一个节点（包括空文档和换行节点）。

nextElementSibling：在火狐谷歌IE9都指的是下一个元素节点。

总结：在IE678中用nextSibling，在火狐谷歌IE9+以后用nextElementSibling

下一个兄弟节点=节点.nextElementSibling || 节点.nextSibling

previousSibling：调用者是节点。

IE678中指前一个元素节点（标签）。在火狐谷歌IE9+以后都指的是前一个节点（包括空文档和换行节点）。

previousElementSibling：在火狐谷歌IE9都指的是前一个元素节点。

总结：在IE678中用previousSibling，在火狐谷歌IE9+以后用previousElementSibling。

前一个兄弟节点=节点.previousElementSibling|| 节点.previousSibling

8.3单个子节点

firstChild：调用者是父节点。

IE678中指第一个子元素节点（标签）。在火狐谷歌IE9+以后都指的是第一个节点（包括空文档和换行节点）。

firstElementChild:在火狐谷歌IE9都指的第一个元素节点。

第一个子节点=父节点.firstElementChild || 父节点.firstChild

lastChild:调用者是父节点。

IE678中指最后一个子元素节点（标签）。在火狐谷歌IE9+以后都指的是最后一个节点（包括空文档和换行节点）。

lastElementChild：在火狐谷歌IE9都指的最后一个元素节点。

最后一个子节点=父节点.lastElementChild|| 父节点.lastChild

8.4所有子节点

childNodes：它是标准属性，它返回指定元素的子元素集合，包括HTML节点，所有属性，文本节点（他才是W3C的亲儿子）

火狐谷歌等高本版会把换行也看做是子节点。

nodeType==1时才是元素节点(标签)

nodeType == 1 表示的是元素节点记住元素就是标签

nodeType == 2 表示是属性节点了解

nodeType == 3 是文本节点了解

子节点数组 = 父节点.childNodes; 获取所有节点。

children：非标准属性，它返回指定元素的子元素集合。

但它只返回HTML节点，甚至不返回文本节点，虽然不是标准的DOM属性，但它和innerHTML方法一样，得到了几乎所有浏览器的支持。

children在IE6/7/8中包含注释节点

在IE678中，注释节点不要写在里面。

子节点数组 = 父节点.children; 用的最多。

8.5知识补充

节点自己.parentNode.children[index];随意得到兄弟节点。

作为了解内容：

function siblings(elm) {

var a = [];

var p = elm.parentNode.children;

for(var i =0,pl= p.length;i<pl;i++) {

if(p[i] !== elm) a.push(p[i]);

}

return a;

}

定义一个函数。必须传递自己。定义一个数组，获得自己的父亲，在获得自己父亲的所有儿子（包括自己）。遍历所有的儿子，只要不是自己就放进数组中。

8.6要明白两个属性（！！！重点！！！）

parentNode 和 children 这两个属性。

9.DOM节点操作（！！！！！重点！！！！！）

节点的访问关系都是属性。节点的操作都是函数或者方法。

9.1创建节点

使用方法是这样的document.createElement();

新的标签（节点） = document.createElement(“标签名”);

9.2插入节点（使用节点）

使用方法：父节点.appendChild();

父节点.appendChild(新节点); 父节点的最后插入一个新节点

使用方法：父节点.insertBefore(要插入的节点，参考节点)

父节点.insertBefore(新节点,参考节点)在参考节点前插入;

如果参考节点为null，那么他将在节点最后插入一个节点。

9.3删除节点

用法：用父节点删除子节点。

父节点.removeChild（子节点）；必须制定要删除的子节点

节点自己删除自己：

不知道父级的情况下，可以这么写：node.parentNode.removeChild(node)

9.4复制节点（ oldNode.cloneNode（true））

想要复制的节点调用这个函数cloneNode()，得到一个新节点。方法内部可以传参，如果是true，深层复制，如果是false，只复制节点本身。

新节点=要复制的节点.cloneNode(参数) ; 参数可选复制节点

用于复制节点，接受一个布尔值参数， true 表示深复制（复制节点及其所有子节点）， false 表示浅复制（复制节点本身，不复制子节点）

<ul>
    <li id="li1">我是参照标签</li>
</ul>

<script>
    //document.write();不常用，因为容易覆盖原来的页面。
    //innerHTML;用的比较多。绑定属性和内容比较方便。(节点套节点)
    //document.createElement;也是比较多的，指定数量的时候一般用它。

    var ul = document.getElementsByTagName("ul")[0];
    var li1 = document.getElementById("li1");

    //创建，添加，删除，替换
    var li2 = document.createElement("li");
    li2.innerText = "我是createElement创建的标签，用的是appendChild的方法添加的";
    ul.appendChild(li2);
    //用insertBefore添加
    var li3 = document.createElement("li");
    li3.innerText = "我是createElement创建的标签，用的是insertBefore的方法添加的"
    //父节点.insertBefore(新节点，参照节点);
    ul.insertBefore(li3,li1);


    //删除，替换
    ul.removeChild(li3);
    //父节点.replaceChild(newNode,oldNode);
    ul.replaceChild(li3,li2);

    //克隆node.cloneNode(true);深层复制。
    for(var i=0;i<=3;i++){
        var newLi = li3.cloneNode(true);
        ul.appendChild(newLi);
    }

</script>

9.5节点属性（节点.属性）

获取：getAttribute(名称)

设置：setAttribute(名称, 值)

删除：removeAttribute(名称)

注意：IE6、7不支持。

调用者：节点。有参数。没有返回值。

每一个方法意义不同。

 <script>
        window.onload = function () {
            var eleNode = document.getElementsByTagName("img")[0];

            //属性、赋值获取两种方式
            //1.元素节点.属性或者元素节点[属性]
            eleNode.src = "image/jd2.png";
            eleNode.aaa = "bbb";
            console.log(eleNode.aaa);
            console.log(eleNode.src);
            console.log(eleNode.tagName);
            console.log(eleNode["title"]);
            console.log(eleNode["className"]);
            console.log(eleNode["alt"]);

            //2.元素节点.方法();
            console.log(eleNode.getAttribute("id"));
            eleNode.setAttribute("id","你好");
            eleNode.setAttribute("ccc","ddd");

            eleNode.removeAttribute("id");
        }
    </script>

<div id="box" title="主体" class="asdfasdfadsfd">我爱你中国</div>

<script>

    //两种方式不能交换使用，赋值和获取值必须使用用一种方法。
    var div = document.getElementById("box");
    //元素节点.属性（元素节点[属性]）:绑定的属性值不会出现在标签上。
    div.aaaa = "1111";
    console.log(div.aaaa); //1111
    //get/set/removeAttribut: 绑定的属性值会出现在标签上。
    div.setAttribute("bbbb","2222");

    console.log(div.getAttribute("aaaa")); //null
    console.log(div.bbbb);  //undefined

</script>

DOM详解（属性操作）

10.DOM元素

DOM就是html文档的模型抽象。数据以树的形式在内存中排列。

节点就是DOM的组成。是一个对象，有属性和方法。获取方式有很多种。

节点分为元素节点（标签），文本节点，属性节点。

区分方法：nodeType: 1是标签,2是属性,3是文本

11.value和innerHTML和innerText和textContent

1.老版本的火狐不支持innerText，支持textContent

2.p不能嵌套p。h1不能嵌套h1。a连接内部不能嵌套a连接

<input id="inp1" type="text" value="我是inpput的value属性值"/>

<div id="box1">
    我是box1的内容
    <div id="box2">我是box2的内容</div>
</div>

<div id="box3">
    我是box1的内容
    <div id="box4">我是box2的内容</div>
</div>


<script>

    //value：标签的value属性。
    console.log(document.getElementById("inp1").value);

    //innerHTML：获取双闭合标签里面的内容。（识别标签）
    console.log(document.getElementById("box1").innerHTML);
    document.getElementById("box1").innerHTML = "<h1>我是innerHTML</h1>";

    //innerText：获取双闭合标签里面的内容。（不识别标签）（老版本的火狐用textContent）
    console.log(document.getElementById("box3").innerText);
    document.getElementById("box3").innerText = "<h1>我是innerText</h1>";


</script>

12. Style

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            border: 10px solid #000;
        }
    </style>
</head>
<body>

<div class="box" style="width: 100px;height: 100px;background-color: pink;">我爱你中国</div>

<script>
    
    var box = document.getElementsByTagName("div")[0];

//    1.样式少的时候使用
    console.log(box.style.backgroundColor);

//    2.style是对象
    console.log(box.style);
    console.log(typeof box.style);

    //3.值是字符串，没有设置值是“”；
    console.log(box.style.lineHeight);
    console.log(box.style.border);
//    4.命名规则，驼峰命名。和css不一样
    console.log(box.style.backgroundColor);
//    5.设置了类样式不能获取。（只和行内式交互，和内嵌和外链无关）
    console.log(typeof box.className);

    //6.box.style.cssText = “字符串形式的样式”；
    console.log(box.style.cssText);
    box.style.cssText = "width: 200px; height: 200px; background-color: red;line-height:200px;text-align:center;"


</script>
</body>
</html>

JS学习笔记2－DOM知识点1

事件

DOM概述

DOM详解（属性操作）

猜你喜欢