JavaScript-常见的原生DOM操作

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()方法返回匹配所有指定选择器的元素。

A

    B
    C

D


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

谢谢~