关于对dom节点相关的基础操作

创建节点

<div id="father">
  <h1>标题一</h1>
  <p id="p1">p1</p>
  <p class="p2">p2</p>
</div>

var h1=document.getElementsByTagName("h1");//通过标签名称创建节点
var p1=document.getElementById('p1');//通过标签id创建节点
var father=document.getElementById('father');
var p2=document.getElementsByClassName('p2');//通过标签类名创建节点

var childrens=father.children;//获取father节点下所有的子节点
var childrens=father.children[0];获取父节点下的指定下标节点

更新节点

var id1=document.getElementById('id1');
id1.innerText='abc';//id.innerText用于改变指定标签内的文本内容
id1.style.color='red';//改变指定id的标签字体颜色
id1.style.fontSize='20px';//改变指定id的标签字体的大小
id1.style.padding='2em';//改变指定id的内距

特别注意！！！

var h1=document.getElementsByTagName("h1");

var p2=document.getElementsByClassName('p2');

通过标签名和类寻找时，返回的是一个数组比如上述的获得的h1是一组h1标签

当你用js对其进行样式更改时如：

h1.style.color=‘red’    （这样是不可行的！！！！！！！）

应该要标注其下标来修改特定的h1，如：

h1[0].style.color=‘red’    （这样才是可以的！！！！！）

删除节点

//删除节点是一个动态的过程
father.children//返回father的子节点
var self=document.getElementById("p1");
var father=p1.parentElement;//让father成为p1的父级元素
console.log(father.children[2]);//可根据下标查看指定的子节点
father.removeChild(self);//从父节点中删除子节点

插入节点
//对于追加已存在的节点的方法
var js=document.getElementById("js");//已存在的节点
var list=document.getElementById('list');
var small=document.getElementById('last');

list.appendChild(js);//将js追加到list的子节点中，使js成为list的子节点
list.setAttribute("style","background-color:red")//通过setAttribute可以更改绝大部分属性肥肠好用！！！！


//对于追加不存在的节点的方法
var xinp=document.createElement('p');//创建一个新的p标签
xinp.id='xin';
xinp.setAttribute('id','xin');//与上一行作用等价都是用来修改属性，这个修改更方便
list.appendChild(xinp);
xinp.innerText='高木 西片';
xinp.style.fontSize='56px';
xinp.setAttribute('color','red');
list.insertBefore(small,ee);//在父节点中将新节点插到指定子节点的前面
list.replaceChild(new,old);用于替换当前节点，前面放新节点，后面放需要替换的节点