dom元素操作

初识元素事件

元素事件：某个元素发生一件事（被点击 click）

事件处理程序：是一个函数，发生了一件事，应该做什么事情

注册事件：将事件处理程序与某个事件关联

this关键字在事件处理程序中指代当前发生的事件元素

获取和设置元素属性

通用方式：getAttribute、setAttribute 一般获取自定义属性，但是只能获取到标签上现在书写属性,有的表单元素才能收到。

可识别属性

正常的HTML属性

dom对象.属性名：推荐

细节：

正常的属性即使没有复制，也有默认值
布尔属性在dom对象中，得到的是boolean
某些表单元素可以获取到某些不存在的属性
某些属性与标识符冲突，此时，需要更换属性名

自定义属性

HTML5 建议自定义属性使用data-作为前缀

如果遵从HTML5 自定义属性规范，可以使用dom对象.dataset.属性名控制属性

删除自定义属性

removeAttribute("属性名");
delete dom.dataset.属性名

获取和设置元素内容

innerHTML：获取和设置元素的内部HTML文本
innerText：获取和设置元素内部的纯文本，仅得到元素内部显示出来的文本
textContent：获取和设置元素内部的纯文本，textContent得到的是内部源代码中的文本

元素结构重构

父元素.appendChild(元素)：在某个元素末尾加入一个子元素
父元素.insertBefore(待插入的元素, 哪个元素之前)
父元素.replaceChild(替换的元素, 被替换的元素)

细节：

更改元素结构效率较低，尽量少用。

创建和删除元素

创建元素

document.createElement("元素名")：创建一个元素对象
- document.createTextNode("文本")
- document.createDocumentFragment(): 创建文档片段

元素得增加‘删除’修改都是针对结构得变化，要尽可能少操作。

    var ul = document.getElementById("ul1");
    var frag = document.createDocumentFragment();//创建一个代码片段
    for (var i = 1; i <= 100; i++) {
        var li = document.createElement("li");
        li.innerText = "选项" + i;
        frag.appendChild(li);//将li添加到代码片段中
    }

    ul.appendChild(frag);//将代码片段添加到ul中

    // 此处不创建片段的话，将会执行100次的元素添加，创建只执行一次m，浏览器重绘也只有一次。

dom对象.cloneNode(是否深度克隆)：复制一个新的dom对象并返回

childNodes也是实时集合

删除元素

removeChild：父元素调用，传入子元素
remove：把自己删除

dom元素操作 ​

初识元素事件 ​

获取和设置元素属性 ​

可识别属性 ​

自定义属性 ​

获取和设置元素内容 ​

元素结构重构 ​

创建和删除元素 ​

创建元素 ​

删除元素 ​