黑马程序员--html（二）

最新推荐文章于 2024-07-20 08:27:40 发布

原创最新推荐文章于 2024-07-20 08:27:40 发布 · 303 阅读

CC 4.0 BY-SA版权

本文详细阐述了DOM（文档对象模型）的概念、作用以及在HTML、XML等标记型文档中的应用。讨论了DOM的层次结构、节点类型、获取方法、事件处理流程，并通过实例展示了如何使用DOM进行动态网页的构建、数据排序、样式动态调整等功能。同时，介绍了正则表达式的基本操作和应用，以及表单组件的特性与操作。最后，探讨了鼠标坐标获取及元素定位的技术，为开发者提供了一站式的DOM操作指南。

------- android培训、java培训、期待与您交流！ ----------

DOM（document Object model）文档对象模型。

其实就是讲一些标记型的文档以及文档中的内容当成对象。

为什么要将这些文档以及其中的标签封装成对象呢？

因为可以再对象中定义其属性和行为，可以方便操作这些对象。

DOM在封装标记型文档时，有三层模型。

DOM1:针对html文档。

DOM2:针对xml文档。

DOM3:针对xml文档。

html、xhtml、xml：这些都是标记型文档。

DHTML：是多个技术的综合体。叫做动态的html。

html：负责将数据进行标签的封装。

css：负责标签的样式。

dom：负责将标签以及标签中的数据封装成对象。

javascript：负责通过程序设计方式来操作这些对象。

标签之间存在着层次关系：

html

|--head

|--title

|--base

|--link

|--meta

|--style

|--script

|--body

|--div

|--form

|--input

|--select

|--span

|--a

|--table

|--tbody

|--tr

|--td

|--th

|--dl

|--dt

|--dd

通过这个标签层次，可以形象的看作一个树形结构。那么我也称标记型文档，加载进内存的是一棵DOM树。这些标签以及标签的数据都是这棵树上的节点。

当标记型文档加载进内存，那么内存中有了一个对应的DOM树。

DOM对于标记型文档的解析有一个弊端就是文档过大，相对消耗资源。

对于大型文档可以使用SAX这种方式解析。

节点类型：

标签型节点：类型：1

属性型节点：类型：2

文本型节点：类型：3

注释型节点：类型：8

Document：类型：9

注意：标签之间存在空行时，会出现一个空白的文本节点，在获取节点时一定要注意。

节点的关系：

父节点。parentNode

子节点。chileNodes:直接子节点。返回的是一个节点对象数组。

兄弟节点

上一个兄弟节点。previousSibling

下一个兄弟节点。nextSibling

----------------------------------------------

获取可以通过节点的层次关系完成。

也可以通过document对象完成。

getElementById：通过id属性值获取对应的节点对象。如果有多个id值相同。获取到的是第一个id所属对象。

getElementsByName：通过标签的name属性值获取对象。返回的一堆对象。其实是一个对象数组

getElementsByTagName：既没有id也没有name时，可是通过标签名来获取节点对象。返回的是一堆对象。其实是一个对象数组。大多容器型标签都具有该方法。

event.returnValue = false;设置了不再向下运行

event.srcElement;获得当前事件的节点

---------------------------------------------

DOM编程：

1. 定义界面：

通过html的标签将数据进行封装

2. 定义一些静态的样式

通过css

3. 需要动态的完成的和用户的交互

1. 先明确事件源

2. 明确事件将事件注册到事件源上

3. 通过js的函数对象事件进行处理

4. 在处理过程需要明确被处理的区域

-----------------------------------------------

table标签的示例：

1. 在页面上通过按钮创建一个表格。

1. 创建一个table节点。document.crateElement(“table”);

2. 通过table节点的insertRow()方法创建表格的行对象并添加到rows集合中。

3. 通过行对象的insertCell()方法创建单元格对象，并添加到cells集合中

4. 给单元格中添加数据。

i. 创建一个节点如文本节点，document.createTextNode(“文本内容”)，通过单元格对象appendChild方法将文本节点添加到单元格的尾部

ii. 可以通过单元格的innerHTML，添加单元格中的元素。

5. 建立好表格节点，添加到DOM树中。也就是页面的指定位置上。

2. 如何删除表格中的行或列

1. 删除行：获取表格对象，通过表格对象中的deleteRow方法，将指定的行索引传入deleteRow方法中

2. 删除列：表格没有直接删除列的方法，要通过删除每一行中指定的单元格来完成删除列的动作。获取所有的行对象，进行遍历，通过行对象的deleteCell方法将指定单元格删除。

