DOM 重点核心(创建、增、删、改、查.....)

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

一、创建元素

1.document.write
2.innerHTML
3.createElement

使用方法

 1. document.write() 创建元素  如果页面文档流加载完毕，再调用这句话会导致页面重绘
        // var btn = document.querySelector('button');
        // btn.onclick = function() {
        //     document.write('<div>123</div>');
        // }

 var inner = document.querySelector('.inner');
        // for (var i = 0; i <= 100; i++) {
        //     inner.innerHTML += '<a href="#">百度</a>'
        // }``
        
```javascript
var create = document.querySelector('.create');
        for (var i = 0; i <= 100; i++) {
            var a = document.createElement('a');
            create.appendChild(a);
        }

二 增加元素

1. appendChild
2. insertBefore

// 先创建li
                var li = document.createElement('li');
                //先有li才赋值
                li.innerHTML = text.value;
                // 2.添加元素
                // ul.appendChild(li);
                // 最新留言放前面
                ul.insertBefore(li, ul.children[0]);

三、 删除元素

1. removeChild

 // 2.删除元素   
 node.removeChild(child) 
  node父级 child删除的元素位置

四、修改元素

主要修改dom的元素属性，dom元素的内容、属性, 表单的值等
1.修改元素属性： src、href、title等
2.修改普通元素内容： innerHTML 、innerText
3.修改表单元素： value、type、disabled等
4.修改元素样式： style、className

五、查询元素

1.DOM提供的API 方法： getElementById、getElementsByTagName 古老用法 不太推荐
2. H5提供的新方法： querySelector、querySelectorAll 提倡
3.利用节点操作获取元素： 父(parentNode)、子(children)、兄(previousElementSibling、nextElementSibling) 提倡

// 1.nextSibling 下一个兄弟节点 包含元素节点或者 文本节点等等
        // 2.previousSibling 是上一个兄弟节点，包含元素节点或者文本节点等等
        console.log(div.nextSibling);
        console.log(div.previousSibling);

// 用子节点  childNodes 所有的子节点，包括 元素节点，文本节点等
// parentNode.children 返回所有的子元素节点，其余不反回
// 返回第一个节点和最后一个节点 firstChild和lastChild 不管是文本节点还是元素节点
 //2 . firstElementChild和lastElementChild 返回的是第一元素和最后一元素节点

六、属性操作

1. setAttribute：设置dom的属性值
2. getAttribute：得到dom的属性值
3. removeAttribute移除属性

七、事件操作

给元素注册事件， 采取 事件源.事件类型 = 事件处理程序