DOM基础

最新推荐文章于 2021-05-08 20:20:37 发布

Jyann~

最新推荐文章于 2021-05-08 20:20:37 发布

阅读量526

点赞数

分类专栏：前端文章标签： DOM

本文链接：https://blog.csdn.net/qq_34569497/article/details/87276124

版权

前端专栏收录该内容

173 篇文章 14 订阅

订阅专栏

本文内容是根据毕晓东老师的视频教程总结而得。DOM相关基础知识。

1.DOM概述

Document Object Model(文档对象模型)，主要用来将标记型文档封装成对象，并将标记型文档中所有的内容（标签、文本、属性等）都封装成对象。

封装成对象的目的：为了更方便的操作这些文档以及文档中的所有内容。因为对象的出现就可以有属性和行为被调用。

标记型文档特征：除了标签就是标签封装的内容或者标签的属性。

文档：标记型文档；

对象：封装了属性和行为的实例，可以被直接调用；

模型：所有标记型文档都具备一些共性特征的一个体现。

标记型文档：标签、标签中的属性、标签中封装的数据。

只要是标记型文档，DOM这种技术都可以对其进行操作。

常见的标记型文档：HTML、xml

DOM如何对标记型文档进行操作？

要操作标记型文档必须对其进行解析。

DOM技术的解析方式：

<!DOCTYPE html>

<html>

<head>

<title>DOM演示</title>

</head>

<body>

<div>div区域</div>

<dl>

</dl>

<table>

<tr>

</tr>

</table>

<form>

</form>

</body>

</html>

一读取到这个HTML文档时，就将这个文档封装成了Document对象，然后对各标签层次进行更细致的划分。标签、属性、标签里的数据。

图解：DOM解析将按照标签的层次关系体现出标签的所属。形成一个树状结构。书中的标签以及文本设置属性称为节点，也成为对象，标签通常也成为页面中的元素。可以动态添加或删除页面的各个节点。

2.DOM解析的特点

DOM解析方式：将标记型文档解析成一颗DOM树，并将书中的内容都封装成节点对象。

注意：DOM解析方式的好处：可以对树中的节点进行任意操作，如增删改查。

弊端：这种解析需要将整个标记型文档加载进内存，意味着如果标记型文档体积很大，较为浪费内存空间。

另一种解析方式：SAX。是由一些组织定义的一种民间常用的解析方式，并不是w3c标准，而DOM是w3c的标准。

SAX解析方式：基于时间驱动的解析。

读这个文档，读到标签的开始时即触发一个事件，然后去读取里面的内容，当读取到结束标签时，事件触发结束。

用SAX解析获取数据的速度很快，但是不能对标记进行增删改动作，可以查。

3.DOM三级模型

DOM level 1：将HTML文档封装成对象；

DOM level 2：在level1基础上加入了一些新功能，如解析名称空间（一个页面都使用多个同名标签，但是含义不一样，就需要给标签定义新的名称空间，即不同的包来存放，也可使用唯一标识即域名）。如xmlns=”my”或xmlns=http://www.sina.com.cn

DOM level 3：将xml文档封装成了对象。

4.DHTML概述

DHTML：动态的HTML。不是一门语言，是多项技术综合体的简称。HTML+CSS是静态页面。

多项技术包括：HTML、CSS、DOM、JavaScript。

这四种技术在动态HTML页面效果定义时，都处于什么角色？负责什么职责？

HTML：负责提供标签对数据进行封装，目的是便于对该标签中的数据进行操作。简单说，用标签封装数据。

CSS：提供样式属性，对标签中的数据进行样式的定义。简单说，对数据进行样式定义。

DOM：负责将标记型文档（标签型文档）以及文档中的所有内容进行解析，并封装成对象。在对象中定义了更多的属性和行为，便于对对象进行操作。简单说，将文档和标签以及其他内容变成对象。

JS：负责提供程序设计语言对页面中的对象进行逻辑操作。简单说，负责页面行为定义。即页面的动态效果。所以JS是动态效果的主力编程语言。

DHMTL+XMLhttpRequest = Ajax

5.BOM&Navigator对象&History对象

浏览器本身也可以让它进行动态效果的产生。

BOM：Browser Object Model(浏览器对象模型)，这个模型方便与操作浏览器。

浏览器对应的对象就是window对象，这个可以通过查阅DHTML API获得。

Navigator对象的所有方法：

示例：

<!DOCTYPE html>

<html>

<head>

<title>DOM中的window对象</title>

</head>

<body>

<!-- 为了演示方便，定义一个事件源，通过对事件源的触发，获取想要的结果。

比如用户通过点击按钮就可以知道浏览器的一些信息 -->

<!-- 定义时间源，注册时间关联的动作。事件：onclick 事件处理方式是一个函数，功能定义必须使用JS。

如果页面功能只为了除了某几个内容，可以放在标签附近，如果要处理很多内容，要放在head标签里-->

function windowObjDemo(){

//想要知道浏览器的信息，就需要使用window对象中的Navigator对象，一打开浏览器Navigator对象就在window中存在了

var name = window.navigator.appName;

var version = window.navigator.appVersion;

println(name);

println(version);

}

</script>

</body>

</html>

结果：

window对象本身是存在的，所以使用时可以不写window.直接使用navigator.

History对象:浏览器的前进后退

6.Location对象

代表地址栏。可以通过地址栏和服务端进行交互

和java中的URL对象相似

Location对象里的属性既可以获取也可以设置。

Location对象中的方法：

//演示location

function windowObjDemo2(){

var protocol = location.protocol;

var href = location.href;

println("protocol:"+protocol);

println("href:"+href);

//给Location对象的href属性设置一个值。改变地址栏，并对其值进行解析，如果http，还进行连接访问

location.href = "http://www.sina.com.cn";

}

结果：

7.window常见方法1

结果：

<!DOCTYPE html>

<html>

<head>

<title>window 对象中的方法</title>

function windowMethod(){

var b = confirm("你真的确认点击吗？");

alert(b);

}

</script>

</head>

<body>

</body>

</html>

结果：

Integer setTimeout(表达式,millSeconds)：设置定时执行

//设置4秒后，执行某表达式

setTimeout("alert('timeout set')",4000);

setInterval(表达式，毫秒值)：每隔多少毫秒都会执行

clearTimeout()

clearInterval()清除对应形式，参数是setInterval的返回值

<!DOCTYPE html>

<html>

<head>

<title>window 对象中的方法</title>

var timeid;

function windowMethod(){

//设置4秒后，执行某表达式

timeid = setInterval("alert('timeout set')",4000);

}

function clearwindowMethod(){

clearInterval(timeid);

}

</script>

</head>

<body>

</body>

</html>

moveBy(横坐标,纵坐标)方法：坐标移动窗口(指定偏移量)

moveTo(x,y)直接移动到指定的坐标点

resizeBy()调整窗口大小

resizeTo()

8.window常见方法2

scrollBy:调节滚动条

scrollTo

close():能被close的必须是新开的窗口，当前窗口没有效果

open():以指定方式打开一个窗体，并指定窗体的样式

function openWindow(){

open("ss.html","_blank","height=200,width=400,status=yes,toolbar=yes,menubar=yes,location=yes");

}

新开的页面：可以设置定时关闭。注意当前窗口使用定时关没有效果

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

setTimeout("close()",3000);

</script>

</head>

<body>

<h1>年底大酬宾</h1>

快来够买吧

</body>

</html>

9.window常见事件

onfocus():获取焦点

onload()：页面里所有图片文字等数据加载完后（再次刷新时也会触发），立即触发

onunload()：关闭浏览器、页面刷新时，窗口还在就会调用

