DOM

2018-03-06 本文已影响0人挥剑斩浮云

JS三大核心内容

01->DOM document object model
02->BOM browser object model
03->ECMAScript 核心

DOM对象简介

说白了，DOM就是一个接口，我们可以通过DOM来操作页面中各种元素，例如添加元素、删除元素、替换元素等
DOM就是文档对象模型，文档对象模型就是DOM
在DOM中，每一个元素看成一个节点，而每一个节点就是一个“对象”。也就是我们在操作元素时，把每一个元素节点看成一个对象，然后使用这个对象的属性和方法进行相关操作。（这句话对理解DOM操作太重要了）

DOM节点的概念

1、根节点：在HTML文档中，html就是根节点
2、父节点：一个节点之上的节点就是该节点的父节点，例如h1的父节点就是body，body的父节点就是html
3、子节点：一个节点之下的节点就是该节点的子节点，例如h1就是body的子节点
4、兄弟节点：如果多个节点在同一层次，并拥有相同的父节点，那么这几个节点就是兄弟节点。例如h1和p就是兄弟节点，因为他们拥有相同的父节点body

获取DOM中指定元素

DOM查询操作

01->以类名进行查询

getElemensByClassName()
- 获取某个name值的元素，用于表单元素
getElementsByName()方法都是用于获取表单元素
与getElementById()方法不同的是，使用该方法的返回值是一个数组，而不是一个元素。因此，我们想要获取具体的某一个表单元素，就必须通过数组下标来获取

语法：document.getElementsByName("表单元素name值");

举例：
<body>
    <input name="web" id="radio1" type="radio" value="HTML"/>
    <input name="web" id="radio2" type="radio" value="CSS"/>
    <input name="web" id="radio3" type="radio" value="JavaScript"/>
    <input name="web" id="radio4" type="radio" value="jQuery"/>
    <script type="text/javascript">
        alert(document.getElementsByName("web")[0].value);
    </script>
</body>

02->以id名进行查询

getElementById()

  语法：document.getElementById("元素id");

03->以标签名进行查询
- getElementsByTagName()
04->HTML5新增DOM查询方法
- querySelector() ->返回css选择器第一个选中的元素
- querySelectorAll() ->返回css选择器选中的元素的集合

DOM元素查询时需注意的事项

01->当个查询方法获取到的是多个元素时，获取到的对象为伪数组，而非正整数组
02->通过类名或者标签名等同时可以获取多个元素的方法时，若只需获取第一个元素时，需加上索引

innerHTML和innerText

修改和获取DOM节点内容

01->innerHTML 获取和修改节点内部的文本和标签
02->outerHTML 获取节点本身
03->innerText 获取节点内的文本节点
04->outerText 获取节点内的文本节点,和innerText区别在于赋值时会修改标签本身

创建DOM节点

在JavaScript中，创建新节点都是先用document对象中的createElement()和createTextNode()这2种方法创建一个元素节点，然后再通过appendChild()、insertBefore()等方法把新元素节点插入现有的元素节点中去

01->document.createElement 创建元素节点
02->document.createTextNode 创建文本节点
03->document.createAttribute 创建属性节点

语法：
var e = document.createElement("元素名");   //创建元素节点
var t = document.createTextNode("元素内容");    //创建文本节点
e.appendChild(t);   //把元素内容插入元素中去

创建复杂节点
<script type="text/javascript">
    var e = document.createElement("input");
    e.id = "submit";
    e.type = "button";
    e.value = "提交";
    document.body.appendChild(e);
</script>

节点的添加、替换、复制和删除操作

01->添加节点

appendChild(childNode) ->末尾添加新的子节点
在JavaScript中，我们可以使用appenChild()方法把新的节点插入到当前节点的“末尾”

语法：obj.appendChild(new)
说明：obj表示当前节点，new表示新节点

<head>
    <title></title>
    <script type="text/javascript">
    function insert() {
        var e = document.createElement("li");   //创建元素节点
        var str = document.getElementById("txt").value; //获取文本框的值
        var txt = document.createTextNode(str); //创建文本节点
        e.appendChild(txt); //插入文本节点li
        var list = document.getElementById("list"); //获取ul
        list.appendChild(e);    //插入文本节点
    }
    </script>
</head>

<body>
    <ul id="list">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
    列项文本：
    <input id="txt" type="text" />
    <br />
    <input type="button" value="插入新项" onclick="insert()" />
</body>

insertBefore(newNode,existNode) ->节点前添加子节点
在JavaScript中，我们可以使用appenChild()方法把新的节点插入到当前节点的“首位”

语法：obj.insertBefore(new,ref)
说明：obj表示父节点；
new表示新的子节点；
ref指定一个节点，在这个节点前插入新的节点

<head>
    <title></title>
    <script type="text/javascript">
    function insert() {
        var e = document.createElement("li");   //创建元素节点
        var str = document.getElementById("txt").value; //获取文本框的值
        var txt = document.createTextNode(str); //创建文本节点
        e.appendChild(txt); //插入文本节点li
        var list = document.getElementById("list"); //获取ul
        list.insertBefore(e,list.firstChild);   //插入文本节点
    }
    </script>
