JavaScript交互式网页设计 • 【第4章 JavaScript文档对象模型】

最新推荐文章于 2022-08-09 10:22:52 发布

明金同学

最新推荐文章于 2022-08-09 10:22:52 发布

阅读量10w+

点赞数 23

分类专栏： JavaScript交互式知识文章标签： js javascript css java html

本文链接： https://blog.csdn.net/weixin_44893902/article/details/109415594

版权

JavaScript交互式知识专栏收录该内容

9 篇文章 14 订阅

订阅专栏

全部章节 >>>>

本章目录

4.1 文档对象模型简介及属性

4.1.1 文档对象模型概述

4.1.3 实践练习

4.2 document 对象查找 HTML 元素

4.2.1 通过 id 查找 HTML 元素

4.2.2 通过 name 查找 HTML 元素

4.2.3 通过标签名查找 HTML 元素

4.2.4 通过类名查找 HTML 元素

4.2.5 实践练习

4.3 document 对象改变 HTML

4.3.1 使用document对象改变HTML输出流

4.3.2 使用document对象改变HTML内容

4.3.3 使用document对象改变HTML样式

4.3.4 使用document对象改变HTML属性

4.3.5 实践练习

4.4 DOM 节点操作

4.4.1 节点信息

4.4.2 动态添加和删除节点

4.4.3 实践练习

总结：

4.1 文档对象模型简介及属性

4.1.1 文档对象模型概述

DOM（Document Object Model）是文档对象模型的简称

DOM 把HTML 文档看成由元素、属性和文本组成的一棵倒立的树

可以把HTML 文档中的每个成分看成一个节点，所以 DOM 的核心操作是查看节点、创建节点、增加节点、删除节点以及替换节点

整个文档是一个文档节点

每个HTML 标签是一个元素节点

包含在HTML 元素中的文本是文本节点

每个HTML 属性是一个属性节点

注释属于注释节点 HTML 文档中的节点彼此间都存在关系，类似一张家族图谱

示例：简要说明HTML文档中节点的关系

<html>
     <head>
          <meta charset="utf-8">
          <title> 文档对象模型节点的特点 </title>
     </head>
     <body>
          <h1> 文档对象模型概述</h1>
          <p>DOM: 文档对象模型</p>
     </body>
</html>

除文档根节点之外的每个节点都有父节点
大部分元素节点都有子节点
当节点共享同一个父节点时，它们就是同辈
节点也可以拥有后代，后代指某个节点的所有子节点，或者这些子节点的子节点，以此类推
节点也可以拥有先辈。先辈是某个节点的父节点，或者父节点的父节点，以此类推

整个HTML 文档在DOM 中是一个document 对象

属性	含义
bgColor	页面的背景颜色
fgColor	文本的前景颜色
title	页面标题

示例：

<body>
     <h2>document 对象的常用属性</h2>
     <script type="text/javascript">
	document.title="document 对象的常用属性";
	document.bgColor="blue";
	document.fgColor="white";
     </script>
</body>

4.1.3 实践练习

4.2 document 对象查找 HTML 元素

4.2.1 通过 id 查找 HTML 元素

使用 document.getElementById(id) 方法可以通过 id 获取 HTML 页面的元素

示例：

  <p id="intro"> 你好，世界！ </p>
  <p> 本案例演示了 <b>getElementById</b> 的用法！ </p>
  <script type="text/javascript">
    var x=document.getElementById("intro");
    document.write("<p> 该文本来自 id 为 intro 的段落 :"+x.innerHTML+"</p>");
  </script>

innerHTML属性是一个字符串，用来设置或获取位于对象起始和结束标签之间的HTML内容

使用 document.getElementsByName(name) 方法可以通过name获取页面元素
参数 name 为必选项，为字符串类型
返回值为数组对象，如果无符合条件的对象，则返回空数组

示例：使用getElementsByName() 方法模拟购物车的全选功能

<script type="text/javascript">
    function check() {
      var cb1 = document.getElementById("allCheck");
      var chs = document.getElementsByName("item");
      for(var i=0; i<chs.length;i++) {
        chs[i].checked = cb1.checked;
      }
    }
    function checkItem() {
      var checked=0;
      var notchecked=0;
      var cb1 = document.getElementById("allCheck");
      var chs = document.getElementsByName("item");
      for(var i=0; i<chs.length;i++) {
        if(chs[i].checked) {
          checked++;
        } else {
          notchecked++;
        }
      }
      if(checked == chs.length)
	 {cb1.checked=true;}
	 else if(notchecked == chs.length)
	 	{cb1.checked=false;} 
		else {cb1.checked=false;}    }
  </script>

4.2.2 通过 name 查找 HTML 元素

