事件

最新推荐文章于 2024-02-26 17:59:26 发布

「已注销」

最新推荐文章于 2024-02-26 17:59:26 发布

阅读量296

点赞数

文章标签： JS基础篇第四天 JS基础篇第五天

本文链接：https://blog.csdn.net/Sun_36/article/details/53152928

版权

事件

1.1 概述
    JS是以事件驱动为核心的一门语言。
1.2 事件三要素
    事件源、事件、事件驱动程序。
    三句话：获取事件源、绑定事件、书写事件驱动程序。
    获取事件源：document.getElementById(“box”);
    绑定事件：  box.onclick = function(){ 程序 };
    书写事件驱动程序：以后要学习的关于DOM的操作。
1.2.1   事件有哪些

1.3 案例

第2章 DOM概述
1.4 解析过程
HTML加载完毕，渲染引擎会在内存中把HTML文档，生成一个DOM树，getElementById是获取内中DOM上的元素。然后操作的时候修改的是该元素的属性。
1.5 DOM (文档对象模型)
document是文档对象模型的一部分。
DOM是一个复合的数据类型。

1.6 DOM的数据结构（树状）

1.7 HTML的组成部分为节点（ Node ）
    在HTML当中一切都是节点……
    由结构图中我们可以看到，整个文档就是一个文档节点。
    每一个HMTL标签都是一个元素节点（标签）。
    标签中的文字则是文字节点。（文本）
    标签的属性是属性节点。（属性）
1.8 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];取数组中第一个元素
1.9 DOM 访问关系（节点的获得）
    节点的访问关系，是以属性的方式存在的。
    DOM的节点并不是孤立的，因此可以通过DOM节点之间的相对关系对它们进行访问。

         父节点
        var box2 = document.getElementById("box2");
        console.log(box2.parentNode);


        兄弟节点
       box2.nextElementSibling  || box2.nextSibling;
        box2.previousElementSibling || box2.previousSibling


        子节点
        box2.firstElementchild  || box2.firstChild;
        box2.lastElementchild || box2.flastChild


        所有子节点
         childNodes // children;

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

1.9.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
1.9.3   单个子节点
    firstChild：调用者是父节点。IE678中指第一个子元素节点（标签）。在火狐谷歌IE9+以后都指的是第一个节点（包括空文档和换行节点）。
    firstElementChild:在火狐谷歌IE9都指的第一个元素节点。
    第一个子节点=父节点.firstElementChild || 父节点.firstChild

    lastChild:调用者是父节点。IE678中指最后一个子元素节点（标签）。在火狐谷歌IE9+以后都指的是最后一个节点（包括空文档和换行节点）。
    lastElementChild：在火狐谷歌IE9都指的最后一个元素节点。
1.9.4   所有子节点
    childNodes：它是标准属性，它返回指定元素的子元素集合，包括HTML节点，所有属性，文本节点   （他还是W3C的亲儿子 ）

火狐谷歌等高本版会把换行也看做是子节点
nodeType==1时才是元素节点(标签)
nodeType == 1 表示的是元素节点记住元素就是标签
nodeType == 2 表示是属性节点了解
nodeType == 3 是文本节点了解
子节点数组 = 父节点.childNodes; 获取所有节点。
children：非标准属性，它返回指定元素的子元素集合。
但它只返回HTML节点，甚至不返回文本节点，虽然不是标准的DOM属性，但它和innerHTML方法一样，得到了几乎所有浏览器的支持。
children在IE6/7/8中包含注释节点
在IE678中，注释节点不要写在里面。
子节点数组 = 父节点.children; 用的最多。
1.9.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;
            }
    定义一个函数。必须传递自己。定义一个数组，获得自己的父亲，在获得自己父亲的所有儿子（包括自己）。遍历所哟与的儿子，只要不是自己就放进数组中。
1.9.6   要明白两个属性（！！！重点！！！）
    parentNode   和  children  这两个属性。
    1.10    DOM节点操作 （！！！！！重点！！！！！）
    节点的访问关系都是属性。节点的操作都是函数或者方法。
1.10.1  创建节点
    使用方法是这样的document.createElement();
    新的标签（节点） = document.createElement(“标签名”);
1.10.2  插入节点（使用节点）
        使用方法： 父节点.appendChild();
        父节点.appendChild(新节点); 父节点的最后插入一个新节点

        使用方法：父节点.insertBefore(要插入的节点，参考节点)；
        父节点.insertBefore(新节点,参考节点)在参考节点前插入;
        如果参考节点为null，那么他将在节点最后插入一个节点。
1.10.3  删除节点   
    用法：用父节点删除子节点。
    父节点.removeChild（子节点）；必须制定要删除的子节点
    节点自己删除自己：
    不知道父级的情况下，可以这么写：node.parentNode.removeChild(node)
1.10.4  复制节点 （    oldNode.cloneNode（true）  ）
    想要复制的节点调用这个函数cloneNode()，得到一个新节点。 方法内部可以传参，入股是true，深层复制，如果是false，只复制节点本身。
    新节点=要复制的节点.cloneNode(参数) ; 参数可选复制节点
    用于复制节点， 接受一个布尔值参数， true 表示深复制（复制节点及其所有子节点）， false 表示浅复制（复制节点本身，不复制子节点）
1.10.5  节点属性（节点.属性）
    获取：getAttribute(名称)
    设置：setAttribute(名称, 值)
    删除：removeAttribute(名称)
    注意：IE6、7不支持。
    调用者：节点。   有参数。   没有返回值。
    每一个方法意义不同。

第3章 DOM详解（属性操作）
1.11 DOM元素
DOM就是html文档的模型抽象。数据以树的形式在内存中排列。
节点就是DOM的组成。是一个对象，有属性和方法。获取方式有很多种。
节点分为元素节点（标签），文本节点，属性节点。
区分方法：nodeType: 1是标签,2是属性,3是文本
console.dir(document);//文档节点。

    通过id获取元素节点。
    console.dir(document.getElementById("box"));//只有document能够调用

    通过标签名获取元素节点.返回值为数组
    console.log(document.getElementsByTagName("div"));//document和元素节点都能够调用

    通过class属性获取的元素节点.返回值为数组.IE678不支持。
    console.log(document.getElementsByClassName("box"));//document和元素节点都能够调用

1.12 value和innerHTML和innerText和textContent
1.老版本的火狐不支持innerText；IE678不支持textContent
2.p不能嵌套p。h1不能嵌套h1。a连接内部不能嵌套a连接

        value是带有value属性的标签拥有的值。一般是单闭合标签的属性。（可赋值，也可获取值）
        console.log(document.getElementById("inp").value)

        innerHTML属性，双闭合标签两个标签之间的内容。（识别标签）（可赋值，也可获取值）
        console.log(document.getElementById("box").innerHTML);
        document.getElementById("box").innerHTML = "<li>我是赋值的li</li>";

        innerText属性，双闭合标签两个标签之间的内容。（不识别标签）（可赋值，也可获取值）
        console.log(document.getElementById("box2").innerText);

        textContent属性和innerText类似，老版本的火狐支持该属性。（可赋值，也可获取值）