原生JS操做DOM

经过html dom能够访问javascript html文档的全部元素。
当网页被加载时，浏览器会建立页面的文档对象模型（Document Object Model）。

经过可编程的对象模型，JavaScript 得到了足够的能力来建立动态的 HTML。
JavaScript 可以改变页面中的全部 HTML 元素
JavaScript 可以改变页面中的全部 HTML 属性
JavaScript 可以改变页面中的全部 CSS 样式
JavaScript 可以对页面中的全部事件作出反应

咱们须要经过javascript操做html元素，查找这些html元素有三种方法：
1.经过id查找：
var doc=document.getElementById("idName");
2.经过标签名查找：
var doc=document.getElementsByTagName("tagName");
3.经过类名查找：
var doc = document.getElementsByClassName("className");

html dom容许javascript改变html元素的内容。
1.改变html输出流
在javascript中，document.write()可用于直接向html输出流直接写内容。
tip:毫不要使用在文档加载以后使用 document.write()。这会覆盖该文档。
2.改变html内容
修改html内容的最简单的方法是使用innerHTML属性。如：
document.getElementById(idName).innerHTML="文本内容"
3.改变html属性
document.getElementById(id).attribute='new value'，如：
document.getElementById(idName).src = 'location.png'

html dom容许javascript改变html元素样式。
document.getElementById(id).style.property=new style，如：
document.getElementById(idName).style.color="red";

html dom使javascript有能力对html事件作出反应。
你可使用事件属性，好比：
<button onclick="func()">点击</button>
你也可使用javascript来向html元素分配事件，好比：
document.getElementById("idName").onclick=function(){...};

添加和删除节点（HTML 元素）。（重点温习的内容）
如需向html dom添加新元素，必须先添加元素节点，而后向该元素追加元素节点。
var para=document.createElement("p");
var node=document.createTextNode("这是新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
上述操做有三个步骤：
1.建立新的 <p> 元素
2.建立文本节点
3.向已有的元素追加新元素
固然上面也能够不建立新的元素，直接添加到已有的元素中，好比：
var eleNode = document.createTextNode('这是新段落');
document.getElementById('div1').appendChild(eleNode);
经常使用的dom对象方法：

在html dom（文档对象模型）中，每一个部分都是节点：
文档自己是文档节点
全部 HTML 元素是元素节点
全部 HTML 属性是属性节点
HTML 元素内的文本是文本节点
注释是注释节点
在html dom中，element对象表示html元素，下面这些属性和方法可用于全部HTML元素上。