全部章节 >>>>

<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 ...

随机推荐

int是几位;short是几位;long是几位负数怎么表示
其实可以直接通过stm32的仿真看到结果:(这里是我用keil进行的测试,不知道这种方法是否准确) 从上面看, char是8位 short是4*4=16位 int是8*4=32位 long是8* ...
100个Shell脚本——【脚本8】每日生成一个文件
[脚本8]每日生成一个文件要求:请按照这样的日期格式(xxxx-xx-xx)每日生成一个文件,例如今天生成的文件为)2017-07-05.log, 并且把磁盘的使用情况写到到这个文件中,(不用考虑c ...
final&static
final 1.final修饰类,那么该类不能有子类,那么也就没有子类重写父类的方法,也就没有多态 2.final修饰成员变量,那么成员变量要么显式赋值(用第一种),要么在构造方法中赋值无论哪一种, ...
my36_InnoDB关键特性之change buffer
一.关于IOT:索引组织表表在存储的时候按照主键排序进行存储,同时在主键上建立一棵树,这样就形成了一个索引组织表,一个表的存储方式以索引的方式来组织存储的. 所以,MySQL表一定要加上主键,通过主 ...
SpringCloud微服务-Eureka服务注册与发现
一. Eureka 是什么? Eureka是Netflix的一个子模块,也是核心模块之一.Eureka是一个基于REST的服务,用于定位服务,以实现云端中间层服务发现和故障转移.服务注册与发现对微服务 ...
【Java基础】transient关键字
1. transient的作用及使用方法我们都知道一个对象只要实现了Serilizable接口,这个对象就可以被序列化,java的这种序列化模式为开发者提供了很多便利,我们可以不必关系具体序列化的过 ...
lucene中创建索引库
package com.hope.lucene;import org.apache.commons.io.FileUtils;import org.apache.lucene.document.Doc ...
【简】题解 AWSL090429 【原子】
预处理出每个原子最近的不能合并的位置枚举当前位置和前面断开的位置合并发现还是不能过考虑用选段树优化但是因为每次转移的最优点是在前面可以合并的范围内 dp值加上当前的到该点的最大值因为每个位置 ...
Python 3 字典(Dictionary)
字典是另一种可变容器模型,且可存储任意类型对象. 字典的每个键值 key=>value 对用冒号 : 分割,每个键值对之间用逗号 , 分割,整个字典包括在花括号 {} 中 ,格式如下所示: d ...
ciscn_2019_es_1
拿到题目例行检查将题目放到idax64中进行代码审计主界面,我也没看懂什么意思 call 可以看到free的指针没有置零,存在uaf漏洞 add函数 show函数该题的libc版本是2.27,所 ...

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文档对象模型】的更多相关文章

随机推荐

热门专题