1、创建元素
创建元素：
document.createElement()
使用document.createElement()可以创建新元素。这个方法只接受一个参数，即要创建元素的标签名。这个标签名在HTML文档中不区分大小写，在XHTML中区分大小写。
var div = document.createElement('div');//创建了一个div
2、节点操作
appendChild()用于向一个元素的childNodes末尾添加一个节点，并且返回这个新增的节点。
如果传入到appendChild()里的节点已经是文档的一部分了，那结果就是将节点从原来的位置转移到新位置，任何一个节点不能同时出现在文档中的多个位置。
var a = document.createElement('a'); //创建一个a元素
div.appendChild(a); //将a元素添加到刚刚创建的div中
3、文档操作
createTextNode() 可创建文本节点。
var divText = document.createTextNode("我是新文本"); //创建文本节点
div.appendChild(divText);//将文本追加到刚创建的div中
4、样式操作
Object.stylestyle 对象代表一个单独的样式声明。可从应用样式的文档或元素访问 style 对象。
div.style.color = '#fff';//设置文字颜色
//也可以这样子写在一起，恩，比较方便
div.style = 'width:100px;height:50px;background:#00c9ff;text-align:center;';
也许，这时候你应该兴高采烈的运行，觉得浏览器会出现一个div，伴有一点点简单的样式。
but !浏览器空空如也~
我刚看到这个结果的一瞬间简直抓破了脑袋，why?
问了度娘，结果如下：
此时，创建的
div新元素尚未被添加到文档树中，因此设置各种特性均不会影响浏览器的显示。要添加到文档树，可用appendChild()、insertBefore()、replaceChild()等方法。
document.body.appendChild(div);
当把div元素添加到文档树中后，这个时候对它做的任何修改都会实时地反应到浏览器中。
5、元素选择
getElementById()方法可返回对拥有指定 ID 的第一个对象的引用。
-
getElementsByClassName()方法可以返回所有指定类名的对象的集合。。 -
getElementsByTagName()方法可返回带有指定标签名的对象的集合。 -
getElementsByName()方法可返回带有指定名称的对象的集合。 -
querySelector()方法返回文档中匹配指定 CSS 选择器的一个元素。 -
querySelectorAll()方法返回匹配所有指定选择器的元素。
<div class="div">A</div>
<ul id='ul'>
<li class="li">B</li>
<li class="li">C</li>
</ul>
<span>D</span>
<input name='name' type="button" />
document.getElementById("ul");
document.getElementsByClassName('div');
document.getElementsByTagName('span');
document.getElementsByName('name');
document.querySelector(".div")
document.querySelectorAll(".div ,#ul")
6、属性操作
setAttribute()添加一个新属性（attribute）到元素上，或改变元素上已经存在的属性的值。如果这个指定的属性已存在，则仅设置/更改值。
-
removeAttribute()该方法用于移除元素的属性。
//添加属性
var div = document.getElementById("div");
div.setAttribute("class", "new_class");
div.setAttribute("id", "new_id");
//移除属性
var div2 = document.getElementById("div2");
div2.removeAttribute("class");
7、事件
addEventListener()将指定的事件监听器注册到目标对象上，当目标对象触发制定的事件时，指定的回调函数就会触发。目标对象可以是 文档上的元素、 document、 window 或者XMLHttpRequest(比如onreadystatechange事件)。
var div = document.getElementById("div");
div.addEventListener("click", function(){
alert('嘻嘻');
},false);
文章仅为个人学习简单总结，仅代表个人观点。如有错误，欢迎及时指出。本文内容讲解较浅，兼容问题没有提及，有时间会追加详细内容。
参考：w3c学习网站 和 https://segmentfault.com/a/1190000004076145
谢谢~
网友评论