JS和DOM相关的操作

参考文章：https://blog.csdn.net/hj7jay/article/details/53389522

节点操作

查找节点

var mydiv = document.getElementById("mydiv");    //通过id查找
var mydiv = document.getElementsByClassName("mydiv");    //通过类名查找
var mydiv = document.getElementsByTagName("div");    //通过标签名查找
var mydiv = document.getElementsByName("mydiv");    //通过元素的name属性查找
var mydiv = document.querySelector("mydiv");    //返回指定选择器的第一个元素
var mydiv = document.querySelectorAll("mydiv");    //返回指定选择器的元素列表
var mydiv = document.forms;    //获取当前页面所有form

创建节点

//createElement
var elem = document.createElement("div");
elem.id = 'test';
elem.style = 'color: red';
elem.innerHTML = '我是新创建的节点';
document.body.appendChild(elem);

//createTextNode 创建文本节点
var node = document.createTextNode("我是文本节点");
document.body.appendChild(node);

还有一种文档碎片，当我们需要创建许多节点的时候，可以先把节点都存放在文档碎片中，最后再把文档碎片添加到对应节点上

<ul id="ul"></ul>
<script>
(function()
{
    var start = Date.now();
    var str = '', li;
    var ul = document.getElementById('ul');
    var fragment = document.createDocumentFragment();
    for(var i=0; i<10000; i++)
    {
        li = document.createElement('li');
        li.textContent = '第'+i+'个子节点';
        fragment.appendChild(li);
    }
    ul.appendChild(fragment);
})();
</script>

修改节点

//appendChild 将child节点添加到parent节点最后
parent.appendChild(child);

//insertBefore 在parentNode中，将newNode节点插入到refNode节点的前面
parentNode.insertBefore(newNode, refNode);

//removeChild 用于删除指定的子节点并返回子节点
var deletedChild = parent.removeChild(node);
//deletedChild指向被删除节点的引用，它仍然存在于内存中，可以对其进行下一步操作。
//另外，如果被删除的节点不是其子节点，则将会报错，所以一般这么删除
function removeNode(node){
    if(!node) return;
    if(node.parentNode) node.parentNode.removeChild(node);
}

//replaceChild 用于将一个节点替换另一个节点
parent.replaceChild(newChild, oldChild);

节点关系

DOM中的节点相互之间存在着各种各样的关系，如父子关系，兄弟关系等

父关系API

• parentNode ：每个节点都有一个parentNode属性，它表示元素的父节点。Element的父节点可能是Element，Document或DocumentFragment；
• parentElement ：返回元素的父元素节点，与parentNode的区别在于，其父节点必须是一个Element元素，如果不是，则返回null；

子关系API

• children ：返回一个实时的 HTMLCollection ，子节点都是Element，IE9以下浏览器不支持；
• childNodes ：返回一个实时的 NodeList ，表示元素的子节点列表，注意子节点可能包含文本节点、注释节点等；
• firstChild ：返回第一个子节点，不存在返回null，与之相对应的还有一个 firstElementChild ；
• lastChild ：返回最后一个子节点，不存在返回null，与之相对应的还有一个 lastElementChild ；

兄弟关系型API

• previousSibling ：节点的前一个节点，如果不存在则返回null。注意有可能拿到的节点是文本节点或注释节点，与预期的不符，要进行处理一下。
• nextSibling ：节点的后一个节点，如果不存在则返回null。注意有可能拿到的节点是文本节点，与预期的不符，要进行处理一下。
• previousElementSibling ：返回前一个元素节点，前一个节点必须是Element，注意IE9以下浏览器不支持。
• nextElementSibling ：返回后一个元素节点，后一个节点必须是Element，注意IE9以下浏览器不支持。

元素属性

//setAttribute 设置元素属性
element.setAttribute(name, value);

//getAttribute 返回指定的特性名相应的特性值，如果不存在，则返回nul
var value = element.getAttribute("class");

//removeAttribute 用于彻底删除元素特性  IE6以前不支持
div.removeAttribute('class')

元素样式

直接修改元素的样式

elem.style.color = 'red';
elem.style.setProperty('font-size', '16px');
elem.style.removeProperty('color');

动态添加样式规则

var style = document.createElement('style');
style.innerHTML = 'body{color:red} #top:hover{background-color: red;color: white;}';
document.head.appendChild(style);