3. 对表格中的数据进行排序

1. 获取表格中的所有行对象

2. 定义临时存储将需要进行排序的行对象存入到数组中

3. 对数组进行排序，通过比较每一个行对象中指定单元格中的数据，如果是整数需要通过parseInt转换

4. 将排序后的数组通过遍历，将每一个行对象重新添加回表格。通过tbody节点的appendChild方法。

5. 其实排序就是每一个行对象的引用取出

4. 表格的行颜色间隔显示，并在鼠标指定的行上高亮显示

1. 获取所有的行间隔，将需要间隔颜色显示的行对象进行动态的className属性的指定，那么前提是：先定义好类选择器

2. 为了完成高亮，需要用到两个事件，onmouseover（鼠标进入），onmouseout（鼠标移出）

3. 为了方便可以在遍历行对象时，将每一个行对象都进行两个事件属性的指定。并通过匿名函数完成该事件的处理

4. 高亮的原理就是将鼠标进入时的指定颜色改变，改编曲先记录住原理行行对象的样式。这样在鼠标离开时，可以将原样式还原。

5. 该样式需要在页面加载完后直接显示，所以使用的window.onload事件完成

5. 完成一个与css手册中一样的示例。

通过下拉菜单选择先指定样式属性的使用效果

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />

<title>无标题文档</title>

<scripttype="text/javascript" src="doctool.js"></script>

<scripttype="text/javascript">

functionchange(){

var selNode = byId("selid");

var value =selNode.options[selNode.selectedIndex].value;

//alert(value);

var divNode1 = byId("cssid");

var divNode2 = byId("textid");

divNode1.style.textTransform = value;

divNode2.innerText ="text-transform:"+value+";";

}

</script>

<styletype="text/css">

#cssid{

height:100px;

width:300px;

background-color:#00FF99

}

#textid{

background-color:#CCCCCC;

width:300px;}

</style>

</head>

<body>

<divid="cssid">

Good good study,Day day up

</div>

<p>

</p>

<selectid="selid" onchange="change()">

<optionvalue="none">--text-transform--</option>

<option value="capitalize">首字母大写</option>

<option value="uppercase">所有字母大写</option>

<option value="lowercase">所有字母小写</option>

</select>

<p></p>

<divid="textid">

text-transform:none;

</div>

</body>

</html>

6. 表单中的组件。

单选框，复选框。

这两个组件都一个属性来表示其选中与否的状态。checked

完成一个对多个复选框，进行全选的操作

思路：将全选那个复选框的checked状态付给所有的其他checkbox即可

<input type=”checkbox”name=”all” onclick=”checkAll(0)”/>全选

<input type=”checkbox”name=”all” onclick=”checkAll(1)/>全选

function checkAll(index){

var node =document.getElementsByName(“all”)[index];

var items =document.getElementsByName(“item”);

for(varx=0;x<items.length;x++){

items[x].checked =node.checked;

}

</script>

7. 获取鼠标的坐标，让指定区域随着鼠标移动

获取鼠标坐标：event.x，event.y

指定区域随鼠标移动其实就是改变了指定区域的left top属性的值

这里需要用到的事件：body对象的onmousemove事件。

还需要用到一个css样式。直接定义页面，所以区域都在同一层次

为了对某一个区域进行定位，将该区域分离到另一个层次。用到css中的position属性

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<metahttp-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>无标题文档</title>

#bodyid{

border:#000000 1px solid;

height:600px;

width:800px;

}

</style>

<scripttype="text/javascript">

window.onload = function(){

document.body.onmousemove= function(){

varadNode = document.getElementById("ad");

adNode.style.left= event.x-10;

adNode.style.top= event.y-10;

}

function closead(){

varadNode = document.getElementById("ad");

adNode.style.display= "none";

}

</script>

</head>

<body>

</div>

dody区域

</div>

</body>

</html>

----------------------------------------

正则表达式：

是一种专门用于操作字符串的规则。

通过一些符号来表示，简化对字符串的复杂操作。

弊端：阅读性较差。

常见的操作：

1. 匹配：String matches(regex)

2. 获取（查找）：Pattern , Matcher

Pattern p =Pattern.compile(regex);

Matcher m =p.matcher(String);

While(m.find()){

System.out.println(m.group());

}

3. 切割：String split(regex);

4. 替换：String replaceAll(regex,str);

实例：

Stingregex = “\\d{5,}”;

Pattern p =Pattern.compile(regex);

Matcher m =p.matcher(String);

While(m.find()){

Strings = m.group();

s.replaceAll(regex,”#”);

}