JS DOM操作

Dom　

　　Dom：文档对象模型（Document Object Model，简称DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。

　1、document

　　　　　　它指的是HTML（显示数据）或XML标签（传输数据）

　　　　　　例如：<body></body> <div></div><p></p> 这样的标签。

　　2、object 对象　　

　　　　注：使用js操作html就需要先将html结果转成js对象。
　　　　转成对象的四种形式
　　　　　　（1）标签名【多个】
　　　　　　　　var objs = document.getElementsByTagName(“div”) //获取文档中的所有div
　　　　　　（2）id【1个】//若有多个重复id默认获取第一个
　　　　　　　　var obj = document.getElementById("one");
　　　　　　（3） name 【多个】
　　　　　　　　var objs = document.getElementsByName("two");

　　　　　　（4） class name【多个】
　　　　　　　　var objs = document.getElementsByClassName("three");　　　　

<!-- 获取对象 -->
<div></div>
 <div id="one">one</div>
 <div name="two">two</div>
 <div class="three">three</div>
<script>
    var obj1 = document.getElementsByTagName("div");
    var obj2 = document.getElementById("one");
    var obj3 = document.getElementsByName("two");
    var obj4 = document.getElementsByClassName("three");
    console.log(obj1);
    console.log(obj2);
    console.log(obj3);
    console.log(obj4);
</script>

　　　　转换成对象便可进行3种操作
　　　　　　（1）操作属性
　　　　　　　　对象名.属性名 = “值”
　　　　　　（2）修改内容
　　　　　　　　innerText //修改文本内容
　　　　　　　　innerHTMl //修改html
　　　　　　　　也可以使用对象名.innerText 获取文本值
　　　　　　　　注：表单（input text area）取值时不可以使用innerText得使用value
　　　　　　（3）修改样式
　　　　　　　　（1）对象名.style.css样式名 = “值”
　　　　　　　　（2）使用对象名. className = “值” 添加新的class名来修改样式
　　　　　　　　　　使用对象名. className+ = “ ” + “值” 添加新的class名来修改样式

 　　<a id = "link" href="http://www.baidu.com" target = "_blank" title = "this is title">test </a> 
    <script>
        /*修改属性*/
        var link = document.getElementById("link");
        link.href = "http://www.hteis.cn";
        link.title = "new title"

        /*修改内容*/
        link.innerText="恒泰能联";   //修改文本内容
        link.innerText="<b>恒泰能联</b>";

        link.innerHTML = "<h1>hteis</h1>"  //修改html

        /*修改样式*/
        link.style.color ="red";
        link.className = "test";
        link.className += " " + "test1";
　　</script>

3、Modal

　　（1）将文档想像成一个倒树，每一部分（元素，内容，属性，注释）都是节点

　　（2）只要找到一个节点按照关系就可以找到所有的节点
　　　　　父节点：parentNode
　　　　　子节点（第一个，最后一个）：childNodes firstNode lastNode
　　　　　兄弟节点（上一个(左边),下一个(右边)）: previoussibling nextsibling
　　（3）节点有
　　　　节点类型nodeType
　　　　节点名nodeName
　　　　节点值nodeValue

<!-- modal -->
<div>
    <b>eddd</b>
    <p id="pp">
        ff
        <a href="#">agf</a>
        <span>fdigig</span>
         
    </p>
    <button onclick="myFunction()">试一下</button>
    <input type ="text" value ="abg" />
</div>
<script>
    /*modal*/
    var pp = document.getElementById("pp");
    console.log(pp);
    console.log(pp.parentNode.nodeName);
    console.log(pp.previousSibling.previousSibling);
    console.log(pp.nextSibling.nextSibling);
    console.log(pp.childNodes);
    console.log(pp.firstChild.nodeType);//节点类型
    console.log(pp.firstChild.nodeValue);//节点值
    console.log(pp.lastChild.nodeName);//节点名
    function myFunction()
       {
        var c=document.getElementsByTagName("button")[0];
        console.log(c.childNodes[0].nodeValue);
    }
</script>