11.JavaScript外部对象-DOM

来源：互联网发布：linux 修改mac地址编辑：程序博客网时间：2024/06/06 01:45

document对象

DOM概述

DOM概述、DOM节点树、DOM操作

读取、修改

节点信息、元素节点的内容、节点属性、元素节点的样式

查询

查询节点、根据元素的id查询节点、根据层次查询节点、根据标签名查询节点、根据 name查询节点

增加

创建新节点、添加新节点

删除

删除节点

DOM概述

Document Object Model：文档对象模型

当网页被加载时，浏览器会创建页面的文档对象模型

通过可编程的对象模型，JavaScript获得了足够的能力来创建动态的HTML

JavaScript能改变页面中的所有HTML元素、属性
JavaScript能改变页面中的所有CSS样式
JavaScript能对页面中的所有事件作出反应

DOM节点树

DOM提供了如下操作

查找节点、读取节点信息、修改节点信息、创建新节点、删除节点

节点信息：

nodeName：节点名称
- 元素节点和属性节点：标签或属性名称
- 文本节点：#text
- 文档节点：#document
nodeType：节点类型
返回值
- 元素节点：返回1
- 属性节点：返回2
- 文本节点：返回3
- 注释节点：返回8
- 文档节点：返回9
元素节点的内容：
- innerText：设置或获取位于对象起始和结束标签的文本
- innerHTML：设置或获取位于对象起始和结束标签内的HTML
节点属性：
- getAttribute()方法：根据属性名称获取属性的值
- setAttribute()、removeAttribute()
- 将HTML标记、属性和CSS都对象化
元素节点的样式：
- style属性
  node.style.color
  node.style.fontsize
- className属性

Demo

<script>    //onload是页面加载事件，在页面加载完成时自动触发，触发时调用对应的匿名函数    window.onload = function(){    //1.读取节点的名称及类型    var p1 = document.getElementById(“p1”);    console.log(p1.nodeName);           ---> P    console.log(p1.nodeType);           ---> 1    //2.读写节点的内容(双标签中间的内容)    //2.1 innerHTML(支持标签)    console.log(p1.innerHTML);              --->    DOM操作可以<b>读写</b>节点    p1.innerHTML = “DOM操作可以<u>读写</u>节点”;    //2.2innerText(不支持标签)                   var p2 = document.getElementById(“p2”);    console.log(p2.innerText);              --->    DOM操作可以查询节点     p2.innerText = “DOM操作可以<i>查询</i>节点”;    //3.读写节点的值    //只有如下表单控件有值：input textarea select input.value    var s1 = document.getElementById(“s1”);    console.log(s1.value);                  ---> Beijing    //4.读写节点的属性    //4.1通过方法读写（麻烦、万能）    var img = document.getElementById(“i1”);    console.log(img.getAttribute(“src”));       ---> 1.jpg    img.setAttribute(“src”, “2.jpg”);    img.removeAttribute(“src”);    //4.2通过属性名读写（简单、量少）    //举例：    //读：span.className()    //写：span.className = “OK”;    //只有class style id可以通过这种方式读写，其他属性是非标注的API    //即：新版浏览器可以使用，但是旧版浏览器不支持(如：a.ref)    var a = document.getElementById(“a1”);    console.log(a.style);               ---> CSSStyleDeclaration{...}    a.style.color = “blue”;    }</script><body>    <p id=”p1”>DOM操作可以<b>读写</b>节点</p>    <p id=”p2”>DOM操作可以<b>查询</b>节点</p>    <p id=”p3”>DOM操作可以<b>增删</b>节点</p>    <select id=”s1”>        <option>Beijing</option>    </select>    <p>        <img src=”1.jpg” id=”i1”>    </p>    <a href =“#” style=”color:red” id=”a1”>Top</a></body>

case1:picture turn

功能实现：鼠标离开照片，切换照片，鼠标悬停，停止切换

<style>    div { border/width/height }    .show{         display: inline-block;     }    .hide {        display: online;    }</style><script>    var id;    //轮播次数    var n=0;    function picture_turn{        id = setInterval(function(){            n++;            //获取所有图片,s复数，不止一个节点，得到的是一个节点            var imgs = document.getElementsByTagName(“img”);            //遍历、隐藏            //如果imgs.className=”hide”,除第一张图片显示，其他隐藏，然后逐个显示， //垂直显示的块元素            for(var i=0; i<imgs.length; i++){                imgs[i].className = “hide”;            }            var next = n%imgs.length;            imgs[next].className = “show”;            }, 2000);    }    function stop_turn() {    clearInterval(id);    }</script><body>    <!-- onmouseover:鼠标悬停事件，onmouseout:鼠标离开事件 -->    <div onmouseover=”stop_turn;” onmouseover=”onmouseleave();”>    <img src=”1.jpg”/>    <img src=”2.jpg” class=”hide”/>    <img src=”3.jpg” class=”hide”/>    <img src=”4.jpg” class=”hide”/></div></body>

