DOM

DOM:

      Document Object Module 文本对象模型；

      规定了一套规则，以使JS能够操作HTML元素 Js -> Dom ->HTML;

      HTML元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码；

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

      每个HTML元素是元素节点；

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

      每个HTML属性是属性节点

      注释是注释节点

DOM树:

      DOM树将HTML文档提现为树状，DOM树中有很多节点，元素节点只是其中一部分。

     nodeName -> 节点的名字；nodeType ->节点的类型 ；nodeValue ->节点的值

     childNodes: 获取某节点的所有子节点；

      children: 获取某个节点的所有元素子节点；

<p id = 'demo'></p>
<button onclick="myFunction"></buttom>
script>
    function myFunction(){
           var txt = "";
           var c = document.body.childNodes;
           for (i = 0; i<c.length; i++) {
                 txt = txt + c[i].nodeName + "<br>";
};
var x = document.getElementById('demo');
x.innerHTML = txt;

</script>

 

createTextNode()

       创建一个文本节点

<button onclick = 'myFunction()'></button>
<script>
    function myFunction(){
          var t = document.createTextNode("Hello World");
          document.body.appendChild(t);
 };
</script>

createElement()

通过指定名称创建一个元素

<button onclick = 'myFunction'>点我</buttom>
<script>
function myFunction(){
    var btn = document.createElement("BUTTON");
    var t  = document.createTextNode('click me');
    btn.appendChild(t);
    document.body.append(btn);
};
</script>

.appendChild可以向节点的子节点列表的末尾添加新的子节点。

<ul id = 'mylist'><li>Coffee</li><li>Tea</li></ul>
<button onclick='myFunction()'>点我</button>
<script>
function myFunction(){
    var node = document.createElement('Li');
    var textnode = document.createTextNode('Water');
    node.appendChild(textnode);
    document.getElementById('myList').appendChild(node);
};
</script>

.insertBefore

       往某个子节点之前添加一个兄弟

       第一个参数是要添加的节点

       第二个参数是添加在谁之前

<ul id = 'myList'><li>Coffee</li><li>Tea</li></ul>;
<script>
function myFunction(){
    var newItem = document.createElement('LI')
    var textnode = document.createTextNode('Water')
    var list = document.getElementById('myList')
    list.insertBefore(newItem,list.childNodes[0]);
}
</script>

removeChild

     从子节点列表中删除某个节点；

<ul id = 'mylist'><li>Coffee</li><li>Tea</li><li>Milk</li></ul>;

<button onclick = myFunction()>点我</button>

<script>

function myFuncton(){

    var list = document.getElementById('myList');

    list.removeChild(list.childNodes[0]);

}

</script>