使用 document.getElementsByName(name) 方法可以通过name获取页面元素
参数 name 为必选项，为字符串类型
返回值为数组对象，如果无符合条件的对象，则返回空数组

示例：使用getElementsByName() 方法模拟购物车的全选功能

<script type="text/javascript">
    function check() {
      var cb1 = document.getElementById("allCheck");
      var chs = document.getElementsByName("item");
      for(var i=0; i<chs.length;i++) {
        chs[i].checked = cb1.checked;
      }
    }
    function checkItem() {
      var checked=0;
      var notchecked=0;
      var cb1 = document.getElementById("allCheck");
      var chs = document.getElementsByName("item");
      for(var i=0; i<chs.length;i++) {
        if(chs[i].checked) {
          checked++;
        } else {
          notchecked++;
        }
      }
      if(checked == chs.length)
	 {cb1.checked=true;}
	 else if(notchecked == chs.length)
	 	{cb1.checked=false;} 
		else {cb1.checked=false;}    }
  </script>

4.2.3 通过标签名查找 HTML 元素

使用 document.getElementsByTagName(tagname) 方法可以通过标签名访问页面元素
参数 tagname 为必选项，为字符串类型
返回值是指定标签名的对象的集合，如果无符合条件的对象，则返回空数组

示例：当鼠标移动到页面中的菜单上时，修改菜单的背景图像以

<script type="text/javascript">
    var navUl=document.getElementById("nav");
    var lis = navUl.getElementsByTagName("li");
    for (var i=0; i<lis.length;i++) {
      lis[i].onmouseover=function() {
        this.style.backgroundImage="url(../img/bg2.gif)";
      }
      lis[i].onmouseout=function() {
        this.style.backgroundImage="url(../img/bg1.gif)";
	}
    }
</script>

4.2.4 通过类名查找 HTML 元素

使用 document.getElementsByClassName(classname) 方法可以通过类名访问页面元素
参数 classname为必选项，是字符串类型，指需要获取的元素类名
返回值为NodeList 对象，表示指定类名的元素集合。可通过节点列表中的节点索引号来访问列表中的节点

可以使用NodeList对象的length属性来确定指定类名的元素个数，并循环各个元素来获取需要的元素

示例：使用getElementsByClassName() 方法实现斑马线效果

    <ul id="ul1">
    <li class="box"> 通过 id 查找 HTML 元素 </li>
    <li> 通过 name 查找 HTML 元素 </li>
    <li class="box"> 通过标签名查找 HTML 元素 </li>
    <li> 通过类名查找 HTML 元素 </li>
    <li class="box"> 我是带有 box 样式的列表项 </li>
  </ul>
  <script type="text/javascript">
         window.onload=function() {
      var ul1=document.getElementById("ul1");
      var box=ul1.getElementsByClassName("box");
      for(var i=0; i<box.length;i++) {
        box[i].style.background="yellow";      }}
  </script>

4.2.5 实践练习

4.3 document 对象改变 HTML

4.3.1 使用document对象改变HTML输出流

JavaScript 中的 document 对象能够动态地创建 HTML 内容。document.write() 方法可用于直接向 HTML 的输出流写内容

示例：页面中动态输出当前的日期

不要在文档加载完成之后使用document.write()方法，这样做会覆盖该文档中所有的内容

4.3.2 使用document对象改变HTML内容

修改 HTML 内容最简单的方法是使用 innerHTML 属性

语法：

document.getElementById(id).innerHTML= 新的 HTML 内容

示例：使用 innerHTML 在页面中动态添加内容

    <script type="text/javascript">
    function insert() {
           var obj = document.getElementById("content");
      obj.innerHTML="<h2> 我是动态添加的内容 </h2>"
    }
  </script>
  <div id="content">
  </div>
  <input type="button" value=" 向页面中添加内容 " onClick="insert()"/>

4.3.3 使用document对象改变HTML样式

如果需要改变 HTML 元素的样式，可使用以下语法

document.getElementById(id).style.property= 新样式

示例：

    <script type="text/javascript">
    function insert() {
      var obj = document.getElementById("content");
      obj.innerHTML="<h2> 我是动态添加的内容 </h2>"
    }
    function changeStyle() {
      var content = document.getElementById("content");
      content.style.borderColor="red";
      content.style.color="orange";
      content.style.borderStyle="solid";
      content.style.borderWidth="2px";
    }
  </script>
    <div id="content">  </div>
  <input type="button" value=" 向页面中添加内容 " onClick="insert()"/>
  <input type="button" value=" 修改页面样式 " onClick="changeStyle();"/>

每个 HTML 对象都有用于访问 CSS 样式的 style 属性，style 对象中包含一系列与 CSS 属性相对应的属性

style 对象的属性同CSS的属性命名不同，它删除了“-”，第一个单词后面的每个单词首字母大写