查询节点

如果需要操作HTML元素，必须首先找到该元素

查询节点的方式：

通过id查询：
document.getElementById()
通过指定的ID来返回元素节点，忽略文档的结构，
查找整个HTML文档中的任何HTML元素
如果id错误，则返回null
通过层次（节点名）查询
- parentNode
  遵循文档的上下层次结构，查找单个父节点
- childNodes
  遵循文档的上下层次结构，查找多个子节点
通过标签名查询
- document.getElementsByTagName()
  根据指定的标签名称返回所有的元素
  忽略文档的结构
  查找整个HTML文档中的所有元素
  如果标签名错误，则返回长度为0的节点列表
- 返回一个节点列表（数组）
  使用节点列表的length属性获取个数
  [index]:定位具体的元素
通过name属性查询
document.getElementsByName();

case：search、create、delete

<script>    window.onload = function() {        //根据name查询一组节点        var inputs = document.getElementsByName(“gender”);        console.log(inputs);        //查询父节点        var gz = document.getElementById(“gz”);        var ul = gz.parentNode;        console.log(ul);        //查询子节点        console.log(ul.childNodes);        console.log(ul.getElementsByTagName(“li”));        //查询节点的兄弟        var li = gz.parentNode.getElementsByTagName(“li”);        console.log(li);    }    function f1() {        //创建节点li        var li = document.createElement(“li”);        li.innerHTML = “Hangzhou”;        //追加节点        var ul = document.getElementById(“city”);        ul.appendChild(li);    }    function f2() {        //创建节点        var li = document.createELement(“li”);        li.innerHTML = “Suzhou”;        //插入节点        var ul = document.getElementById(“city”);        var gz = document.getElementById(“gz”);        ul.insertBefore(li, gz);    }    function f3() {        //获取要删除节点的父亲        var ul = document.getElementById(“city”);        //获取要删除的节点        var gz = document.getElementById(“gz”);        //根据父亲删除孩子        ul.removeChild(gz);    }</script><body>    <p>        <input type=”radio” name=”gender”/>male        <input type=”radio” name=”gender”/>female    </p>    <p>        <input type=”button” value=”add” onclick=”f1();”>        <input type=”button” value=”insert” onclick=”f2();”>        <input type=”button” value=”delete” onclick=”f3();”>    </p>    <ul id=”city”>        <li>Beijing</li>        <li>Shanghai</li>        <li id=”gz”>Guangzhou</li>        <li>Shenzhen</li>        <li>Tianjin</li>    </ul></body>

增加：

创建新节点
document.createElement(elementName)
elementName:要创建的元素标签名称
返回新创建的节点
添加新节点
- parentNode.appendChild(newNode);
  追加：新节点作为父节点的最后一个子节点添加
- parentNode.insertBefore(newNode, refNode);
  refNode:参考节点，新节点位于此节点之前添加

删除：

node.removeChild(childNode)
删除某个子节点
childNode必须是node的子节点

case:创建省市下拉选

功能实现：当改变省份时，重置市

<script>    var cities;    window.onload = function() {        //模拟加载所有的城市        cities = [            [“Shijiazhuang”, “Baoding”, “Langfang”],            [“Jinan”, “Qingdao”, “Weihai”],            [“Nanjing”, ”Suzhou”, “Wuxi”]        ];    }    function chg() {        //获取选择的省份（序号）        var s1 = document.getElementById(“province”);        var index = s1.value;        //获取省份对应的城市        var p_cities = cities[index];        //删除旧的城市        var s2 = document.getElementById(“city”);        /*        //倒序删除，若正序：第一次删除1，原2会变成1，第二次删除2，原3被删除。  //所以不能全部删除            var options = s2.getElementsByTagName(“option”);    //逐条删除            for(var i=p_cities.length; i>=1; i--){                s2.removeChild(options[i]);        }        */        //当做内容        s2.innerHTML = “<option>please choose</option>”;        //追加新的城市        if(p_cities) {                  //“请选择时为空”            for(var i=0; i<p_cities.length; i++){                var option = document.createElement(“option”);                option.innerHTML = p_cities[i];                s2.appendChild(option);            }        }    }</script><body>    Province:    <select>        <option onchange=”chg();” id=”province”>        <option value=”-1”>please choose</option>        <option value=”0”>Jiangsu</option>        <option value=”1”>Zhejiang</option>        <option value=”2”>Heilongjiang</option>    </select>    City:    <select id=”city”>        <option>please choose</option>    </select></body>

Province:

please choose
Jiangsu
Zhejiang
Heilongjiang

City:

please choose

网页的function功能没法实现，可以把代码复制下来

0 0