JavaWeb知识整理五(DOM)

最新推荐文章于 2024-07-24 23:00:08 发布

取不来名字_

最新推荐文章于 2024-07-24 23:00:08 发布

阅读量101

点赞数

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

本文链接：https://blog.csdn.net/weixin_46097480/article/details/119304641

版权

JavaWeb 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1 表格隔行换色

1.1相关事件

onmouseover() ⿏标移⼊事件。⿏标从外部移⼊到当前元素时触发。
onmouseout() ⿏标移出事件。⿏标从当前元素移出时触发。
onload() ⻚⾯加载成功触发
⽅式1：使⽤onload属性确定需要执⾏的函数

<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
// js代码在<body>之前，不能获取<body>标签体中的内容，还没有加载到
var e01 = document.getElementById("e01");
alert(e01);// 打印：null
function init() {
// ⻚⾯加载成功之后执⾏
var e02 = document.getElementById("e01");
alert(e02.value);// 打印：指针信息
}
</script>
</head>
<body οnlοad="init()">
<input type="text" name="e01" id="e01" value="指针信息" />

⽅式2：通过window.onload设置匿名函数

<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function() {
// ⻚⾯加载成功之后执⾏
var e02 = document.getElementById("e01");
alert(e02.value);// 打印：指针信息
}
</script>
</head>
<body οnlοad="init()">
<input type="text" name="e01" id="e01" value="指针信息" />
</body>

1.2 this关键字

在函数内部this表示：当前操作的元素。

1.3 setAttribute(name, value)设置属性

this.setAttribute(name, value)：给当前元素设置属性

1.4 案例实现

<script type="text/javascript">
window.onload = function(){
var allTr = document.getElementsByTagName("tr");
// 跳过第⼀⾏
for (var i = 1; i < allTr.length; i++) {
// 给⾏tr设置背景颜⾊，奇数⾏⽩⾊，偶数⾏指定颜⾊
if (i % 2 == 0) {
allTr[i].style.backgroundColor = "#FFF";
} else{
allTr[i].style.backgroundColor = "#4E7FD1";
}
/*
* 添加事件，⿏标移上和移出，背景⾊改变。
* 使⽤⾃定义属性"bgc"缓存当前⾏⾃⼰原来的颜⾊
*/
allTr[i].onmouseover = function () {
this.setAttribute("bgc", this.style.backgroundColor);
this.style.backgroundColor = "#A0B9E1";
}
allTr[i].onmouseout = function () {
this.style.backgroundColor = this.getAttribute("bgc");
}
}
}
</script>

2 复选框全选/全不选

2.1 单选/复选选中

ele.checked 表示元素是否选中，true表示选中，false表示没有选中

ele.checked = true；// 设置元素被选中

2.2案例实现

步骤1：给复选框添加onclick事件

<input type="checkbox" onclick="selectAll(this)" id="selectAll"/>

步骤2：编写selectAll(this)处理列表项的复选框是否勾选

<script type="text/javascript">
function selectAll(obj){
// 当前复选框是否选择，如果选中其他都选中，如果没有选中其他都不选中
// getElementsByClassName 通过标签class属性的名称获得对应的所有标签
var allCheckbox = document.getElementsByClassName("itemsSelect");
for (var i = 0; i < allCheckbox.length; i++) {
allCheckbox[i].checked = obj.checked;
}
}
</script>

2.3 扩展:反选

步骤1：提供超链接，⽤于触发事件

<!--href:⽤户指定<a>跳转的位置。
开发中为了阻⽌href所设置的位置，通常编写"javascript:void(0)"，
void()函数参数任意数字都可以，习惯写成0
-->
<a href="javascript:void(0)" onclick="inverseSelect()">反选</a>

步骤2：编写inverseSelect()函数

function inverseSelect() {
// 反选：如果选择就不选中，如果不选中就选中
var allCheckbox = document.getElementsByClassName("itemsSelect");
for (var i = 0; i < allCheckbox.length; i++) {
allCheckbox[i].checked = !allCheckbox[i].checked;
}
}

3 省市二级联动

3.1 数组：Array

创建语法

new Array();
new Array(size); // size 数组元素个数，数组成员默认值 undefined
new Array(element0, element1, ..., elementn); // 参数列表，为数组初始化数据

数组中的每⼀个成员没有类型限制，即可以存放任意类型
数组的⻓度可以⾃动修改，类似Java中的List集合等。