onbeforeunload():当数据不要（关闭窗口、刷新页面）的时候触发

注意不同浏览器各个效果会不一样

//当事件触发时，触发一个函数

onunload = function(){

alert("onunload run");

}

onload = function(){

alert("onload run");

}

onbeforeunload = function(){

alert("onbeforeunload run");

}

onload事件中一旦加载完毕，再设置窗体样式

onunload = function(){

window.status = "加载完毕";

}

10.练习——广告弹窗

<!DOCTYPE html>

<html>

<head>

<title>广告弹窗练习</title>

//演示广告弹窗效果，页面一加载完就执行，在当前页面定义脚本，可以再onload事件中完成广告的弹窗

onload = function(){

open("ss.html","_blank","height=200,width=400,status=no,toolbar=no,menubar=no,location=no");

}

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

//setTimeout("close()",3000);

onunload = function(){

open("ss.html","_blank","height=200,width=400,status=no,toolbar=no,menubar=no,location=no");

}

//每秒获取一次焦点，不能关闭也不能最小化

setTimeout("focus()",1000);

</script>

</head>

<body>

<h1>年底大酬宾</h1>

快来够买吧

</body>

</html>

结果：弹窗窗口后关闭不了也缩小不了，且每秒获取一次焦点（每秒弹出来一次）

11.document获取节点byID

该对象将标记型文档进行封装，该对象的作用，是对标记型文档进行操作，最常见的操作就是，想要实现动态效果，需要对节点操作，那么就要获取到这个节点，要想获取节点，就需要先获取到节点所属的文档对象document。

获取节点的方法：

getElementById()：通过标签的id获取该标签节点，返回该标签节点对象

getElementsByName()：通过标签的name获取该标签节点，因为name属性可相同，所以返回的是一个数组（容器）。

getElementsByTagName()：通过标签的标签名TagName获取该标签节点，因为Tag有重复，所以返回的是数组。

节点都有三个必备的属性：节点名称、节点类型、节点值

常见节点有三种：

标签型节点：类型1

属性节点：类型2

文本节点：类型3

值：标签型节点没有值，属性和文本节点是可以有值的。

获取到节点后，再获取节点的文本：

innerText():只支持IE

innerHtml()：IE和FireFox都支持

<!DOCTYPE html>

<html>

<head>

<title>获取节点byId</title>

function getNodeId(){

var divNode = document.getElementById("divId");

alert(divNode.nodeName+":"+divNode.nodeType+":"+divNode.nodeValue);

//获取到节点后，再获取节点的文本

var text1 = divNode.innerHTML;

alert(text1);

//修改div的文本区域

var text = divNode.innerHTML = "哈哈，文本被修改了";

alert(text);

}

</script>

</head>

<body>

<div id="divId" name="divname" value="asdf">这是一个div区域</div>

</body>

</html>

结果：

12.document获取节点byName

getElementsByName()：通过标签的name获取该标签节点，因为name属性可相同，所以返回的是一个数组（容器）。

function getNodeName(){

var nodes = document.getElementsByName("user");

alert(nodes+":"+nodes[0].type);

}

结果：

获取表单的值：

alert(nodes+":"+nodes[0].value);

或者

var userNode = document.getElementsByName("user")[0];

alert(userNode.value);

13.document获取节点byTagName

既没有ID也没有name时，可通过标签名获取节点

getElementsByTagName()：通过标签的标签名TagName获取该标签节点，因为Tag有重复，所以返回的是数组。

function getNodeByTagName(){

var nodes = document.getElementsByTagName("a");

alert(nodes[0].innerHTML);

}

结果：

可以拿到所有的Tag标签后，再设置所有tag设置属性。如：

nodes[0].target = "_blank";

14.document获取节点byTagName2

只想获取一部分超链接怎么做？

通过对div对象方法的查找发现它也具备getElementsByTagName方法，所以所有容器型标签都具备该方法，在该标签范围内获取指定名称的标签。

</div>

//获取超链接所属的div

var nodes = document.getElementById("links");

//通过div下的getElementsByTagName获取所有超链接

var aNodes = nodes.getElementsByTagName("a");

alert(aNodes[0].innerHTML);

15.通过节点层次关系获取节点

关系：

父节点：只代表一个节点对象，用属性就可以完成。parentNode

子节点：一个节点有多个子节点。childNodes对应一组节点集合

兄弟节点：上一个兄弟节点previousSibling;下一个兄弟节点nextSibling

没有浏览器DOM解析方式不一样

<!DOCTYPE html>

<html>

<head>

<title>通过节点关系的层次关系获取节点对象</title>

function getNodes(){

//获取页面中的表格

var tabNode = document.getElementById("tabId");

//获取父节点parentNodes

/* var parentNodes = tabNode.parentNode;

alert("parentNodes:"+parentNodes); */

//获取子节点childNodes

/* var nodes = tabNode.childNodes;

alert(nodes[0]); */

//获取兄弟节点

var node = tabNode.previousSibling;

alert("node:"+node.nodeName);

var node1 = tabNode.nextSibling;

alert("node1:"+node1.nodeName);

}

</script>

</head>

<body>

<div>div区域</div>

<tr>

</tr>

</table>

</body>

</html>

由于内核不一样， Chrome觉得div节点是一个文本，所以是一个文本节点。如果是IE会直接显示DIV。所以在使用节点时尽量少用兄弟节点，因为解析时会出现浏览器不同解析不一致情况。

16.节点操作——创建并添加1

思路：1，创建一个文本节点createTextNode

2，获取div_1节点

3，将文本节点添加到div节点中appendChild

<!DOCTYPE html>

<html>

<head>

<title>创建并添加节点</title>

//创建并添加节点。需求：在div_1中添加一个文本节点

//思路：1，创建一个文本节点createTextNode 2，获取div_1节点 3，将文本节点添加到div节点中appendChild

function creatAndAddNode(){

//1，创建一个文本节点 document 中createTextNode

var div1TextNode = document.createTextNode("div_1创建一个文本节点");

//2，获取div_1节点

var divNode = document.getElementById("div_1");

//3，将文本节点添加到div节点中 appendChild

divNode.appendChild(div1TextNode);

}

function delNode(){

}

function updateNode(){

}

</script>

div{

border:#00ccff 1px solid;

width:200px;

padding:30px;

margin:10px;

}

#div_1{background-color:#00ccff;}

#div_2{background-color:#FFccff;}

#div_3{background-color:#cc00ff;}

#div_4{background-color:#00FF00;}

</style>

</head>

<body>

</body>

</html>

效果：

创建添加前：

创建添加后：

17.节点操作——创建并添加2

需求：在div_1中创建并添加一个按钮节点

createTextNode是创建一个文本节点，如果要添加一个按钮或标签，就需要使用createElement

//需求：创建并添加一个按钮节点

function creatAndAddBtnNode(){

//1，创建一个按钮节点 document 中createElement

var div1BtnNode = document.createElement("input");

div1BtnNode.type = "button";

div1BtnNode.value = "创建并添加按钮节点";

//2，获取div_1节点

var divNode = document.getElementById("div_1");

//3，将文本节点添加到div节点中 appendChild

divNode.appendChild(div1BtnNode);

}

另一种方式完成添加节点：

其实是使用容器型标签中的属性，innerHTML，这个属性可以设置HTML文本

//需求：创建并添加一个按钮节点2，使用innnerHTML方法

function creatAndAddBtnNode2(){

//1，获取div_1节点

var divNode = document.getElementById("div_1");

//2，设置文本或标签皆可

//divNode.innerHTML = "创建并添加一个按钮节点2，使用innnerHTML方法";

divNode.innerHTML = "<input type='text'/>";

}

