js原生dom操作

1. 节点

DOM节点，也叫DOM Node。

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点。

  • 整个文档是一个文档节点

  • 每个 HTML 元素是元素节点

  • HTML 元素内的文本是文本节点

  • 每个 HTML 属性是属性节点

  • 注释是注释节点

    所以HTML节点类型一共有5种。文档节点、元素节点、文本节点、属性节点、注释节点

2. 创建节点

创建元素节点、创建文本节点、创建文档碎片、克隆节点

createElement、createTextNode、createDocumentFragment、cloneNode

var a = document.createElement("标签名");
var node = document.createTextNode("我是文本节点");
var m = a.cloneNode(true);
node.cloneNode(true/false) ，它接收一个bool参数，用来表示是否复制子元素。
3.节点之间的关系

var a = document.getElementById(“id1”);

父节点 a.parentNode

子节点 a.childNodes

兄弟节点 a.nextSibling a.previousSibling

4.节点的操作

为元素添加自己的属性

a.id = “myDiv”；
a.className = "myDivClass";

节点添加、删除、替换


parent.appendChild(child);
如：document.body.appendChild(a);
parentNode.insertBefore(newNode, refNode);
如：
var deletedChild = parent.removeChild(node);
parent.replaceChild(newChild, oldChild);
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);

removeEventListener