Dom（Document Object Model）.
document.getElementById(“mydiv”);注：JS从页面获取任何内容都是一个字符串。
mydiv.innerHTML=“内容”。
相同的id在页面只能出现一次（若两个及以上，会输出第一个）。
JS有关的四件事：1.获取标签ID方式；
2.获取、更改内容：element.innerHTML
3.获取、更改标签的属性；
4.更改样式。
直接获取节点：
xTag.getElementsByTagName(标签名)；
xTag可以是document,也可以是某类型标签的数组。
let box =document.getElementById(“box”);
let divs = box.getElementsByTagName(“div”);//获取box下所有的div
间接获取节点：子节点：
element.childNodes 得到子标签，包括换行
element.children 得到子标签
节点类型 modeType,为1才是标签
节点名字 nodeName,节点名称是大写字母（或TagName）
节点的类名 className
element.firstChild 获取当前节点的第一个子节
element.firstElementChild 获取当前节点的第一个标签子节点
element.lastChild 获取当前节点的最后一个子节
element.lastElementChild 获取当前节点的最后一个标签子节点
间接获取节点：父节点
element.parentNode 父节点（有且只有一个节点）；
element.prevousSibling 紧挨着的上一个节点，第一个节点的prevousSibling为null
element.nextSibling 紧挨着的下一个节点，最后一个节点的nextSibling为null
element.prevousElementSibling 紧挨着的上一个标签节点，第一个节点的prevousSibling为null
element.nextElementSibling 紧挨着的下一个标签节点，最后一个节点的prevousSibling为null
/*
-
获取box下面所有的子标签；
-
所有的p标签；
-
所有类为myc的子标签；
-
所有类为myc的标签；
-
所有div子标签。
*/
{
let box = document.getElementById(“box”);
// 所有的p标签： 子，孙
let pAll = box.getElementsByTagName(“p”);// 所有类为myc的子标签
let childs = box.children;
let mycChild = []; // 空数组
for(let i=0 ; i<=childs.length-1; i++){
if( childs[i].className === “myc” ){
mycChild[ mycChild.length ] = childs[i];
}
}
}
{
// 所有类为myc的标签: 子，孙
let box = document.getElementById(“box”);
let tags = box.getElementsByTagName("*");
let myc = [];
for(let i=0 ; i<=tags.length-1; i++){
if( tags[i].className === “myc” ){
myc[ myc.length ] = tags[i];
}
}
}
{
//所有div子标签。
let box = document.getElementById(“box”);
let childs = box.children;
let div = []; // 空数组
for(let i=0 ; i<=childs.length-1; i++){
if( childs[i].nodeName === “DIV” ){
div[ div.length ] = childs[i];
}
}
}
/*
-
创建一个 div：
-
它的内容： “你好，世界”
-
它的class “mydiv”
-
它的 id “myid”
-
*/
{
// 把新div放在box的前面,方法一：
let newDiv = document.createElement(“div”);
let box = document.getElementById(“box”);
newDiv.innerHTML = “你好，世界”;
newDiv.className = “mydiv” ;
newDiv.id = “myid” ;box.parentNode.insertBefore( newDiv, box );
}
{
// 把新div放在box的后面，方法二：
let newDiv = document.createElement(“div”);
let box = document.getElementById(“box”);
newDiv.innerHTML = “你好，世界”;
newDiv.className = “mydiv” ;
newDiv.id = “myid” ;
box.nextSibling.parentNode.insertBefore( newDiv, box.nextSibling );
}
{
//删除box
let box = document.getElementById(“box”);
box.parentNode.removeChild( box );
}