获取dom

//第一种方式
document.getElementById("id"); //通过id,只能获取一个值
document.getElementsByElement("p"); //通过标签名，可以获取多个值
document.getElementsByClass("class"); //通过类名，可以获取多个值

//第二种方式
document.querySelector("id"); //获取满足匹配条件的第一个值
document.querySelectorAll("p"); //获取满足匹配条件的全部值

//第二种和第二种方式返回的都是dom对象，可以采用链式调用
var test = document.getElementById('test');
var cs = test.children;

var q1 = document.querySelector('q1');
var ps = q1.querySelectorAll('div.highlighted > p');

更新dom

//两种方式，分别是innerHTML和innerText,textContent
//第一种方式，innerText, textContent。innerText不返回隐藏元素的文本，而textContent返回所有文本
var demo = document.querySelector("id");
demo.innerText = "this is innerContent demo"


//第二种方式，innerHTML,改变html结构
var demo = document.getElementById("id");
demo.innerHTML = '<span> this is innerHTML demo </span>'

插入dom

//使用的方法包括appendChild, insertBefore, children
//使用appendChild将已有的子类插入父类中子类中的最后一个
<p id="js">JavaScript</p>
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
</div>

var js = document.getElementById('js'),
var list = document.getElementById('list');
list.appendChild(js);  //因为js已经存在，会先将这个dom节点删除，然后插入到最后

//创建一个新的节点
var list = document.getElementById('list'),
var haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.appendChild(haskell);

//通过appendChild动态创建样式
var d = document.createElement('style');
d.setAttribute('type', 'text/css');
d.innerHTML = 'p { color: red }';
document.getElementsByTagName('head')[0].appendChild(d);

//使用insertBefore插入到指定的位置
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
</div>

var list = document.getElementById('list'), ref = document.getElementById('python'),
  haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.insertBefore(haskell, ref);  //在ref前插入haskell

//通过children获得所有的子节点
var i, c, list = document.getElementById('list');
for (i = 0; i < list.children.length; i++) {
    c = list.children[i]; // 拿到第i个子节点
}

删除dom

//方法：获得父节点parentElement，通过父节点进行删除removeChild

//通过子节点获取父节点
var self = document.getElementById('to-be-removed'); // 拿到待删除节点:
var parent = self.parentElement; // 拿到父节点:
var removed = parent.removeChild(self); // 删除:
removed === self; // true

//直接获取父节点，进行删除子节点，children是在时刻变动中
<div id="parent">
    <p>First</p>
    <p>Second</p>
</div>

var parent = document.getElementById('parent');
parent.removeChild(parent.children[0]);
parent.removeChild(parent.children[1]); // <-- 浏览器报错