javascript学习笔记09(DOM)

API：Application Programming Interface，应用程序编程接口，任何开发语Web-API：

浏览器提供的一套操作浏览器功能和页面元素的API（BOM DOM）言都有自己的API

文档：document

元素：页面中所有标签elements

节点：页面中所有内容（标签、属性、文本[文字/换行/空格]

根节点：html

节点的属性：

nodeType：节点的类型，1---标签节点、2---属性节点、3---文本节点

nodeName：节点的名字，标签节点---标签名大写、属性节点---属性名小写、文本节点---#text

nodeValue：节点的值，标签节点---null、属性节点---属性值、文本节点---文本

<input id="btn" class="butt" type="button" value="终极点我">
<input id="btn2" class="butt" type="button" value="终极点我">
<script>
    // 1、找节点、找对象
    // var btn = document.getElementById("btn");
    // var btn = document.getElementsByClassName("butt");
    console.log(btn);

    // 2、为该按钮节点注册点击事件
    btn.onclick = function() {
        alert("我又被点了......");
        console.log("1111111");
    }
</script>

如果选定的标签中有多个相同选项,则自动生成伪数组

伪数组：

1.具有.length属性

2.按索引的方式操作数据和对象

3.不具有.pop()、.push()等方法

// 属性：写在标签里

// 样式：写在css样式表

// 凡是在css中多个单词并且用-连接的，在js操作的时候，不能用-，要遵循驼峰命名法

获取元素的几种方式

        // 1.通过id名获取
        var idP = document.getElementById("pp");// js对象
        // 2.通过类名获取
        var classes = document.getElementsByClassName("cls");// 伪数组
        // 3.通过标签名获取
        var marks = document.getElementsByTagName("span");// 伪数组
        // 4.通过name名获取
        var names = document.getElementsByName("username");// 伪数组

        // 5.通过选择器获取对象
        var selector01 = document.querySelector("#pp");//id
        var selector02 = document.querySelector(".cls");//class
        var selector03 = document.querySelector("span");标签
        var selector04 = document.querySelector("div>p");// 选择器  
        //都是js对象  只获得第一个符合条件的

        // 6.通过选择器获取全部符合条件的对象
        var selectors = document.querySelectorAll(".cls");// 伪数组
        console.log(selectors);

焦点

下面是一个用来模拟表单验证的例子

<p>
        昵称：
        <input id="username" type="text" value="请输入昵称">
        <span id="spanId"></span>
</p>

<script>
        // 获取焦点：onfocus
        // 失去焦点：onblur
        var username = document.getElementById("username");
        var spans = document.getElementById("spanId");
        username.onfocus = function() {
            if(this.value == "请输入昵称") {
                this.value = "";
            }
        }
        // 判断当前用户所输入的字符长度2-6，不满足则提示用户输入格式有误
        username.onblur = function() {
            if(this.value == "") {
                this.value = "请输入昵称";
            }else {
                if(this.value.length < 2 || this.value.length > 6) {
                    spans.innerText = "输入格式有误，请重新输入！";
                    spans.style.color = "red";
                    username.onfocus = function() {
                        this.value = "";
                        spans.innerText = "";
                    }
                }else {
                    spans.innerText = "√";
                    spans.style.color = "green";
                    return this.value;
                }
            }
        }
</script>

innerText 置设/获取文本内容，但只是文本内容

innerHTML 置设/获取文本内容，获取所有内容，可以解析标签

自定义属性

* 标签本身没有这个属性，我们自己加的 ---> 自定义属性   目的：存储数据

* 获取自定义属性对应的值getAttribute("自定义属性名");

* 设置自定义属性setAttribute("属性名", "属性值");

* 移除自定义属性removeAttribute("属性名")，可以移除自带属性

