DOM操作

DOM

文档对象模型，网页加载的时候，浏览器会创建页面的对象模型

Javascript能够改变页面中所有的HTML元素

Javascript能够改变页面中的所有HTML属性

Javascript能够改变页面中的所有CSS样式

Javascript能够对页面中的所有事件作出反应

以下任何demo都不考虑IE等浏览器版本兼容问题

获取节点

getElementById()，getElementByName(),getElementsByTagName()，getElementsByClassName()，querySelector()，querySelectorAll() 获取节点后就可以进行操作了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul id="ul01" name = "ul02">
        <li class="light">节点一</li>
        <li class="dark">节点二</li>
        <li class="light">节点三</li>
    </ul>
</body>
<script>
    var ul01 = document.getElementById("ul01");//通过id获取元素
    var ul02 = document.getElementsByName("ul02"); //通过name获取元素
    var ul03 = document.getElementsByTagName("li");//通过标签获取元素
    var ul04 = ul01.getElementsByClassName("light");//通过类名获取元素
    console.log(ul01);
    console.log(ul02);
    console.log(ul03);
    console.log(ul04);
</script>
</html>

创建节点

document.write() 节点写入，但存在缺点，Dom的read以后在执行js，则会被覆盖

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        document.write("<h1>节点写入测试</h1>")
    </script>
</head>
<body>
</body>
</html>

create创建节点，document.createComent，document.createDocumentFragment，document.createElement，document.createTextNode

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul id="ul"></ul>
</body>
<script>
    var text = document.createComment("文本注释");//创建注释
    var fragment = document.createDocumentFragment();//文本片段
    var ul = document.getElementById("ul");//js获取节点容器
    var li = document.createElement("li");//创建元素节点
    var txt = document.createTextNode("Item");//创建文本节点
    li.appendChild(txt);
    fragment.appendChild(li);
    ul.appendChild(fragment);
    document.body.insertBefore(text,ul); //将注释放到ul元素之前
</script>
</html>

上面这种方面创建节点无疑是很慢的，所以就有了innerHtml和outerHTML，他们最大的区别是innerHTML获取的是当前标签的起始和结束里面的内容，而outerHTML是含起始位置和结束位置的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="content"></div>
    <div id="content1"></div>
</body>
<script>
    var content = document.getElementById("content");
    var str = "<ul>"
             + "<li>Item1</li>"
             + "<li>Item2</li>"
             + "<li>Item3</li>"
             + "</ul>"
    content.innerHTML = str; //会直接放到容器里面

    var str1 = "<p>outHtml的demo测试</p>"
    var content1 = document.getElementById("content1");
    content1.outerHTML = str1;//会将div的节点覆盖掉，因为它包含起始节点的
</script>
</html>

innerText，outerText区别，innerText设置或者获取对象起始和结束标签内的文本，outerText包含起始节点的文本，设置时会将始节点覆盖

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="content">
        <div>我是文本<b>标题</b></div>
        <ul>
            <li>节点1</li>
            <li>节点2</li>
            <li>节点3</li>
        </ul>
    </div>
    <div id="content1">
        <div>我是文本1<b>标题</b></div>
        <ul>
            <li>节点4</li>
            <li>节点5</li>
            <li>节点6</li>
        </ul>
    </div>
</body>
<script>
    var content = document.getElementById("content");
    console.log(content.innerText)//去掉获取的容器内的标签元素，获取文本
    content.innerText = "<p>我是innerText</p>"//将p标签当成文本输出
    var content1 = document.getElementById("content1");
    console.log(content1.outerText)//与innerText获取的标签没有区别
    content1.outerText = "<p>我是outerText</p>"//会将div为content1的标签覆盖
</script>
</html>

遍历节点

Dom树，通过API可以获取所有节点信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p id="demo">叶节点</p>
    <ul id="content">
        <li>节点1</li>
        <li>节点2</li>
        <li>节点3</li>
    </ul>
</body>
<script>
    var oHtml = document.documentElement;//获取html节点信息
    console.log(oHtml);
    var head = oHtml.firstElementChild;//获取html的第一个子节点
    console.log(head);
    var body = head.nextElementSibling;//通过节点找到下一个兄弟节点
    console.log(body);
    oHtml = body.parentElement;//通过子节点找到父节点
    console.log(oHtml);
    var p = document.getElementById("demo");
    console.log(p.hasChildNodes());//true 因为有文本节点
    var ul = document.getElementById("content");
    for (var i = 0,len = ul.childElementCount; i < len; i++){
        console.log(ul.children[i]);
    }
</script>
</html>

操作节点

appendChild(）增加节点，insertBefore()插入节点 replaceChild()替换节点，cloneNode()复制节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul id="ul">
        <li>节点一</li>
        <li>节点二</li>
        <li>节点三</li>
    </ul>
</body>
<script>
    var ul = document.getElementById("ul");//通过id获取元素
    var txt = document.createTextNode("节点四");
    var li = document.createElement("li");
    var fistList = ul.firstElementChild;//移动节点
    li.appendChild(txt);
    ul.appendChild(li);//节点放入
    ul.appendChild(fistList);

    var txt2 = document.createTextNode("节点五")
    var li5 = document.createElement("li");
    li5.appendChild(txt2);
    var li2 = ul.children.item(1);
    ul.insertBefore(li5,li2);//插入节点

    var txt3 = document.createTextNode("替换的节点六");
    var li6 = document.createElement("li");
    li6.appendChild(txt3);
    ul.replaceChild(li6,li2);//替换节点

    var ul2 = ul.cloneNode(true); //深度复制节点
    document.body.appendChild(ul2);
</script>
</html>

删除节点

removeChild() 节点删除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul id="ul">
        <li>节点一</li>
        <li>节点二</li>
        <li>节点三</li>
    </ul>
</body>
<script>
    var ul = document.getElementById("ul");
    var secondChild = ul.removeChild(ul.childNodes[1]);
    console.log(secondChild);
</script>
</html>