前端之JavaScript 补充

    1. BOM

        window

            location.href = "https://www.sogo.com"

            location.reload()  // 重新加载当前页

            location.href

        DOM

            document

                1. 节点分为：

                    文档节点 document

                    文本节点 标签的文本

                    属性节点 id, class ...

                    标签节点 div,span, h1 ...

                2. 寻找节点

                    1. 基本查找

                        标签名：document.getElementsByTagName

                        ID：    document.getElementByID

                        class名: document.getElementsByClassName

                    2. 间接查找

                        我的上一个标签： previousElementSibling

                        我的下一个标签： nextElementSibling

                        我的父标签：     parentElement

                        我的子标签：     children

                        我的第一个子标签：firstElementChild

                        我的最后一个子标签：lastElementChild

                2. 修改标签属性或样式

                    1. 修改文本信息

                        ele.innerText               获取文本节点的内容（包括子标签的文本）

                        ele.innerText="字符串"      修改标签的文本信息

                    2. 文档内容（HTML内容）

                        ele.innerHTML               获取文档内容

                        ele.innerHTML=“<h1>好</h1>” 赋值HTML内容

                    3. 修改样式

                        1. classList

                            ele.className               获取所有的class类名（字符串类型）

                            ele.classList               获取所有的class类名

                            ele.classList.contains(cls) 判断有没有某个class

                            ele.classList.add(cls)      添加一个class类名

                            ele.classList.remove(cls)   删除class类名

                            ele.classList.toggle(cls)   切换（有就删除，没有就添加）

                        2. ele.style.样式=""

                            注意：有中横线的CSS样式要转成驼峰形式

                            ele.style.backgroundColor="red"

                    4. 属性

                        ele.attributes  获取所有的属性信息

2. RegExp（正则）

    1. 正则表达式不能加空格

    2. 当你设置了全局的g标志位，需要注意lastIndex  --> 每一次匹配上之后会把lastIndex设置为下一位索引值

    3. undefined他帮你转成"undefined"来做正则校验

一、节点操作

　　常用的节点主要为document和element，上一篇内容我们讲述了节点的查找和节点属性的操作，本节则主要列述节点本身的创建、增加、删除、替换等操作。

1、创建节点

　　通过如下语法可以创建一个元素标签，可以对创建的元素标签进行赋值操作和属性操作，应用实例如下：

var ele_img=document.createElement("img");     
//创建节点对象ele_img,为img标签元素

ele_img.src="meinv.jpg";        //标签属性的赋值操作，也可以通过原生JS的方式进行

ele_img.height="400";

ele_img.width="250";

2、增加节点

　　增加节点操作首先需要找到一个父级节点，对父级节点进行增加节点操作，因为增加节点时需要有新的节点对象，即待被增加的节点标签，故其通常和创建节点一起使用，应用实例如下：

var ele_outer=document.getElementsByClassName("outer")[0];     
//获得一个父级节点ele_outer

var ele_append=document.getElementsByClassName("append")[0];  
 //通过绑定事件形式触发增加节点

ele_append.onclick=function () {

        var ele_img=document.createElement("img");  
                               //创建待插节点

        ele_img.src="meinv.jpg";

        ele_img.height="400";

        ele_img.width="250";

        ele_outer.appendChild(ele_img)//追加节点，会将节点追加在最后

    };

上述append节点的方式会把增加的节点追加在父级节点中所有子标签的最后面，如果需要指定增加位置，需要用insertchild的方式，此时需要指定一个已存在的子标签，实例如下：

var ele_outer=document.getElementsByClassName("outer")[0];
//获得一个父级节点

var ele_p=document.getElementsByTagName("p")[0]; 
//获得父级节点下的一个子节点，作为插入节点参考节点

var ele_append=document.getElementsByClassName("append")[0];

ele_append.onclick=function () {

        var ele_img=document.createElement("img");//创建待插节点

        ele_img.src="meinv.jpg";

        ele_img.height="400";

        ele_img.width="250";

        ele_outer.insertBefore(ele_img,ele_p)
　　　　//插入节点，语法顺序为：（待插入节点，参考节点）

    };

3、删除节点

　　同样删除节点也是需要指定父级节点，通过移除其某个子级元素的方式将某个子级元素进行删除，具体实例如下：

var ele_outer=document.getElementsByClassName("outer")[0]; //获得一个父级节点对象

var ele_p=document.getElementsByTagName("p")[0];//获得父级标签下的一个子级节点对象

var ele_delete=document.getElementsByClassName("delete")[0];

ele_delete.onclick=function () {

        ele_outer.removeChild(ele_p)      //删除节点

    };

4、节点替换

　　节点替换也是需要找到一个父级节点，对节点下的某本来存在的个子标签进行替换，当然还需创建一个新替换标签，替换掉需要被替换的元素，具体应用实例如下：

var ele_outer=document.getElementsByClassName("outer")[0];//获得一个父级节点对象

var ele_p=document.getElementsByTagName("p")[0]; 
//获得父级节点下一个需要被替换的子节点对象

var ele_replace=document.getElementsByClassName("replace")[0];

ele_replace.onclick=function (){

        var ele_h1=document.createElement("h1"); //创建一个新替换对象

        ele_h1.innerText="美女系列";

        ele_outer.replaceChild(ele_h1,ele_p)

  //替换节点，语法顺序为（新替换节点，旧被替换节点）

        }

5、复制节点

　　具体实例如下：

var ele_outer=document.getElementsByClassName("outer")[0];

var ele_copy=ele_outer .cloneNode();

        console.log(ele_copy) //结果即为outer父级标签，不包含任何子标签

var ele_copy=ele_outer .cloneNode(true);

        console.log(ele_copy)//结果为outer父级标签，包含所有子标签

二、模态框实例

1、事件委派

　　通常我们为了给某类标签元素绑定事件时，我们都是逐一或者通过循环的方式给其进行绑定事件操作，但是这种方式会带来一个问题是：后来插入的同类型标签也xu要有这样的事件时，之前绑定的事件的结果对后插入的同类元素无效，原因是程序在启动时已经加载了之前绑定事件的代码，那时后来新添加的元素并不在其中。

　　此问题就可以通过事件委派的方式进行解决，所谓事件委派就是通过一定形式对其父级标签进行委派（绑定事件），其结果就是父级下的所有后代都可以执行事件的内容，可以通过条件限制使得只有满足条件的后代元素才能执行事件内容。应用实例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<button class="add">添加</button>

<ul class="outer">

    <li>111</li>

    <li class="c2">222</li>

    <li>333</li>

</ul>

<script>

    //无条件事件委派：父级节点ele_outer下的所有后代都会在被点击时会执行alert，即使后来插入的数据

    var ele_outer=document.getElementsByClassName("outer")[0];

    ele_outer.addEventListener("click",function (event) {

        alert(event.target.innerText)  //event.target等价于this

    });

    //条件事件委派：通过条件限制，对父级中的后代选择性进行执行，如下只有classname="c2"的才会执行事件

    var ele_outer=document.getElementsByClassName("outer")[0];

    ele_outer.addEventListener("click",function (event) {

        if(event.target.className=="c2"){

            alert(event.target.innerText)

        }

    });

    //插入数据事件

    var ele_add=document.getElementsByClassName("add")[0];

    ele_add.onclick=function () {

        var ele_li=document.createElement("li");

        ele_li.innerText="444";

        ele_outer.appendChild(ele_li)

    }

</script>

</body>

</html>

巴特西

前端之JavaScript 补充

一、节点操作

最新文章

热门文章