获取元素节点时，必须等到DOM树加载完成后才能获取。两种处理方式：（1）将JS写在文档最后；（2）将代码写入window.onload函数中；
//通过ID来查看元素属性
var li = document.getElementById("first");
//通过类名来查看元素属性，返回元素数组
var lis1 = document.getElementsByClassName("cls");
//通过名字来查看元素属性，返回数组
var lis2 = document.getElementsByName("name");
//通过标签名来查看元素属性，返回数组
var lis3 = document.getElementsByTagName("li");
这一系列方法，也可以先选中一个DOM节点，在从选中的DOM节点的子节点里，选择需要的节点：
document.getElementById("div1").getElementsByTagName("li")[0];
querySelector() 方法仅仅返回匹配指定选择器的第一个元素。
var dq1 = document.querySelector("#id");
querySelectorAll() 方法返回文档中匹配指定 CSS 选择器的所有元素，返回 NodeList 对象。
var dqs1 = document.querySelectorAll("#div1 li");
attributes: 获取当前节点的所有属性节点。 返回数组格式。
document.getElementsByTagName("a")[0].getAttribute("target");
//element.setAttribute("属性名","属性值");
document.getElementsByTagName("INPUT")[0].setAttribute("type","button");
使用setAttribute设置class和style。
document.getElementById("first").setAttribute("class","class1");
document.getElementById("first").setAttribute("style","color:red;");
使用 className设置元素类名
document.getElementById("first").className = "class1";
使用 style 样式 直接修改单个样式。注意样式名必须使用驼峰命名法。
document.getElementById("first").style.fontSize = "18px";
使用 style 或 style.cssText 设置样式：
// IE不兼容
document.getElementById("first").style = "color:red;";
//cssText 属性用于设置或者返回元素声明的内联样式。
document.getElementById("first").style.cssText = "color:red;";
innerHTML：取到或设置一个节点中的HTML代码。
innerText：取到或设置一个节点中的文本，会判断HTML标签样式，如果该标签隐藏，则该标签文本不会输出
<div class="container">
aaaa
<h1 class="h1 h2">container里的标题1</h1>
<h2 style="display: none">隐藏内容</h2>
bbbb
</div>
let cont = document.getElementsByClassName(‘container‘)[0];
console.log(cont.innerHTML);
//输出：
aaaa
<h1 class="h1 h2">container里的标题1</h1>
<h2 style="display: none">隐藏内容</h2>
bbbb
console.log(cont.innerText);
//输出：
aaaa
container里的标题1
bbbb
console.log(cont.textContent);
//输出：
aaaa
container里的标题1
隐藏内容
bbbb
子节点：
childNodes： 获取当前节点的所有子节点（包括元素节点和文本节点）。
children： 获取当前节点的所有元素子节点（不包含文本节点）。
firstChild： 获取第一个子节点，包括回车等文本节点；
firstElementChild： 获取第一个元素节点。 不含文本节点；
lastChild： 获取最后一个子节点，包括回车等文本节点；
lastElementChild： 获取最后一个子节点，不含文本节点；
父节点：
parentNode: 获取当前节点的父节点。
同胞节点：
previousSibling： 获取当前节点的前一个兄弟节点，包括文本节点；
previousElementSibling： 获取当前节点的前一个元素兄弟节点；
nextSibling：获取当前节点的后一个兄弟节点，包括文本节点；
nextElementSibling：获取当前节点的后一个元素兄弟节点；
document.createElement("div")：
document.getElementById("myList").insertBefore(newItem,existingItem); //existingItem 是指父节点中已经存在的子节点，插入的新节点就插在这个子节点的位置
document.getElementById("myList").insertBefore(newItem,parEle.childNodes[1]);
父节点.removeChild(子节点)： 从父节点中，删除指定子节点。
父节点.replaceChild(新节点,老节点)： 从父节点中，用新节点替换老节点。
document.createTextNode(text)
var btn=document.createTextNode("Hello World");
原文：https://www.cnblogs.com/wenxuehai/p/10453092.html