html、css、js入门-15-js基础6：JS的document对象与DOM_htmlvar o = document.getelementbyid("p1"); alert(o-优快云博客

本文链接：https://blog.youkuaiyun.com/kerryqpw/article/details/104011884

JS DOM操作较为复杂，但必须理解原理，后期可使用封装过的JQuery进行封装

document 对象

每个载入浏览器的HTML文档都会成为 document对象

通过使用 document 对象，可以从脚本中对HTML页面中的所有元素进行访问。

document对象是Windom对象的一部分，可通过window.document 属性对其进行访问

DOM 概述

DOM (Document Object Model):文档对象模型

HTML 文档中的所有节点组成了一个文档树(或节点树)

       -- 数起始于文档节点
       -- document 对象是一棵文档树的根
       -- HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点

节点信息

     nodeName
         -- 元素节点和属性节点:标签或属性名称
         -- 文本节点:永远是 #text

innerHTML: 设置或获取位于对象起始和结束标签内的HTML

节点属性

getAttribute()方法:根据属性名称获取属性的值

将HTML标记、属性和CSS样式都对象化

根据元素ID查找节点

. 方法: document.getElementById()

             通过指定的ID来返回元素节点
             忽略文档的结构
             查找整个HTML文档中的任何 HTML元素
             如果ID值错误，则返回 null

例如:

<p id="p1">一周畅销<span>榜</span></p>

var o = document.getElementById("p1");

alert(o.innerHTML);// 一周畅销<span>榜</span>

修改节点的样式

.      style 属性

             node.style.color
             node.style.fontSize

. className 属性

<p id="p1">一周畅销榜</p>

         var o = document.getElementById("p1");
         o.style.color="red";
         o.style.fontSize=20;
         o.className="样式类名称";

查找并修改节点

    .       使用 getElementById 方法找到元素节点

             -- 修改元素内容:innerHTML
             -- 修改样式: style 或者 className
             -- 修改属性: html 属性

例如:

}
</style>

         var o = document.getElementById("txt1");
         o.value="text data"
         o.style.color="gray";

         var o1= document.getElementById("h1");
         h1.innerHTML="new text";
         h1.className="style1";

项目案例:

NetCTOSS -- 表单验证

取消事件

onXXX = "return false;"

-- 用于取消事件

例如:

项目案例：

NetCTOSS 验证并提交表单

根据层次查找节点

parentNode、firstChild 和 lastChild

        -- 遵循文档的层次结构，查找单个节点

    childNodes

        -- 遵循文档的层次结构，查找多个节点

根据层次查找节点

        var s1 = document.getElementById("s1");
        alert(s1.childNodes.length);//7???
        var o1 = s1.firstChild;
        alert(o1.innerHTML);//undefined???

. 若将html 代码修改为如下格式

修改购物车

1.创建购物车页面
2.修改购物车中的购物数量

根据标签查找节点

. getElementsByTagName():根据指定的标签名称返回所有的元素

          --   忽略文档的结构
          --   查找整个 HTML 文档中的所有元素
          --   如果标签名称错误，则返回长度为0的节点列表

. 返回一个节点列表

-- 使用节点列表的length属性获取个数
-- [index]:定位具体的元素

根据标签查找节点

例如:

</body>

        var spans = document.getElementsByTagName("span");
        alert(spans.lenght);//2
        alert(spans[1].innerHTML);//榜

项目案例:

     购物金额计算：
         1.修改购物数量后，计算小计
         2.并计算总计

JS中对节点的创建、添加操作、删除操作填补了JQuery的空白
警综平台中的添加单位地址，添加选择条件，都使用到了该知识点

创建新节点

     document.createElement(elementName)
         elementName: 要创建的元素标签名称
         返回新创建的节点

例如:

        var newNode = document.createElement("input");
        newNode.type="text";
        newNode.value="mary";
        newNode.style.color = "red";

添加新节点

    .    parentNode.appendChild(newNode)
          -- 追加:新节点作为父节点的最后一个子节点存在

    .    parentNode.insertBefore(newNode,refNode)

-- refNode: 参考节点，新节点位于此节点之前

创建并添加节点:

        例如:
        <body>
           <form id="form1">
              <input id="btn1" type="button" value="添加新节点"
               οnclick="createNewNode();">
           </form>

        </body>

       function createNewNode(){
          var form = document.getElementById("form1");

          var textNode =document.createElement("input");
          textNode.type="text";
          textNode.value="mary";
          form.appendChild(textNode);

          var h1Node=document.createElement("h1");
          h1Node.innerHTML = "h1 text";
          from.insertBefore(h1Node,document.getElementById("btn1"));

       }

删除节点

. parentNode.removeChild(childNode)
-- 删除某个子节点

例如:

         Function deleteNode(){
            var delNode = document.getElementById("a1");
            delNode.parentNode.removeChild(delNode);
         }

项目案例:

联动菜单:实现联动菜单