选择器

        var box = document.getElementById("box");
        console.log(box.childNodes);// 子节点，伪数组
        console.log(box.children);// 子元素，伪数组
        console.log(box.parentNode);// 父节点，js对象
        console.log(box.parentElement);// 父元素，js对象

        console.log("================================");

        var uuObj = document.getElementById("uuObj");
        console.log(uuObj.firstChild);// 第一个子节点
        console.log(uuObj.firstElementChild);// 第一个子元素
        console.log(uuObj.lastChild);// 最后一个子节点
        console.log(uuObj.lastElementChild);// 最后一个子元素

        console.log("================================");

        var three = document.getElementById("third");
        console.log(three.previousSibling);// 前一个兄弟节点
        console.log(three.previousElementSibling);// 前一个兄弟元素
        console.log(three.nextSibling);// 前一个兄弟节点
        console.log(three.nextElementSibling);// 前一个兄弟元素

元素的创建

三种方式:

1.document.write("标签的代码及内容")   -->缺陷:页面上所有的静态结构会被全部覆盖,页面重构(最好不使用)

2.对象.innerHTML = "标签及内容"

3.document.createElemrnt("标签名")   -->最常用

元素创建函数(用于动态创建)

1.创建:document.createElemrnt("标签名")

2.追加到父级元素的末尾:父对象.appendChild("创建的子对象")

3.添加到第一个子元素前面 --- insertBefore()方法在指定的已有的节点之前插入新的节点

4.移除父元素中第一个子元素 --- removeChild("子元素")

5.复制  克隆一个元素 --- cloneNode()

鼠标移入移出(类似于html里的hover)

*鼠标移入   onmouseover

*鼠标移出   onmouseout

最后可以创建一个自己的common.js文件将常用的函数保存在里面

需要使用的时候在script标签里加上src="common.js的地址"

给元素绑定事件

1.对象.addEventListener("事件类型",事件处理函数,false(默认值));   IE8不支持(了解一下)

2.对象.attachEvent("有no的事件类型",事件处理函数); chrome和火狐不支持,是ie特有的方法

**兼容代码  

为任意元素绑定任意事件,执行任意的处理函数

@params:对象  事件类型  回调函数

//element   对象
//type     事件类型
//fn        对象函数

function addEventListener(element,type,fn){
    if(element.addEventListener){
        element.addEventListener(type, fn, false);
    
    }else if(element.attachEvent){
        element.attachEvent("on" + type, fn);
    }else{
        element["on" + type] = fn;
    }
}

给元素解绑事件

removeEventListener("事件类型", "解绑的事件函数",false);    IE8不支持

detachEventListener("有no的事件类型",事件处理函数)   IE8支持

event鼠标事件对象

console.log(event);// IE8没有事件对象

阻止事件冒泡

event.stopPropagation();// IE8不支持

window.event.cancelBubble = true;// IE8独有

*事件捕获是从外到内触发事件，事件冒泡是从内到外触发事件。

默认绑定的是事件冒泡

addEventListener或attachEvent给元素绑定事件 最后一个参数 true是事件捕获 flalse是事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box01 {
            width: 300px;
            height: 300px;
            background-color: pink;
            margin: auto;
        }
        #box02 {
            width: 200px;
            height: 200px;
            background-color: lightgreen;
        }
        #box03 {
            width: 100px;
            height: 100px;
            background-color: lightskyblue;
        }
    </style>
</head>
<body>
    <div id="box01">
        <div id="box02">
            <div id="box03"></div>
        </div>
    </div>

    <script>
        /* 
            事件的三个阶段：event.eventPhase通过这个属性直到当前的事件是什么阶段
            返回值：
                1--->捕获阶段
                2--->目标阶段
                3--->冒泡阶段
            
            冒泡阶段：从里到外
            捕获阶段：从外到里

            一般都是冒泡阶段
        */

        // 给三个div注册点击事件
        var objs = [document.getElementById("box01"), document.getElementById("box02"), document.getElementById("box03")];
        objs.forEach(function(item, index) {
            item.addEventListener("click", function(e) {
                console.log(this.id + "=======" + e.eventPhase + "=======" + index);
            }, false)// 为true是捕获，为false是冒泡
        })
    </script>
</body>
</html>