原生JavaScript Dom方法

在原生JS中，所有的节点都是Node类型。

获取节点

document.querySelector
document.querySelectorAll

querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。

这里写代码片

获取子节点

var firstChild = someNode.childNodes[0];
var secondChild = someNode.childNodes.item(1);
var count = someNode.childNodes.length;

获取第一个／最后一个子节点：

someNode.firstChild
someNode.lastChild

获取父节点

var parent = someNode.parentNode;

获取同胞节点

if (someNode.nextSibling === null){
    alert("Last node in the parent’s childNodes list.");
} else if (someNode.previousSibling === null){
    alert("First node in the parent’s childNodes list.");
}

操作子节点：

方法一：appendChild

var returnedNode = someNode.appendChild(newNode); alert(returnedNode == newNode); //true 
alert(someNode.lastChild == newNode); //true

方法二：insertBefore

//插入后成为最后一个子节点
returnedNode = someNode.insertBefore(newNode, null); 
alert(newNode == someNode.lastChild); //true

//插入后成为第一个子节点
var returnedNode = someNode.insertBefore(newNode, someNode.firstChild); 
alert(returnedNode == newNode); //true
alert(newNode == someNode.firstChild); //true

//插入到最后一个子节点前面
returnedNode = someNode.insertBefore(newNode, someNode.lastChild); 
alert(newNode == someNode.childNodes[someNode.childNodes.length-2]); //true

方法三：replaceChild，替换子节点

//替换第一个子节点
var returnedNode = someNode.replaceChild(newNode, someNode.firstChild);
//替换最后一个子节点
returnedNode = someNode.replaceChild(newNode, someNode.lastChild);

方法四：removeChild，删除子节点

可操作所有节点

cloneNode()：参数true表示进行深复制，否则进行浅复制。

document 方法

1、getElementById()
2、getElementsByTagName()

<img src="myimage.gif" name="myImage">

var images = document.getElementsByTagName("img");
var myImage = images.namedItem("myImage");
var myImage = images["myImage"];// 或者

3、getElementsByName()
4、getElementsByClassName() （HTML5 添加）
5、document.createElement()创建元素

var div = document.createElement("div");

操作元素属性

// get方法
var div = document.getElementById("myDiv");
alert(div.getAttribute("id"));
alert(div.getAttribute("class"));
alert(div.getAttribute("title"));
alert(div.getAttribute("lang"));
alert(div.getAttribute("dir"));

// set方法
div.setAttribute("id", "someOtherId");
div.setAttribute("class", "ft");
div.setAttribute("title", "Some other text");
div.setAttribute("lang","fr");
div.setAttribute("dir", "rtl");

或者部分可以：

alert(div.id);
alert(div.class);

div.id = "someOtherId";
div.align = "left";

removeAttribute()方法：不仅会清除特性的值，而且也会从元素中完全删除特性

 div.removeAttribute("class");

获取元素类classList：

div.classList.remove("user");// 删除类
div.classList.add("current");// 添加类
div.classList.toggle("user");// 切换类
div.classList.contains("bd");// 是否包含类

访问元素的样式

var myDiv = document.getElementById("myDiv");
//设置背景颜色 
myDiv.style.backgroundColor = "red";
//改变大小
myDiv.style.width = "100px"; 
myDiv.style.height = "200px";
//指定边框
myDiv.style.border = "1px solid black";

也可以使用如下方法，但是要注意，赋给 cssText 的值会重写整个 style 特性的值；也就是说，以前通过 style 特性指定的样式信息都将丢失。

myDiv.style.cssText = "width: 25px; height: 100px; background-color: green"; 
alert(myDiv.style.cssText);