</head>

<body>
    <ul id="list">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
    列项文本：
    <input id="txt" type="text" />
    <br />
    <input type="button" value="插入新项" onclick="insert()" />
</body>

这里注意一点，appendChild()和insertBefore()这2种插入节点方式都需要获取父节点才能进行操作

02->替换替换节点

replaceChild(newNode,existNode)

语法：obj.replaceChild(new,old)
说明：obj，表示被替换节点的父节点;
new，表示替换后的新节点;
old，需要被替换的旧节点;

<head>
    <title></title>
    <script type="text/javascript">
    function replace() {
        //获取两个文本框的值
        var tag = document.getElementById("tag").value;
        var txt = document.getElementById("txt").value;
        //获取p元素
        var lvye = document.getElementById("lvye");
        //根据两个文本框的值创建新节点
        var e = document.createElement(tag);
        var t = document.createTextNode(txt);
        e.appendChild(t);
        document.body.replaceChild(e, lvye);
    }
    </script>
</head>

<body>
    <p id="lvye">绿叶学习网</p>
    <hr /> 输入标签：
    <input id="tag" type="text" />
    <br /> 输入文本：
    <input id="txt" type="text" />
    <br />
    <input type="button" value="替换" onclick="replace()" />
</body>

想要实现替换节点，就必须找到3点：
（1）新节点；
（2）被替换的子节点；
（3）被替换子节点的父节点；

03->复制节点

语法：obj.cloneNode(bool)
说明：参数obj表示被复制的节点，而参数bool是一个布尔值，取值如下：
（1）1或true：表示复制节点本身以及复制该节点下的所有子节点；
（2）0或false：表示仅仅复制节点本身，不复制该节点下的子节点；

<head>
    <title></title>
    <script type="text/javascript">
    function add() {
        var e = document.getElementById("list");
        document.body.appendChild(e.cloneNode(1));//复制本身包括子
        document.body.appendChild(e.cloneNode(0));//复制本身不包括子
        
    }
    </script>
</head>

<body>
    <ul id="list">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>ASP.NET</li>
    </ul>
    <input type="button" value="添加" onclick="add()" />
</body>

cloneNode(true/false)
true 复制当前节点及其所有子节点
false 仅复制当前节点

04->删除节点

removeChild(需要删除的节点)

语法：obj.removeChild(oldChild);
说明：参数obj表示当前节点，而参数oldChild表示需要当前节点内部的某个子节点

<head>
    <title></title>
    <script type="text/javascript">
    //定义删除函数
    function del() {
        var e = document.getElementById("list");
        //判断元素节点e是否有子节点
        if (e.hasChildNodes) {
            e.removeChild(e.lastChild); //删除e元素的最后一个子节点
        }
    }
    </script>
</head>

<body>
    <ul id="list">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>ASP.NET</li>
    </ul>
    <input type="button" value="删除" onclick="del()" />
    </div>
</body>

分析：这里“if(e.hasChildNodes)”判断元素节点e是否有子节点。而“e.lastChild”表示获取元素节点额的最后一个子节点
假如我们想要把整个列表删除，该如何实现呢?

<head>
    <title></title>
    <script type="text/javascript">
    function del() {
        var e = document.getElementById("list");
        document.body.removeChild(e);
    }
    </script>
</head>

<body>
    <ul id="list">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>ASP.NET</li>
    </ul>
    <input type="button" value="删除" onclick="del()" />
</body>

分析：当我们点击“删除”按钮时，整个列表都被删除了。我之所以举这两个例子是让大家明白一个知识点，在使用removeChild()方法删除元素之前我们必须找到2点：
（1）被删除的子节点；
（2）被删除子节点的父节点；
在这个例子中，ul元素的父节点就是body了。

DOM属性操作

01->getAttribute(arrtName) 获取属性
02->setAttribute(attrName,attrValue) 设置属性
03->removeAttribute(arrtName) 删除属性

节点指针

01->firstChild 获取父节点的首个子节点
02->lastChild 获取父节点的最后一个子节点
03->childNodes 获取父节点的所有子节点
04->previousSibling 获取已知节点的前一个兄弟节点
05->nextSibling 获取已知节点的后一个兄弟节点
06->parentNode 获取已知节点的父节点

DOM节点的信息

01->nodeType节点类型的常数值

元素节点 Node.ELEMENT_NODE(1)
属性节点 Node.ATTRIBUTE_NODE(2)
文本节点 Node.TEXT_NODE(3)
CDATA节点 Node.CDATA_SECTION_NODE(4)
实体引用名称节点 Node.ENTRY_REFERENCE_NODE(5)
实体名称节点 Node.ENTITY_NODE(6)
处理指令节点 Node.PROCESSING_INSTRUCTION_NODE(7)
注释节点 Node.COMMENT_NODE(8)
文档节点 Node.DOCUMENT_NODE(9)
文档类型节点 Node.DOCUMENT_TYPE_NODE(10)
文档片段节点 Node.DOCUMENT_FRAGMENT_NODE(11)
DTD声明节点 Node.NOTATION_NODE(12)
02->nodeName 节点的名称
03->nodeValue 当前节点的值，格式为字符串

DOM