全部章节 >>>>

<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 属性：返回当前节点的后一个兄弟节点

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

JavaScript交互式网页设计作业目录（作业笔记）
JavaScript交互式网页设计笔记 • [目录] 我的大学笔记>>> 第1章 JavaScript基本语法>>> 1.1.4 使用 JavaScript 的 H ...
JavaScript交互式网页设计笔记 • 【目录】
章节内容实践练习 JavaScript交互式网页设计作业目录(作业笔记) 第1章 JavaScript交互式网页设计笔记 • [第1章 JavaScript基本语法] 第2章 JavaScript ...
云南农职《JavaScript交互式网页设计》综合机试试卷⑤——简单分类菜单
一.语言和环境实现语言:HTML,CSS,JavaScript,JQuery. 开发环境:HBuilder. 二.题目(100分): 1.使用Jquery和JavaScript实现二级分类菜单管理 ...
云南农职《JavaScript交互式网页设计》综合机试试卷①——实现购物车的结算
一.语言和环境实现语言:javascript.html.css. 开发环境:HBuilder. 二.题目2(100分) 1.功能需求: 马上过节了,电商网站要进行促销活动,需要实现该商城购物车的商品 ...
云南农职《JavaScript交互式网页设计》综合机试试卷④——蔚蓝网导航栏
一.语言和环境实现语言:javascript.html.css. 开发环境:HBuilder. 二.题目(100分) 1.功能需求: 布局出顶部导航栏目鼠标放到新手入门显示对象的下拉列表鼠标移开 ...
JavaScript交互式网页设计 • 【第5章 JavaScript对象】
全部章节 >>>> 本章目录 5.1 Object 对象和 Date 对象 5.1.1 JavaScript 的内部对象 5.1.2 Object对象 5.1.3 Date ...
JavaScript交互式网页设计 • 【第3章 JavaScript浏览器对象模型】
全部章节 >>>> 本章目录 3.1 浏览器对象模型 3.1.1 浏览器对象模型 3.2 window 对象 3.2.1 window 对象的常用属性及方法 3.2.2 使 ...
JavaScript交互式网页设计 • 【第1章 JavaScript 基本语法】
全部章节 >>>> 本章目录 1.1 JavaScript 概述 1.1.1 JavaScript 简介 1.1.2 JavaScript 的概念和执行原理 1.1.3 J ...
JavaScript交互式网页设计 • 【第8章 jQuery动画与特效】
全部章节 >>>> 本章目录 8.1 显示隐藏动画效果 8.1.1 show() 方法与hide() 方法 8.1.2 toggle()方法 8.1.3 实践练习 8.2 ...

随机推荐

时光网内地影视票房Top100爬取
为了和艺恩网的数据作比较,让结果更精确,在昨天又写了一个时光网信息的爬取,这次的难度比艺恩网的大不少,话不多说,先放代码 # -*- coding:utf-8 -*-from __future__ i ...
redis入门到精通系列（九）：redis哨兵模式详解
(一)哨兵概述前面我们讲了redis的主从复制,为了实现高可用,会选择一台服务器作为master,多台服务器作为slave.现在有这样一种情况,master宕机了,这时系统会选择一台slave作为m ...
Activiti工作流引擎使用详解（一）
一.IDEA安装activiti插件在插件库中查找actiBPM,安装该插件,如果找不到该插件,请到插件库中下载该包手动安装,插件地址 http://plugins.jetbrains.com/pl ...
【Services】【Web】【tomcat】配置tomcat支持https传输
1. 基础: 1.1. 描述:内网的tomcat接到外网nginx转发过来的请求之后需要和外网的客户端进行通讯,为了保证通讯内容的安装,使用tomcat使用https协议. 1.2. 链接:http: ...
【Spring Framework】spring管理自己new的对象
使用AutowireCapableBeanFactory手动注入使用.newInstance();创建对象的话,如果其他对象都使用Spring Autowired,还需要手动创建所有依赖的Bean: ...
使用Modbus批量读取寄存器地址
使用modbus单点读取地址是轮询可能会导致效率很低,频繁发送读取报文会导致plc响应时间拉长,批量读取可大大减少数据通信的过程,每次读取完成后,在内存中异步处理返回来的数据数组. modbus 功能 ...
C#汽车租赁系统
类图: 父类(车类,抽象类) /// <summary> /// 车辆基本信息类.搞一个抽象类玩玩 /// </summary> public abstract class V ...
SQL->Python->PySpark计算KS，AUC及PSI
KS,AUC 和 PSI 是风控算法中最常计算的几个指标,本文记录了多种工具计算这些指标的方法. 生成本文的测试数据: import pandas as pd import numpy as np i ...
Mit6.830 - simpledb - 总览
总览 github 地址: https://github.com/CreatorsStack/CreatorDB 在开始 simpledb 旅途之前, 我们先从整体上来看看 SimpleDb 是一个 ...
Latex-安装_第一天
LaTex安装 Windows 小知识: \(Tex\)来源technology,希腊词根是\(tex\),Latex应该读成"拉泰赫". https://miktex.org/ ...

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

全部章节 >>>>

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 实践练习

总结：

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

随机推荐

热门专题