18.节点操作——删除节点

removeNode(Boolean childrenNode):此方法不建议使用，但是可以用

removeChild()：建议使用，删除子节点。获取div_2的父节点，然后通过父节点的removeChild()方法删除该节点

//需求：将div_2节点删除

function delNode(){

//获取div_2节点

var div2Node = document.getElementById("div_2");

//参数表示是否要删除该div的子节点

div2Node.removeNode(true);

}

结果：false

true:

removeChild()：建议使用，删除子节点。获取div_2的父节点，然后通过父节点的removeChild()方法删除该节点

//需求：将div_2节点删除

function delNode(){

//获取div_2节点

var div2Node = document.getElementById("div_2");

//参数表示是否要删除该div的子节点

//div2Node.removeNode(true);

//removeChild()：建议使用，删除子节点。获取div_2的父节点，然后通过父节点的removeChild()方法删除该节点

div2Node.parentNode.removeChild(div2Node);

}

19.节点操作——替换&克隆节点

修改节点，即替换掉节点。

replaceNode(newNode):不建议使用

//需求:使用div_3替换掉div_1节点

function updateNode(){

//获取div_1节点

var div1Node = document.getElementById("div_1");

//获取div_3节点

var div3Node = document.getElementById("div_3");

//使用replaceNode()方法将div_3替换掉div_1节点

div1Node.replaceNode(div3Node);

}

结果：

replaceChild():利用该节点的父节点，新节点替换掉纠结点

//需求:使用div_3替换掉div_1节点

function updateNode(){

//获取div_1节点

var div1Node = document.getElementById("div_1");

//获取div_3节点

var div3Node = document.getElementById("div_3");

//使用replaceNode()方法将div_3替换掉div_1节点

//div1Node.replaceNode(div3Node);

div1Node.parentNode.replaceChild(div3Node, div1Node);

}

结果：

需求:实现div_3不改变而，用div_3再修改div_1，即克隆cloneNode()

//需求:实现div_3不改变而，用div_3再修改div_1，即克隆clonNode()

function clonNode(){

//获取div_1节点

var div1Node = document.getElementById("div_1");

//获取div_3节点

var div3Node = document.getElementById("div_3");

//cloneNode(boolean):boolean代表是否将其子节点也克隆

var cloneDiv3 = div3Node.cloneNode(true);

div1Node.parentNode.replaceChild(cloneDiv3, div1Node);

}

结果：

firstNode = childNode(0)

lastNode = childNode(length-1)

20示例——新闻字体

<!DOCTYPE html>

<html>

<head>

<title>新闻字体的大中小样式</title>

function changeFontSize(size){

var newstextDiv = document.getElementById("newstext");

newstextDiv.style.fontSize = size+"px";

}

</script>

a:link a:VISITED {

color:purple;

}

a:hover{

color:orange;

}

div{

width:600px;

}

</style>

</head>

<body>

<!-- 实现使用超链接实现大中小字体样式的变更

思路：1，先有新闻数据，并用标签进行封装

2，定义一些页面样式

3，确定事件源和时间，以及处理方式中被处理的节点。

事件源：a标签，事件：onclick

被处理的节点：div_newstext

超链接节点本身就有默认的点击事件,需要给超链接加入自定义的事件处理，就要先取消超链接默认的点击效果

方式一：href="##"

方式二：启动JS的href="javascript:void(0)" 然后再设置onclick事件

三个a标签使用一个方法，并传入不同的字体参数，通过document.getElementById("id").style再设置其属性即可，对象调用使用fontSize这种形式

-->

<h1>这是一个新闻标题</h1>

<hr>

这是一段新闻，目的是为了设置新闻字体的大中小样式。实现使用超链接实现大中小字体样式的变更。这是一段新闻，目的是为了设置新闻字体的大中小样式。实现使用超链接实现大中小字体样式的变更。这是一段新闻，目的是为了设置新闻字体的大中小样式。实现使用超链接实现大中小字体样式的变更。这是一段新闻，目的是为了设置新闻字体的大中小样式。实现使用超链接实现大中小字体样式的变更。这是一段新闻，目的是为了设置新闻字体的大中小样式。实现使用超链接实现大中小字体样式的变更。这是一段新闻，目的是为了设置新闻字体的大中小样式。实现使用超链接实现大中小字体样式的变更。这是一段新闻，目的是为了设置新闻字体的大中小样式。实现使用超链接实现大中小字体样式的变更。这是一段新闻，目的是为了设置新闻字体的大中小样式。实现使用超链接实现大中小字体样式的变更。这是一段新闻，目的是为了设置新闻字体的大中小样式。实现使用超链接实现大中小字体样式的变更。这是一段新闻，目的是为了设置新闻字体的大中小样式。实现使用超链接实现大中小字体样式的变更。这是一段新闻，目的是为了设置新闻字体的大中小样式。实现使用超链接实现大中小字体样式的变更。

</div>

</body>

</html>

结果：

大：

中：

小：

21.示例——新闻字体2

需求：除了变化大小，也变化字体的颜色

也document.getElementById("id").style.属性设置

但是如果要改变更多属性时，这样操作就会很烦躁，因此需要进行样式封装。

将多个所需的样式进行封装，一般使用类选择器；

封装到选择器中，只要给指定的标签加载不同的选择器即可；

函数传值时，传入选择器；

设置时，document.getElementById(“id”).className = 选择器名称;即可

样式定义了，如果定义了类选择器，样式没有生效，有可能是id选择器优先级更高，且Style属性优先级最高。

<!DOCTYPE html>

<html>

<head>

<title>新闻字体的大中小样式</title>

function changeFontSize(size){

var newstextDiv = document.getElementById("newstext");

newstextDiv.style.fontSize = size+"px";

}

function changeFont(selector){

var newstextDiv = document.getElementById("newstext");

newstextDiv.className = selector;

}

</script>

a:link a:VISITED {

color:purple;

}

a:hover{

color:orange;

}

div{

width:600px;

}

.max{

color:#22FF22;

background-color:#ee0000;

}

.mid{

color:#0044ff;

background-color:#FF5500;

}

.min{

color:#4433ff;

background-color:#000000;

}

</style>

</head>

<body>

<!-- 实现使用超链接实现大中小字体样式的变更

思路：1，先有新闻数据，并用标签进行封装

2，定义一些页面样式

3，确定事件源和时间，以及处理方式中被处理的节点。

事件源：a标签，事件：onclick

被处理的节点：div_newstext

超链接节点本身就有默认的点击事件,需要给超链接加入自定义的事件处理，就要先取消超链接默认的点击效果

方式一：href="##"

方式二：启动JS的href="javascript:void(0)" 然后再设置onclick事件

三个a标签使用一个方法，并传入不同的字体参数，通过document.getElementById("id").style.属性再设置其属性即可，对象调用使用fontSize这种形式

-->

<h1>这是一个新闻标题</h1>

<hr>

<br/>

<h3>class选择器方式变换样式</h3>

</div>

</body>

</html>

大：

标准：

小：

22.示例——展开闭合列表

默认不显示列表里的条目overflow，一点击则显示。

overflow:visible显示，auto自动，hidden隐藏，scroll滚动。用于检索或设置对象的内容超过指定高度或宽度时如何管理内容。

事先指定区域的宽高，超出部分使用overflow进行设置样式

思路：

标签封装数据，html
定义样式css
明确事件源，时间，以及要处理节点，dom
明确具体的操作方式，其实就是时间的处理内容

