【复习】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);