3.2 元素操作：createElement、appendChild

document.createElement(); // 创建元素节点
ele.appendChild(); // 向标签体末尾添加新的⼦节点。

3.3案例实现

步骤1：给注册⻚⾯添加 select 标签

<select name="provinceId" id="provinceId" onchange="selectCity(this.value)">
<option value="">----请-选-择-省----</option>
<option value="0">北京</option>
<option value="1">浙江省</option>
<option value="2">⼭东省</option>
<option value="3">河北省</option>
<option value="4">江苏省</option>
</select>
<select name="cityId" id="cityId" style="width: 150px;">
<option value="">----请-选-择-市----</option>
</select>

步骤2：js实现

<script type="text/javascript">
// 定义⼆维数组，初始化数据
var cities = new Array(5);
cities[0] = new Array("直辖区", "县");
cities[1] = new Array("杭州市", "温州市", "宁波市", "⾦华市");
cities[2] = new Array("济南市", "⻘岛市", "威海市", "烟台市", "潍坊市");
cities[3] = new Array("⽯家庄市", "唐⼭市", "邯郸市", "廊坊市");
cities[4] = new Array("南京市", "苏州市", "扬州市", "⽆锡市");
// 通过选择的省，显示对应的所有的市
function selectCity(index) {
// 通过索引获得对应的所有的市
var allCity = cities[index];
// 获得city select 对象
var cityObj = document.getElementById("cityId");
cityObj.innerHTML = "<option value=''>----请-选-择-市----</option>";
// 遍历所有的市
for (var i = 0; i < allCity.length; i++) {
// 获得具体的市
var cityName = allCity[i];
// 创建option
var option = document.createElement("option");
// 创建⽂本节点
var textNode = document.createTextNode(cityName);
// 将⽂本添加到option中
option.appendChild(textNode);
// 将option追加到select中
cityObj.appendChild(option);
}
}
</script>

4 总结

4.1 DOM的概念

DOM：Document Object Model⽂档对象模型，定义访问和操作结构化⽂档（HTML）的⽅式。
- 创建的结构化⽂档：html、xml等
- DOM包括：核⼼DOM、HTML DOM、XML DOM。通常情况下HTML DOM和XML DOM是可以互相使⽤的。
HTML DOM将整个⽂档呈现成⼀颗DOM树，树中有元素、属性、⽂本等成员。

4.2 document⽂档对象

浏览器加载整个HTML⽂档形成Document对象，Document对象可以访问和操作HTML⽂档中的所有
元素。
获得元素

getElementById() // 通过id属性值获得元素(整个HTML⽂档id唯⼀)<xxx id = "">
getElementsByName() // 通过name属性值获得所有元素(整个HTML⽂档中name可能相同)<xxx
name="">
getElementsByClassName() // 通过class属性值获得所有元素<xxx class="">
getElementsByTagName() // 通过标签名获得所有的元素<xxx>

创建元素

createElement() // 创建指定名称的元素

常见属性

childNodes // 获得所有的⼦节点
nodeName // 返回节点名称。（标签名）
nodeType // 返回节点类型。（元素、属性、⽂本等）
nodeValue // 节点的值。（只有⽂本节点才有该属性）

4.3 element元素对象

Element对象表示HTML⽂档中的元素（HTML成为标签）。元素可包含属性、其他元素或⽂本。也就
是说HTML标签可以包含属性，其他⼦标签或⽂本。

appendChild() // 给元素追加⼦元素
<a>
...
追加位置
</a>
insertBefore() // 给当前元素前追加兄弟元素
插⼊位置
<a></a>
setAttribute(k, v) 给元素设置属性
<xxx k = v>

4.4 名称解释

元素（标签）Element、属性Attribute、⽂本Text统称为：节点Node
在这里插入图片描述

4.5全局函数

全局函数
在这里插入图片描述

取不来名字_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb知识整理五(DOM)

1 表格隔行换色1.1相关事件onmouseover() ⿏标移⼊事件。⿏标从外部移⼊到当前元素时触发。onmouseout() ⿏标移出事件。⿏标从当前元素移出时触发。onload() ⻚⾯加载成功触发⽅式1：使⽤onload属性确定需要执⾏的函数<head><meta charset="UTF-8"><title></title><script type="text/javascript">// js代码在<b
复制链接

扫一扫

专栏目录