JavaScript操作DOM对象(一)

什么是DOM？

DOM是文档对象模型(Document Object Model)基于浏览器编程的一套API接口
DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。
DOM 定义了访问文档的标准，这些标准又被分为了以下三个部分：

Core DOM - 所有文档类型的标准模型
XML DOM - XML 文档的标准模型
HTML DOM - HTML 文档的标准模型

更多详细的介绍请参考官方文档======================》gogogo

首先来看一下对象的 HTML DOM 树（节点之间的关系）
在这里插入图片描述
在HTML中所有的事物都有节点，DOM将HTML文档视作节点树，通过DOM，节点树中的所有节点都可以通过JavaScript进行访问，所有的HTML元素都可以被修改、创建、删除。

再来看一下节点之间的关系

节点树中的节点彼此之间有一定的等级关系。

术语（父、子和同胞，parent、child 以及 sibling）用于描述这些关系。
在节点树中，顶端节点被称为根（根节点）。
每个节点都有父节点，除了根（根节点没有父节点）。
节点能够拥有一定数量的子
同胞（兄弟或姐妹）指的是拥有相同父的节点。

我们利用下面这段代码来分析节点的关系：

<html>

   <head>
       <title>DOM 教程</title>
   </head>

  <body>
       <h1>DOM 第一课</h1>
       <p>Hello world!</p>
   </body>

</html>

从上面的 HTML 中能读到以下信息：

 <html> 是根节点
 <html> 没有父节点
 <html> 是 <head> 和 <body> 的父节点
 <head> 是 <html> 的第一个子节点
 <body> 是 <html> 的最后一个子节点
 <head> 有一个子：<title>
<title> 有一个子（文本节点）："DOM 教程"
 <body> 有两个子节点：<h1> 和 <p>
   <h1> 有一个子节点："DOM 第一课"
    <p> 有一个子节点："Hello world!"
   <h1> 和 <p> 是同胞

来看怎么访问节点

我们一般是使用DOM Core访问HTML文档的节点，主要有两种访问方式：

1、使用getElement系列方法访问节点
2、根据节点的层次关系访问节点。

一、使用getElement系列方法访问指定节点

1.getElementById()返回按id属性查找的第一个对象对象的引用
2.getElementsByName()返回按带有指定名称name查找的对象集合
3.getElementByTagName()返回按带有指定标签 TagName查找的对象的集合

按id属性查找的第一个对象对象的引用

<body>
 <div id="zhang">
 不帅
 </div>
  
 <script type="text/javascript">
 var i = document.getElementById('zhang'); //查找指定的id
 i.innerText = '很帅'; //innerText修改指定的字符串
 </script>
</body>

按带有指定名称name查找的对象集合

<body>
 <div name="zhang">
 不美
 </div>
  
 <script type="text/javascript">
 var i = document.getElementByTagNmae('zhang'); //查找指定的name名
 i.innerText = '很美'; //innerText修改指定的字符串
 </script>
</body>

按带有指定标签 TagName查找的对象的集合

<body>
 <div class="zhang">
 不丑
 </div>
  
 <script type="text/javascript">
 var i = document.getElementClassName('zhang'); //查找指定的class名
 i.innerText = '很丑'; //innerText修改指定的字符串
 </script>
</body>

二、根据层次关系访问节点

我们来看一些常用的访问节点属性：

属性名称	描述
parentNode	返回节点的父节点
childNodes	返回子节点集合，childNodes[i]
firstChild	返回当前节点的第一个下级子节点
lastChild	返回当前节点的最后一个子节点
nextSibling	返回紧跟在当前元素后面的元素节点
previousSibling	返回紧跟在当前元素前面的节点

具体应用我们来看一个实例：

<body>
<div class="content">
    <div class="logo">
        <img src="/images/dd_logo.jpg"><span>关闭</span>
    </div>
    <div class="cartList">
        <ul>
            <li>¥<input type="text" name="price" value="21.90" ></li>
            <li><input type="button" name="minus" value="-" onclick="minus(this)">
                <input style="width:30px;" type="text" name="amount" value="1">
                <input type="button" name="plus" value="+" onclick="plus(this)"></li>
            <li id="price0">¥21.90</li>
            <li><p>移入收藏</p><p>删除</p></li>
        </ul>
        <ul>
            <li>¥<input type="text" name="price" value="24.00"></li>
            <li><input type="button" name="minus" value="-" onclick="minus(this)">
                <input style="width:30px;" type="text" name="amount" value="1">
                <input type="button" name="plus" value="+" onclick="plus(this)"></li>
            <li id="price1">¥24.00</li>
            <li><p>移入收藏</p><p>删除</p></li>
        </ul>
        <ol>
            <li id="totalPrice">&nbsp;</li>
            <li><span>结 算</span></li>
        </ol>
    </div>
</div>
</body>
<script>
    function test1(){
    
    
    //得到商品的价格和数量
    var s1 =document.getElementsByName("price");
    var s2= document.getElementsByName("amount");
    //计算商品的总价
    var sum =parseFloat(s1[0].value) * parseFloat(s2[0].value) + parseFloat(s1[1].value) * parseFloat(s2[1].value);
    //把总价放到结算处
    document.getElementById("totalPrice").innerHTML=sum.toFixed(2);
    }
    //调用方法
    test1();
    //商品数量减一
    //方案—:通过元素的父节点获取指定节点【不能去除空白节点】
    //obj.parentNode获取该元素的父节点childNodes获取所有子元素
    //console.log(obj.parentNode.childNodes);
    //如何查看注意:var amount = obj.parentNode.childNodes [2].value，
    //console.log(obj.parentNode.childNodes);//控制台查看
    //方案二:通过下一个节点方法获取指定节点【不能去除空白节点】
    // console.log(obj.nextSibling.nextSibling)
    // var amount = obj.nextSibling.nextSibling.value;
    //方案三:获取下一个元素获取指定节点[推荐]
    function minus(obj){
    
    
        console.log(obj.nextElementSibling);
      var amount= obj.nextElementSibling.value;
      if (amount==1) {
    
    
          amount=1;
      }else{
    
    
        //obj.parentNode.childNodes [2].value--;
        obj.nextElementSibling.value--;
      }
        //重新计算价格
        test1();
    }
    //商品数量加一
    function plus(obj){
    
    
         obj.nextElementSibling.value++;
        //重新计算价格
        test1();
    }
</script>

在JavaScript中给大家提供了一组可兼容不同浏览器的element属性，可以消除空行

属性名称	描述
firstElementChild	返回节点的第一个子节点
lastElementChild	返回节点的最后一个节点
nextElementSibling	返回下一个兄弟标签节点
previousElementSibling	返回上一个兄弟标签节点

这里就不多说了，用法跟上面一样，不过更好用

节点信息

nodeName：节点名称
nodeValue：节点值
nodeType：节点类型

节点类型	NodeType值
元素element	1
属性attr	2
文本text	3
注释comments	8
文档document	9
…	更多请参考官方文档

代码实例：

<body>
<ul id="nodeList"><!-- 我是注释 --><li ><input type="text"/>nodeName</li><li>nodeValue</li><li>nodeType</li></ul><p></p>
<script>
    var ulObj = document.getElementById("nodeList");
    // console.log(ulObj);
    document.write("节点名称："+ulObj.nodeName+"<br/>");
    document.write("节点类型："+ulObj.nodeType+"<br/>");
    document.write("节点值："+ulObj.nodeValue+"<br/>");
    document.write("属性："+ulObj.firstChild.firstChild.firstChild.nodeType+"<br/>"); 
</script>
</body>