全部章节 >>>>

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

随机推荐

Gradle—Android配置详解
参考[1]彻底弄明白Gradle相关配置 [2]Android Studio gradle配置详解
Linux基础命令---mysqldump数据库备份
mysqldump mysqldump是一个客户端的备份程序,他可以备份数据库,或者将数据库传输到另外一个服务器. 此命令的适用范围:RedHat.RHEL.Ubuntu.CentOS.Fedora. ...
Spring Cloud Feign原理详解
目录 1.什么是Feign? 2.Open Feign vs Spring Cloud Feign 2.1.OpenFeign 2.2.Spring Cloud Open Feign 3.Spring ...
Redis缓存穿透、缓存击穿以及缓存雪崩
作为一个内存数据库,redis也总是免不了有各种各样的问题,这篇文章主要是针对其中三个问题进行讲解:缓存穿透.缓存击穿和缓存雪崩.并给出一些解决方案.这三个问题是基本问题也是面试常问问题. 这篇文章我 ...
jstl中的foreach标签
<%@ page import="java.util.ArrayList" %><%@ page import="java.util.List" ...
java多线程并发编程中的锁
synchronized: https://www.cnblogs.com/dolphin0520/p/3923737.html Lock:https://www.cnblogs.com/dolphi ...
用工具堆砌的DevOps 幻觉
作者:顾宇 thoughtworks高级咨询师在第一届 DevOpsDays结束后,DevOps 运动则如星火燎原之势在全球发展开来.随着 DevOps 思想的不断传播,相对的质疑和批评也从未停止过 ...
Linux下安装chrome
目录一.Centos系列二.Ubuntu系列一.Centos系列 1.配置yum下载源 vim /etc/yum.repos.d/chrome.repo [google-chrome] name ...
SQL Server中的函数
字符串函数日期函数数学函数系统函数
FlashFXP链接到服务器上，如果www目录下的文件隐藏
FlashFXP链接到服务器上,如果www目录下的文件隐藏,那么请按照如下设置,就可以显示隐藏的文件了 [站点]->[站点管理器]->选项,然后按照如下设置:

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

随机推荐

热门专题