【复习】javascript 事件与节点_事件节点-优快云博客

事件三要素

事件源 ------谁来做
事件类型------怎么做(点击,双击,鼠标移入,移出等等等)
事件处理函数-------做什么

节点

在文档树上的内容，称之为节点

有哪些节点

元素节点
属性节点
文本节点
注释节点

节点的特性

节点类型----nodeType
节点名称----nodeName
节点内容 ----nodeValue

节点介绍

1.元素节点

        let box = document.getElementsByTagName('div')[0];
  
        console.log(box.nodeType);// 1
        console.log(box.nodeName);// DIV
        console.log(box.nodeValue);// null

        // 总结:
        // 元素节点的类型是:1; 节点名称是: 大写标签名; 节点内容:null

2.属性节点

        let box = document.getElementById('box');

        let attArr = box.attributes;

        console.log(attArr[0].nodeType);// 2
        console.log(attArr[0].nodeName);// id
        console.log(attArr[0].nodeValue);// box

        // 总结:
        // 属性节点的类型:2;节点名称:属性名;节点内容:属性值

3.文本节点和注释节点

        let box = document.getElementsByTagName('div')[0];

        // 获得所有子节点
        // 注意：回车也是文本
        //获取div节点，然后获取div节点下的子节点
        let childArr = box.childNodes;
        console.log(childArr);

        // 文本节点
        console.log(childArr[0].nodeType);//  3
        console.log(childArr[0].nodeName);//  #text
        console.log(childArr[0].nodeValue);// 文本内容

        // 注释节点
        console.log(childArr[1].nodeType);// 8
        console.log(childArr[1].nodeName);// #comment
        console.log(childArr[1].nodeValue);//注释内容


        // 总结:
        // 文本节点的类型:3;节点名称:#text;节点内容:文本内容
        // 注释节点的类型:8;节点名称:#comment;节点内容:注释内容

操作节点的相关方法

以下都是元素通过点语法去获取

1.查询

获得元素所有子节点------------childNodes
获得所有子元素节点------------children
获得元素子节点的个数---------childNodes.length / childElementCount

获得下一个节点 --------------nextSibling
获得下一个元素节点--------nextElementSibling

获得上一个节点--------------------previousSibling
获得上一个元素节点--------------previousElementSibling

获得第一个节点-----------------firstChild
获得第一个元素节点----------firstElementChild

获得最后一个节点-----------------lastChild
获得最后一个元素节点-----------lastElementChild

获得父节点----------parentNode
获得父元素节点----parentElement

2.操作

克隆节点，浅克隆：只会复制标签和属性--------cloneNode()
克隆节点，深克隆：标签,属性,内容--------cloneNode(true)
追加新元素，使用父元素调用 ---------------appendChild(新元素)
追加已有元素，使用父元素调用，是对已经存在的元素进行追加,那么是直接位移到结构最后面-----------appendChild(已有元素)

示例：

let newMm = meimei.cloneNode();//浅克隆
let newMm = meimei.cloneNode(true);//深克隆

box.appendChild(newMm);//追加新元素

//追加已有元素
let oldBox = chichi.cloneNode(true);
box2.appendChild(oldBox);

创建新元素，只有document可以调用---------------------createElement('标签名’)
删除子节点，父元素调用---------------------removeChild(子节点)

示例：

//创建新元素
let newBox = document.createElement('p');
newBox.innerText = '我就是那个朋友!!!';

删除子节点
content.removeChild(firstChild);

插入元素，在某个元素之前插入，父元素调用----------insertBefore(新元素,位置元素)
替换元素，替换指定元素，父元素调用-------------------replaceChild(新元素,旧元素)

示例：

            //插入元素
            let newP = document.createElement('p');
            newP.innerText = '疑是地上霜';

            // 插入元素的方法
            // 必须使用父元素来调用
            // insertBefore(新元素,位置元素)
            // 在某个元素之前插入
            let box = document.getElementById('box');
            box.insertBefore(newP,tag);

            // 再创建一个低头思故乡插入到之后
            // 并没有提供所谓的inserAfter
            // 依旧利用inserBefore
            // 找到tag的下一个元素来插入
            let newBox = document.createElement('p');
            newBox.innerText = '低头思故乡';
            box.insertBefore(newBox,tag.nextElementSibling);

            //替换元素
            let newBox = document.createElement('p');
            newBox.innerText = '替换替换';

            // 替换某个元素
            // 必须使用父元素调用
            // replaceChild(新元素,旧元素);
            box.replaceChild(newBox,tag);