4.3.4 使用document对象改变HTML属性

如果需要改变 HTML 元素的属性，可使用以下语法

document.getElementById(id).attribute= 新属性值

示例：添加修改 HTML 样式

    <p>
	<img id="image" src="../img/smiley.gif" width="160" 	height="120"/>
    </p>
  <p>
	<input type="button" value=" 更换图片 " 	onClick="changePic()"/>
    </p>
  <script type="application/javascript">
    function changePic() {
      var img = document.getElementById("image");
      img.src="../img/landscape.jpg";
    }
  </script>

4.3.5 实践练习

4.4 DOM 节点操作

4.4.1 节点信息

可以根据层级关系来查找节点，在 DOM 中每个节点都具有访问其他节点的属性

属性	描述
parentNode	当前节点的父节点引用
childNodes	当前节点的所有子节点
firstChild	当前节点的第一个子节点
lastChild	当前节点的最后一个子节点
previousSibling	当前节点的前一个兄弟节点
nextSibling	当前节点的后一个兄弟节点

示例：使用属性查找节点，并设置其样式

    function getChildren() {
      var div1 = document.getElementById("test");
      var ps=div1.childNodes;
      for(var i=0; i<ps.length;i++) {
        // 如果子节点是元素节点
        if(ps[i].nodeType==1) {
          ps[i].style.color="blue";
        }
      }
  }
  function getParent() {
      var div1=document.getElementById("test");
      var parent=div1.parentNode;
      parent.style.backgroundColor="pink";  }

childNodes 属性，它返回当前节点的所有子节点，其中子节点包括元素节点、属性节点和文本节点

通过节点对象的 nodeType 属性可以判断属于哪种类型的节点

当 nodeType 是 1 时就是元素节点；nodeType 为 2 时是属性节点；nodeType 为 3 时则是文本节点

4.4.2 动态添加和删除节点

添加节点

使用 createElement 创建节点
使用 appendChild(node) 方法将指定的节点追加到现有节点的末尾

删除节点

使用 removeChild 删除节点

使用 DOM 删除元素时，需要清楚地知道要删除元素的父元素

示例：动态添加和删除节点

    <input type="button" value=" 添加 " onClick="ins()"/>
  <input type="button" value=" 删除 " onClick="del()"/>
  <script type="text/javascript">
    var sel=document.createElement("select");
    var option1=document.createElement("option");
    option1.value="yellow";
    option1.innerHTML=" 黄色 ";
    sel.appendChild(option1);
    var option2=document.createElement("option");
    option2.value="red";
    option2.innerHTML=" 红色 ";
    sel.appendChild(option2);
    var option3=document.createElement("option");
    option3.value="blue";
    // 创建一个文本节点
    var txt=document.createTextNode(" 蓝色 ");
        option3.appendChild(txt);
    sel.appendChild(option3);
    //select 的 onchange 事件处理
    sel.onchange=function() {
      document.body.bgColor=this.value;
    }
    // 将 select 中的第一个元素节点移动到 select 子节点的末尾
    sel.appendChild(sel.firstChild);
         function ins() {
      document.body.appendChild(sel);
    }
    // 删除 select 节点
    function del() {
      document.body.removeChild(sel);
    }
  </script>

4.4.3 实践练习

总结：

DOM 把HTML 文档看成由元素、属性和文本组成的一棵倒立的树

document 对象中用于查找 HTML 元素的方法有

getElementById() 方法：获取指定 id 的 HTML 页面元素对象
getElementsByTagName() 方法：返回所有指定标签名的 HTML 页面元素对象
getElementsByName() 方法：获取一组指定 name 的 HTML 页面元素对象
getElementsByClassName() 方法：返回所有指定类名的 HTML 页面元素对象

在 DOM 中每个节点都具有访问其他节点的属性

parentNode 属性：返回当前节点的父节点引用
childNodes 属性：返回当前节点的所有子节点
firstChild 属性：返回当前节点的第一个子节点
nextSibling 属性：返回当前节点的后一个兄弟节点

明金同学

关注关注

23
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
8
评论
JavaScript交互式网页设计 • 【第4章 JavaScript文档对象模型】

4.1 文档对象模型简介及属性4.1.1 文档对象模型概述DOM（Document Object Model）是文档对象模型的简称DOM 把HTML 文档看成由元素、属性和文本组成的一棵倒立的树可以把HTML 文档中的每个成分看成一个节点，所以 DOM 的核心操作是查看节点、创建节点、增加节点、删除节点以及替换节点整个文档是一个文档节点每个HTML 标签是一个元素节点包含在HTML 元素中的文本是文本节点每个HTML 属性是一个属性节点注释属于注释节点 HTML 文档
复制链接

扫一扫