JavaWeb知识整理五(DOM)

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
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值