将dl属性的overflow的值进行hidden和visible切换（通过标记记录每次点击，然后判断选择来隐藏或者显示）
因此要先获取dl节点
改变该节点的style.overflow属性

<!DOCTYPE html>

<html>

<head>

<title>展开闭合列表</title>

dl dd{

margin:0px;

}

dl{

height:15px;

overflow:hidden;

}

</style>

var flag = true;

function expandDT(){

//获取dt标签

var dtTag = document.getElementsByTagName("dl")[0];

if(flag){

dtTag.style.overflow = "visible";

flag = false;

}else{

dtTag.style.overflow = "hidden";

flag = true;

}

</script>

</head>

<body>

<dl>

<dt onclick="expandDT()" style="font-size:12px;">展开闭合条目</dt>

<dd>展开闭合条目1</dd>

<dd>展开闭合条目2</dd>

<dd>展开闭合条目3</dd>

<dd>展开闭合条目4</dd>

</dl>

</body>

</html>

结果：

23.示例——展开闭合列表2

问题一：写法太繁琐，可以预定义样式已降低JS和CSS的耦合性

<!DOCTYPE html>

<html>

<head>

<title>展开闭合列表</title>

dl dd{

margin:0px;

}

/* dl{

height:15px;

overflow:hidden;

} */

.open{

height:60px;

overflow:visible;

}

.close{

height:15px;

overflow:hidden;

}

</style>

var flag = true;

function expandDT(){

//获取dt标签

var dtTag = document.getElementsByTagName("dl")[0];

if(flag){

dtTag.style.overflow = "visible";

flag = false;

}else{

dtTag.style.overflow = "hidden";

flag = true;

}

function openClose(){

var dtTag = document.getElementsByTagName("dl")[0];

if(dtTag.className == "open"){

dtTag.className = "close";

}else{

dtTag.className = "open";

}

</script>

</head>

<body>

<dt onclick="openClose()">展开闭合条目</dt>

<dd>展开闭合条目1</dd>

<dd>展开闭合条目2</dd>

<dd>展开闭合条目3</dd>

<dd>展开闭合条目4</dd>

</dl>

</body>

</html>

结果：

有多个dl时，可以通过传值方式，区分从而操作多个dl闭合：

<dt onclick="openClose(0)">展开闭合条目一</dt>

<dd>展开闭合条目1</dd>

<dd>展开闭合条目2</dd>

<dd>展开闭合条目3</dd>

<dd>展开闭合条目4</dd>

</dl>

<dt onclick="openClose(1)">展开闭合条目二</dt>

<dd>展开闭合条目1</dd>

<dd>展开闭合条目2</dd>

<dd>展开闭合条目3</dd>

<dd>展开闭合条目4</dd>

</dl>

<dt onclick="openClose(2)">展开闭合条目三</dt>

<dd>展开闭合条目1</dd>

<dd>展开闭合条目2</dd>

<dd>展开闭合条目3</dd>

<dd>展开闭合条目4</dd>

</dl>

问题：如果传值的index顺序变了，会影响闭合效果的正确性。

解决：传入当前被触发的节点即可（this）

<!DOCTYPE html>

<html>

<head>

<title>展开闭合列表</title>

dl dd{

margin:0px;

}

dl{

height:20px;

}

/* dl{

height:15px;

overflow:hidden;

} */

.openDl{

overflow:visible;

}

.closeDl{

overflow:hidden;

}

</style>

var flag = true;

function expandDT(){

//获取dt标签

var dtTag = document.getElementsByTagName("dl")[0];

if(flag){

dtTag.style.overflow = "visible";

flag = false;

}else{

dtTag.style.overflow = "hidden";

flag = true;

}

function openClose(node){

//var dtTag = document.getElementsByTagName("dl")[0];

var nodeDl = node.parentNode;

if(nodeDl.className == "openDl"){

nodeDl.className = "closeDl";

}else{

nodeDl.className = "openDl";

}

</script>

</head>

<body>

<dt onclick="openClose(this)">展开闭合条目一</dt>

<dd>展开闭合条目1</dd>

<dd>展开闭合条目2</dd>

<dd>展开闭合条目3</dd>

<dd>展开闭合条目4</dd>

</dl>

<dt onclick="openClose(this)">展开闭合条目二</dt>

<dd>展开闭合条目1</dd>

<dd>展开闭合条目2</dd>

<dd>展开闭合条目3</dd>

<dd>展开闭合条目4</dd>

</dl>

<dt onclick="openClose(this)">展开闭合条目三</dt>

<dd>展开闭合条目1</dd>

<dd>展开闭合条目2</dd>

<dd>展开闭合条目3</dd>

<dd>展开闭合条目4</dd>

</dl>

</body>

</html>

结果：

24.示例——展开闭合列表3

在多个列表下，一次只展开一个列表，当打开其中一个时，其他的列表闭合

怎么保证只展开一个？

思路：获取所有dl节点getElementsByTagName；遍历这些节点，只对当前的dl进行展开或者闭合操作(parentNode == 遍历到的节点)，其他节点都进行闭合操作。

<!DOCTYPE html>

<html>

<head>

<title>展开闭合列表</title>

div{

height:100px;

}

dl dd{

margin:0px;

}

dl{

height:20px;

}

/* dl{

height:15px;

overflow:hidden;

} */

.openDl{

overflow:visible;

}

.closeDl{

overflow:hidden;

}

</style>

//只展开闭合当前节点的条目，其他的都闭合

function openClose1(node){

//var dtTag = document.getElementsByTagName("dl")[0];

var nodeDl = node.parentNode;

//通过node的length进行遍历当前所有dl节点

var collNodes = document.getElementsByTagName("dl");

for (var x = 0; x < collNodes.length; x++) {

//遍历到的节点为当前节点才进行展开或者闭合

if(collNodes[x] == nodeDl){

if(nodeDl.className == "openDl"){

nodeDl.className = "closeDl";

}else{

nodeDl.className = "openDl";

}

}else{

collNodes[x].className = "closeDl";

}

</script>

</head>

<body>

<div>

<dt onclick="openClose1(this)">展开闭合条目一</dt>

<dd>展开闭合条目1</dd>

<dd>展开闭合条目2</dd>

<dd>展开闭合条目3</dd>

<dd>展开闭合条目4</dd>

</dl>

</div>

<div>

<dt onclick="openClose1(this)">展开闭合条目二</dt>

<dd>展开闭合条目1</dd>

<dd>展开闭合条目2</dd>

<dd>展开闭合条目3</dd>

<dd>展开闭合条目4</dd>

</dl>

</div>

<div>

<dt onclick="openClose1(this)">展开闭合条目三</dt>

<dd>展开闭合条目1</dd>

<dd>展开闭合条目2</dd>

<dd>展开闭合条目3</dd>

<dd>展开闭合条目4</dd>

</dl>

</div>

</body>

</html>

结果：

25.示例——好友菜单

FireForx和IE6的内核不一样，解析的效果也会不一样

需求：完成一个好友菜单，展开闭合效果

对表格中的ul进行样式定义：取出无序列表的样式；取消ul的内外边距

对表格及单元格的框线进行定义；

设置表格中的超链接样式；

要设置菜单栏和菜单项，a标签有效区域有限，ul标签也是有效的，所以可以对td单元格中的一部分进行封装：先在td里添加背景色，然后再分别设置ul和a标签的的背景色

设置预定义样式：事先隐藏ul内容（按高度隐藏）也可以使用display进行设置

inline行内自动填充，如果一行显示不下另起一行；block另起一行单独作为区块显示。

怎么获取a标签自己对应的ul标签：使用当前a标签的parentNode,然后再通过其拿到ul，要求一次展开一个ul其他的闭合。

<!DOCTYPE html>

<html>

<head>

/* 取消li标签的图标list-style */

table td li{

list-style: none;

background-color: teal;

}

table td ul{

margin:0px;

padding:0px;

}

table td a:link,table td a:VISITED {

color:blue;

text-decoration: none;/* 取消a标签下划线 */

}

table td a:hover {

color:red;

}

/* 预定义样式，设置展开和闭合的样式display */

.open{

display:block;

}

.close{

display:none;

}

</style>

function list(node){

//获取当前节点

var parNode = node.parentNode;//获取到的是td

var curULNodes = parNode.getElementsByTagName("ul")[0];/* 获取当前的ul节点 */

//获取所有的ul节点

var tabNode = document.getElementById("menulist");

var ulsNodes = tabNode.getElementsByTagName("ul");

for (var x = 0; x < ulsNodes.length; x++) {

if(ulsNodes[x] == curULNodes){

if(curULNodes.className == "open"){

curULNodes.className = "close";

}else{

curULNodes.className = "open";

}

}else{

ulsNodes[x].className = "close";

}

</script>

</head>

<body>

<tr>

<td>

<a href="javascript:void(0)" onclick="list(this)">好友菜单一</a>

<li>张一

<li>张二

<li>张三

<li>张四

</ul>

</td>

</tr>

<tr>

<td>

<a href="javascript:void(0)" onclick="list(this)">好友菜单二</a>

<li>李一

<li>李二

<li>李三

<li>李四

</ul>

</td>

</tr>

<tr>

<td>

<a href="javascript:void(0)" onclick="list(this)">好友菜单三</a>

<li>王一

<li>王二

<li>王三

<li>王四

</ul>

</td>

</tr>

<tr>

<td>

<a href="javascript:void(0)" onclick="list(this)">好友菜单四</a>

<li>赵一

<li>赵二

<li>赵三

<li>赵四

</ul>

</td>

</tr>

</table>

</body>

</html>

结果：

26.示例——创建表格

在页面中创建一个表格，由用户决定创建几行几列的表格

有事件源，比如按钮；必须有一个存储生成的标个节点的位置

思路：可以通过createElement创建元素的形式来实现

1，创建表格节点；2，创建tbody节点；3，创建行节点tr；4，创建单元格节点td；5，让这些节点有关系，指定层次的几点添加append()，appendChild逐级添加；6，获取div节点，并将创建好的表格放进去

<!DOCTYPE html>

<html>

<head>

<title>创建表格一</title>

table td{

border:maroon 1px solid;

width:200px;

}

</style>

function createTab(){

//1，创建表格节点；

var tabNode = document.createElement("table");

//2，创建tbody节点；

var tbodyNode = document.createElement("tbody");

//3，创建行节点tr；

var trNode = document.createElement("tr");

//4，创建单元格节点td；

var tdNode = document.createElement("td");

tdNode.innerHTML = "这是一个单元格";

//5，让这些节点有关系，指定层次的几点添加append()，appendChild逐级添加；

trNode.appendChild(tdNode);

tbodyNode.appendChild(trNode);

tabNode.appendChild(tbodyNode);

//6，获取div节点，并将创建好的表格放进去

document.getElementById("tab").appendChild(tabNode);

}

</script>

</head>

<body>

<hr>

</body>

</html>

结果：

27.示例——创建表格——使用表格对象

无论td tr tbody都是表格里面的东西，所以只要有表格对象即可

insertRow(index)创建行，并将行加入到rows集合中，相当于createElement和appendChild两个方法。index默认-1表示将行插入到行集合的结尾处，其他值表示在指定位置插入行。

行是有单元格组成，于是可以使用行对象tr对象，insertCell()

function createTab2(){

//1，创建表格节点；

var tabNode = document.createElement("table");

//2，通过insertRow创建行

var trNode = tabNode.insertRow();

//3,通过insertCell创建列

var tdNode = trNode.insertCell();

tdNode.innerHTML = "这是一个单元格";

//4，将表格节点添加到div中

document.getElementById("tab").appendChild(tabNode);

}

结果：

function createTab3(){

//1，创建表格节点；

var tabNode = document.createElement("table");

for (var x = 0; x <= 4; x++) {

//2，通过insertRow创建行

var trNode = tabNode.insertRow();

for (var y = 0; y <= 5; y++) {

//3,通过insertCell创建列

var tdNode = trNode.insertCell();

tdNode.innerHTML = (x+1)+"行-"+(y+1)+"列";

}

//4，将表格节点添加到div中

document.getElementById("tab").appendChild(tabNode);

document.getElementsByName("tab3")[0].disabled = true;

}

结果：

创建一次表格后，不能再继续创建：button组件中的disabled属性，设置或获取控件的状态，只有true和false。可以在创建表格一次后将该button属性设置为true即可

28.示例——创建表格——指定行列

在页面有输入框供用户输入指定的行列：

function createTab4(){

//1，创建表格节点；

var tabNode = document.createElement("table");

//获取用户输入的行和列

var rowval = document.getElementsByName("rownum")[0].value;

var cellval = document.getElementsByName("collnum")[0].value;

for (var x = 0; x < rowval; x++) {

//2，通过insertRow创建行

var trNode = tabNode.insertRow();

for (var y = 0; y < cellval; y++) {

//3,通过insertCell创建列

var tdNode = trNode.insertCell();

tdNode.innerHTML = (x+1)+"行-"+(y+1)+"列";

}

//4，将表格节点添加到div中

document.getElementById("tab").appendChild(tabNode);

document.getElementsByName("tab4")[0].disabled = true;

}

行：<input type="text" name="rownum"/>

列：<input type="text" name="collnum"/>

<br/>

<hr>

29.示例——删除表格的行和列

deleteRow(rowindex):rowindex表示行号（0开始）

需要判断表格是否存在，所以创建表格是要创建表格的id或者name

动态设置表格id方法：直接调用属性完成,tabNode.id = “tabId”;tabNode.setAttribute(“id”,” tabId”);

function delRow(){

//判断表格是否存在

var tabNode = document.getElementById("tabId");

if(tabNode){

//获取要删除的行数

var rownum = document.getElementsByName("deleteRow")[0].value;

tabNode.deleteRow(rownum-1);

}else{

alert("表格不存在");

return;

}

行：<input type="text" name="rownum"/>

列：<input type="text" name="collnum"/>

删除的行：<input type="text" name="deleteRow"/>

<br/>

<hr>

删除列：其实就是删除同一行中的同一位置的单元格

function delColl(){

//判断表格是否存在

var tabNode = document.getElementById("tabId");

if(tabNode){

//要先获取某行，再删除其列

var collnum = document.getElementsByName("deleteColl")[0].value;

//表格中行集合中的列集合的长度要保证存在

if(collnum >=1 && collnum<=tabNode.rows[0].cells.length){

for (var x = 0; x < tabNode.rows.length; x++) {

//获取要删除的行数

tabNode.rows[x].deleteCell(collnum-1);

}

}else{

alert("要删除的列不存在");

return;

}

}else{

alert("表格不存在");

return;

}

<body>

行：<input type="text" name="rownum"/>

列：<input type="text" name="collnum"/><br/>

删除的行：<input type="text" name="deleteRow"/><br/>

删除的列：<input type="text" name="deleteColl"/>

<br/>

<hr>

</body>

30.示例——行颜色间隔显示并高亮

预定义样式

思路：因为要操作行的样式，所以要先获取表格对象；获取所有被操作的行对象（表格对象.rows）；遍历(从第二行开始遍历)行并给每一行指定样式。

问题：JS写在DOM上面，会导致获取表格对象时还没有加载到DOM对象，而读取不到表格对象，因此，可以使用onload方法

高亮光标所在行：事件，onmouseover光标在此之上 onmouseout光标移走后。在光标高亮之前把颜色记录下来，在光标移走后，再还原颜色。

想让所有行都能适用的onmouseover和onmouseout，所以在遍历行时，就给行设置此两个事件。

<!DOCTYPE html>

<html>

<head>

<title>行颜色间隔显示并高亮</title>

table{

width:400px;

border:maroon 1px solid;

border-collapse: collapse;

}

table th{

border:maroon 1px solid;

background-color: gray;

}

table td{

border:maroon 1px solid;

}

/* 预定义奇偶行的样式 */

/* 奇数 */

.odd{

background-color: teal;

}

/* 偶数 */

.even{

background-color: olive;

}

/* 鼠标悬停样式 */

.over{

background-color: red;

}

</style>

//记录原始颜色

var oldColor;

function trColor(node){

//1 因为要操作行的样式，所以要先获取表格对象；

var tabNode = document.getElementById("tab");

//2 获取所有被操作的行对象（表格对象.rows）；

var trNodes = tabNode.rows;

//3 遍历(从第二行开始遍历)行并给每一行指定样式。

for (var x = 1; x < trNodes.length; x++) {

//奇数行一种颜色

if(x%2==1){

trNodes[x].className = "odd";

//偶数行另一种颜色

}else{

trNodes[x].className = "even";

}

trNodes[x].onmouseover = function(){

name = this.className;

this.className = "over";

}

trNodes[x].onmouseout = function(){

this.className = name;

}

//JS写在DOM上面，会导致获取表格对象时还没有加载到DOM对象，而读取不到表格对象，因此，可以使用onload方法

onload = function(){

trColor();

}

</script>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

结果：

31.示例——表格排序

需求：对年龄进行排序。年龄可点击：按钮或者a标签。

思路：1，排序就需要数组，获取需要参与排序的行对象数组；2，对行数组中的每一行的年龄单元格的数据进行比较，并完成行对象在数组中的位置置换；3，将排好序的数组重新添加回表格。

需要定义一个临时容器，临时容器存储的是数据的地址，用于存储需要排序的航对象

获取每个单元格的值：容器[x].cells[1].innerHTML

换位置：换位置的是行，而不是列

排完序后重新添加回表格，临时容器[x].parentNode.appendChild(临时容器[x]);

可以多次切换：使用flag记录切换标记，每次切换后，将其更改

临时容器存储的是数据的地址，排完序后，再将其地址添加到对应的位置

<!DOCTYPE html>

<html>

<head>

table{

width:400px;

border:maroon 1px solid;

border-collapse: collapse;

}

table th{

border:maroon 1px solid;

background-color: gray;

}

table td{

border:maroon 1px solid;

}

text-decoration: none;

}

a:hover{

color:yellow;

}

a:link a:VISITED {

color:blue;

}

</style>

//使用标记记录每次排序的标识，实现升序降序切换

var flag = true;

function sortAge(){

//1需要定义一个临时容器，临时容器存储的是数据的地址，用于存储需要排序的航对象

var ageArr = [];

var tabNode = document.getElementById("tab");

//2获取每个单元格的值：容器[x].cells[1].innerHTML

var trNodes = tabNode.getElementsByTagName("tr");

for (var x = 1; x < trNodes.length; x++) {

ageArr[x-1] = trNodes[x];

}

//对容器里的数值进行排序

//3换位置：换位置的是行，而不是列

mySort(ageArr);

//trNodes.parentNode.appendChild(ageArr);

//4排完序后重新添加回表格，临时容器[x].parentNode.appendChild(临时容器[x]);

if(flag){

for (var x = 0; x < ageArr.length; x++) {

alert(ageArr[x].cells[1].innerHTML);

//这里一定要使用临时容器的父节点

ageArr[x].parentNode.appendChild(ageArr[x]);

}

flag = false;

}else{

for (var x = ageArr.length-1; x >= 0; x--) {

alert(ageArr[x].cells[1].innerHTML);

//这里一定要使用临时容器的父节点

ageArr[x].parentNode.appendChild(ageArr[x]);

}

flag = true;

}

function mySort(ageArr){

for (var x = 0; x < ageArr.length-1; x++) {

for (var y = x+1; y < ageArr.length; y++) {

if(parseInt(ageArr[x].cells[1].innerHTML) > parseInt(ageArr[y].cells[1].innerHTML)){

var temp = ageArr[x];

ageArr[x] = ageArr[y];

ageArr[y] = temp;

}

</script>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

结果：

32.示例——全选商品列表

思路：获取所有的名称为item的复选框，判断checked的状态，为true的表示被选中，获取该节点的value进行累加。

<!DOCTYPE html>

<html>

<head>

function getSum(){

var sum = 0;

var itemsNode = document.getElementsByName("item");

for (var x = 0; x < itemsNode.length; x++) {

if(itemsNode[x].checked){

sum+= parseInt(itemsNode[x].value);

}

document.getElementById("sumId").innerHTML = sum;

}

function checkAll(node){

var itemsNode = document.getElementsByName("item");

for (var x = 0; x < itemsNode.length; x++) {

//全选的box的状态赋值为所有的itembox的状态

itemsNode[x].checked = node.checked;

}

</script>

</head>

<body>

<input type="checkbox" name="item" value="4000"/>笔记本电脑：4000<br/>

</body>

</html>

结果：

33.示例——邮件列表

CSS样式设置、行颜色间隔显示：

步骤：1，获取表格对象；2，获取行对象表对象.rows；3，对所有需要设置背景的行对象进行遍历；

全选：把全选复选框的状态赋值给其他所有复选框的状态

全选按钮：全选按钮、反选按钮(原来复选框的真假赋值为假真即非)、全选复选框三个功能都是一样的，在一个方法实现。通过传值方式解决：可以字符串、数字(0,1,2)等区别都可以。

删除所选邮件：获取所有mail节点；删除某一行（每个节点间都存在所属关系，可以按照层次关系拿，复选框是当前节点，复选框节点的父级为td,而td的父级就是tr节点）；然后trNode.parentNode.removeChild(trNode);即可。

在进行删除操作时，每次删除点前一个角标位的数据时，后一个角标位的数据会前移，但循环x++时，再次循环到下一条数据时，就会有一条前移的数据无法删除，所以使用x--回到前一个角标位进行操作。

只要remove就会改变长度，行长度在减少，但是循环的x在递增。即remove后，数据角标前移，但是x却在递增；让x—即可（也可以不做x—也不做删除，而是使用行记住所有要删除的标记，然后再遍历临时容器进行删除）；删完后还是需要颜色间隔显示，再调用一次颜色间隔显示的方法。

删除前进行删除确认：if(confirm(“确认删除？”))

注意：复选框中所有的复选框都要名字相同

mail.css:

table{

width:500px;

border:red 1px solid;

border-collapse: collapse;

}

table th{

border:maroon 1px solid;

background-color: gray;

}

table td{

border:maroon 1px solid;

}

/* 预定义奇偶行的样式 */

/* 奇数 */

.odd{

background-color: teal;

}

/* 偶数 */

.even{

background-color: olive;

}

/* 鼠标悬停样式 */

.over{

background-color: red;

}

<!DOCTYPE html>

<html>

<head>

@IMPORT url("mail.css");

</style>

var oldColor;

function trColor(){

//获取表格对象

var tabNode = document.getElementById("mail");

//通过表格对象获取所有行

var trNums = tabNode.rows;

//循环所有的行，将奇数行和偶数行分开设置不同颜色

for (var x = 1; x < trNums.length-1; x++) {

if(x%2==1){

trNums[x].className = "odd";

}else{

trNums[x].className = "even";

}

trNums[x].onmouseover = function(){

//在鼠标悬浮时记录之前的样式

oldColor = this.className;

this.className = "over";

}

trNums[x].onmouseout = function(){

this.className = oldColor;

}

onload = function(){

trColor();

}

//获取所有复选框的节点,使用当前节点的选中状态赋值给其他所有的复选框

function checkAll(node){

//获取所有复选框的节点

var checkboxNodes = document.getElementsByName("mails");

//循环所有的行，将奇数行和偶数行分开设置不同颜色

for (var x = 0; x < checkboxNodes.length; x++) {

checkboxNodes[x].checked = node.checked;

}

//使用标记区分：全选（1）、反选（-1）、取消全选（0）

//循环所有的复选节点，然后按条件操作

function checkMail(num){

//获取所有复选框的节点

var checkboxNodes = document.getElementsByName("mails");

//除了第一行和最后一行，循环所有的行，将奇数行和偶数行分开设置不同颜色

for (var x = 1; x < checkboxNodes.length-1; x++) {

if(num>0){

checkboxNodes[x].checked = true;

}else if(num<0){

checkboxNodes[x].checked = !checkboxNodes[x].checked;

}else{

checkboxNodes[x].checked = false;

}

function delMail(){

var checkboxNodes = document.getElementsByName("mails");

//除了第一行和最后一行，循环所有的行，将奇数行和偶数行分开设置不同颜色

for (var x = 1; x < checkboxNodes.length-1; x++) {

if(checkboxNodes[x].checked){

var trNode = checkboxNodes[x].parentNode.parentNode;

trNode.parentNode.removeChild(trNode);

//在进行删除操作时，每次删除点前一个角标位的数据时，后一个角标位的数据会前移，但循环x++时，再次循环到下一条数据时，就会有一条前移的数据无法删除，所以使用x--回到前一个角标位进行操作

x--;

}

trColor();

}

</script>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</td>

</tr>

</table>

</body>

</html>

结果：

34.示例——调查问卷

单选按钮演示：1，是否参与问卷调查？2，性格测试

<!DOCTYPE html>

<html>

<head>

#content{

display:none;

}

</style>

function checkRadio(node){

var radioNode = node.value;

var contentNode = document.getElementById("content");

if(radioNode == "yes"){

contentNode.style.display = "block";

}else{

contentNode.style.display = "none";

}

</script>

</head>

<body>

请问您是否接受以下问卷调查：

<input type="radio" name="ask" value="yes" onclick="checkRadio(this)"/>是

<input type="radio" name="ask" value="no" checked="checked" onclick="checkRadio(this)"/>否

调查问卷内容：<br/>

您的姓名：<input type="text"/><br/>

您的年龄：<input type="text"/>

</div>

</body>

</html>

结果：

35.示例——性格测试

步骤：1，判断radio中是否有答案被选中：获取所有的radio，并遍历判断checked的状态，用flag记录是否被选中

<!DOCTYPE html>

<html>

<head>

#ullist{

list-style: none;

margin:8px;

padding:4px;

}

.close{

display:none;

}

</style>

function getResult(){

var val;

var flag = false;

//获取所有单选按钮

var radioNode = document.getElementsByName("fruit");

for (var x = 0; x < radioNode.length; x++) {

//遍历判断checked的状态

if(radioNode[x].checked){

val = radioNode[x].value;

flag = true;

break;

}

//用flag记录是否被选中,如果被选中记录分数并显示相应div,没有被选中则提示未选中单选按钮

if(flag){

//判断值的范围

if(val<=3){

document.getElementById("less").style.display = "block";

document.getElementById("more").style.display = "none";

}else{

document.getElementById("less").style.display = "none";

document.getElementById("more").style.display = "block";

}

}else{

document.write("请选择一种水果")

}

</script>

</head>

<body>

<h2>欢迎您参与性格测试：</h2>

<div>

您喜欢的水果是什么？

<li><input type="radio" name="fruit" value="1"/>苹果

<li><input type="radio" name="fruit" value="2"/>葡萄

<li><input type="radio" name="fruit" value="3"/>芒果

<li><input type="radio" name="fruit" value="4"/>樱桃

<li><input type="radio" name="fruit" value="5"/>橘子

</ul>

</div>

<div id="less" class="close">1-3分：你的性格内向并扭曲，建议咨询心理医生</div>

<div id="more" class="close">4-6分：你的性格外向活泼，交往正常</div>

</body>

</html>

结果：

36.示例——下拉菜单——选择颜色

想拿到被选中的option时利用select对象拿到所有的options

获取所有的options;循环遍历所有的options；通过selectedIndex设置或获取选中选项的索引或位置

<!DOCTYPE html>

<html>

<head>

#div1{

width:100px;

height:100px;

position:relative;

float:left;

}

#div2{

width:100px;

height:100px;

position:relative;

float:left;

}

#div3{

width:100px;

height:100px;

position:relative;

float:left;

}

#text{

padding:10px;

width:300px;

position:relative;

clear:left;

}

</style>

function changeColor(node){

//注意通过node.style.backgroundColor获取属性值时，必须是在DOM节点中，相应标签里有style属性，如果是写在css中的样式属性时获取不了的

var divColor = node.style.backgroundColor;

document.getElementById("text").style.color = divColor;

}

function changeSelColor(val){

document.getElementById("text").style.color = val;

}

</script>

</head>

<body>

颜色检测区域，选择什么颜色的div，则文字变成什么颜色

</div>

<hr>

<option>请选择颜色</option>

</select>

</body>

</html>

结果：可以通过点击div区域或者下拉框调整字体的颜色

37.示例——下拉菜单——级联选择省市

方式一：使用二维数组的形式存储各个城市

方式二：通过option中的value值去对应设置json格式数据

步骤：

1，获取两个下拉菜单对象；2，获取到底选择的哪个省；3，通过角标到容器去获取对应城市数组；4，遍历这个数组，并将这个数组的元素封装成option对象createElement(“option”)创建optionDOM节点，添加到子菜单中

subNode.appendChild(optNode)；5，每次添加前，要将子菜单中的内容清空：遍历子菜单然后再removeChild(),删除时角标在递增，数据在往后，始终有数据没被删完，可以x++不使用，也可以在循环里写X--；清除第二种方法：直接让子菜单的length为0subSelNode.length=0

<!DOCTYPE html>

<html>

<head>

<title>级联选择城市</title>

select{

width:100px;

}

</style>

function changeProvice(){

//声明省份和城市的关系

var provinceArr = [['请选择城市'],['深圳','韶关','清远','佛山'],['武汉','恩施','宜昌','襄樊'],['万州','石柱','黔江','沙市'],['温州','绍兴','丽水','义乌']];

//1，获取两个下拉菜单对象；

var provinceSelNode = document.getElementById("province");

var citySelNode = document.getElementById("city");

//2，获取到底选择的哪个省；

var provinceIndex = provinceSelNode.selectedIndex;

//3，通过角标到容器去获取对应城市数组；

var citiesArr = provinceArr[provinceIndex];

//4，每次添加前，要将子菜单中的内容清空：遍历子菜单然后再removeChild(),删除时角标在递增，数据在往后，始终有数据没被删完，可以x++不使用，也可以在循环里写X--；清除第二种方法：直接让子菜单的length为0subSelNode.length=0

citySelNode.length = 0;

//5，遍历这个数组，并将这个数组的元素封装成option对象createElement(“option”)创建option DOM节点，添加到子菜单中subNode.appendChild(optNode)；

for (var x = 0; x < citiesArr.length; x++) {

var optionNode = document.createElement("option");

optionNode.innerHTML = citiesArr[x];

citySelNode.appendChild(optionNode);

}

</script>

</head>

<body>

<option>请选择省份</option>

</select>

<option>请选择城市</option>

</select>

</body>

</html>

结果：

38.示例——添加删除附件

需求：动态添加或删除某些附件。

添加附件时：因为文件选取框定义在行对象中，所以只要给表格创建新的行和单元格即可insertRow() insertCell()。

删除：删除当前所在的行即可。

<!DOCTYPE html>

<html>

<head>

<title>动态添加或删除附件</title>

a:link,a:visited{

color:blue;

text-decoration: none;

}

a:hover{

color:purple;

text-decoration: none;

}

</style>

function addFile(){

var tabNode = document.getElementById("tabId");

//table里添加tr，tr里添加td

var trNode = tabNode.insertRow();

var tdNode_text = trNode.insertCell();

var tdNode_del = trNode.insertCell();

tdNode_text.innerHTML = "<input type='file'/>";

tdNode_del.innerHTML = "<a href='javascript:void(0)' οnclick='delFile(this)'>删除附件</a>";

}

function delFile(node){

//获取父级节点，在通过父级节点删除本节点

var trNode = node.parentNode.parentNode;

trNode.parentNode.removeChild(trNode);

}

</script>

</head>

<body>

<tr>

</tr>

</table>

</body>

</html>

结果：

39.示例——表单校验——涉及的时间和信息提示方式

用户输入信息后，在发送到服务端之前进行校验，校验非法则不发送数据到服务端

光标焦点失去时：onblur

<!DOCTYPE html>

<html>

<head>

function checkUser(){

var username = document.getElementById("username");

var userspan = document.getElementById("userspan");

if(username.value == "lisi"){

userspan.innerHTML = "用户名正确".fontcolor("green");

}else{

userspan.innerHTML = "用户名错误".fontcolor("red");

}

</script>

</head>

<body>

<form>

用户名：<input type="text" id="username" onblur="checkUser()"/><span id="userspan"></span><br/>

密码：<input type="password"/>

</form>

</body>

</html>

结果：

40.示例——表单校验——涉及的正则校验

正确信息和错误信息以及要求先写好，然后根据校验的结果来显示不同信息

正则基本和java正则差不多

需求：name四个字母，并且忽略大小写

re = new RegExp(“pattern”,”flag”);pattern为正则表达式，flag为标记全文查找出现的所有pattern，i忽略大小写，m多行查找

JS中的match方法不是返回真假值，而是将查到的匹配的结果放到数组中并返回

JS中test方法返回布尔值，找出被查找的字符串中是是否存在某值。

正则中如果使用”/正则内容/”,则\等特殊符号不需要转义了。

<!DOCTYPE html>

<html>

<head>

function checkUser2(){

var username = document.getElementById("username");

var userspan = document.getElementById("userspan");

var regex = new RegExp("^[a-z]{4}$","i");//^开始标志$结束标志，i表示忽略大小写

if(regex.test(username.value)){

userspan.innerHTML = "用户名正确".fontcolor("green");

}else{

userspan.innerHTML = "用户名错误".fontcolor("red");

}

</script>

</head>

<body>

<form>

用户名：<input type="text" id="username" onblur="checkUser2()"/><span id="userspan"></span><br/>

密码：<input type="password"/>

</form>

</body>

</html>

结果：

41.示例——表单校验——表单提交的两种方式

用户名正确才提交，非法则不提交。要根据数据是否合法再决定提交按钮。

对于submit按钮，会默认将form表单中的数据打成包进行提交。因此需要在form里加上方式一：onsubmit事件，重写表单默认的提交事件处理。

onsubmit="return checkForm()"在onsubmit事件里面要对checkForm方法进行布尔值的返回，如果为真才会真正提交。

方式二：自定义提交按钮或者其他组件，然后再方法中直接调用submit()方法

<!DOCTYPE html>

<html>

<head>

function checkUser2(){

var flag = false;

var username = document.getElementById("username");

var userspan = document.getElementById("userspan");

var regex = new RegExp("^[a-z]{4}$","i");//^开始标志$结束标志，i表示忽略大小写

if(regex.test(username.value)){

userspan.innerHTML = "用户名正确".fontcolor("green");

flag = true;

}else{

userspan.innerHTML = "用户名错误".fontcolor("red");

flag = false;

}

return flag;

}

function checkForm(){

if(checkUser2()){

return true;

}else{

return false;

}

function mysubmit(){

var userForm = document.getElementById("userForm");

userForm.submit();

}

</script>

</head>

<body>

用户名：<input type="text" id="username" onblur="checkUser2()"/><span id="userspan"></span><br/>

密码：<input type="password"/><br/>

</form>

</body>

</html>

结果：

42.示例——表单校验——涉及的正则校验

更多的校验。如果有很多表单元素，要拿到很多的表单的值，要写正则等，且获取方法基本一致，所以就进行了方法截取。

<!DOCTYPE html>

<html>

<head>

function checkForm(id,regex,spanId,okInfo,errInfo){

var flag = false;

var val = document.getElementById(id).value;

var userspan = document.getElementById(spanId);

if(regex.test(val)){

userspan.innerHTML = okInfo.fontcolor("green");

flag = true;

}else{

userspan.innerHTML = errInfo.fontcolor("red");

flag = false;

}

return flag;

}

function checkUser(){

var regex = /^[a-z]{4}$/;

return checkForm("username",regex,"userspan","用户名正确","用户名错误");

}

function checkPwd(){

var regex = /^\d{6,8}$/;

return checkForm("pwd",regex,"pwdspan","密码正确","密码错误");

}

function checkRePwd(){

var pwd = document.getElementById("pwd").value;

var repwd = document.getElementById("repwd").value;

var repwdspan = document.getElementById("repwdspan");

if(pwd == repwd){

repwdspan.innerHTML = "密码一致".fontcolor("green");

return true;

}else{

repwdspan.innerHTML = "密码不一致".fontcolor("red");

return false;

}

function checkMail(){

var regex = /^\w+@\w+(\.\w+)+$/;

return checkForm("mail",regex,"mailspan","邮件正确","邮件错误");

}

function submitForm(){

if(checkUser()&&checkPwd()&&checkRePwd()&&checkMail()){

return true;

}else{

return false;

}

function mysubmit(){

var userForm = document.getElementById("userForm");

userForm.submit();

}

</script>

</head>

<body>

用户名：<input type="text" id="username" onblur="checkUser()"/><span id="userspan"></span><br/>

密码：<input type="password" id="pwd" onblur="checkPwd()"/><span id="pwdspan"></span><br/>

确认密码：<input type="password" id="repwd" onblur="checkRePwd()"/><span id="repwdspan"></span><br/>

邮件：<input type="text" id="mail" onblur="checkMail()"/><span id="mailspan"></span><br/>

</form>

</body>

</html>

结果：

Jyann~

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
DOM基础

本文内容是根据毕晓东老师的视频教程总结而得。DOM相关基础知识。1.DOM概述Document Object Model(文档对象模型)，主要用来将标记型文档封装成对象，并将标记型文档中所有的内容（标签、文本、属性等）都封装成对象。封装成对象的目的：为了更方便的操作这些文档以及文档中的所有内容。因为对象的出现就可以有属性和行为被调用。标记型文档特征：除了标签就是标签封装的内容或者标...
复制链接

扫一扫