java web基础04

最新推荐文章于 2023-12-06 11:03:52 发布

penghui_

最新推荐文章于 2023-12-06 11:03:52 发布

阅读量147

点赞数

分类专栏： JavaWeb基础

本文链接：https://blog.csdn.net/penghui_/article/details/100650861

版权

本文介绍了JavaScript中如何动态添加、修改DOM元素，包括在末尾添加节点、操作element对象、获取和设置属性、innerHTML属性的使用以及动态显示时间等基本操作。通过案例演示了全选、下拉列表选择、省市联动和动态生成表格等功能的实现。

摘要由CSDN通过智能技术生成

1.案例一：在末尾添加节点
第一步：获取到ul标签
第二步：创建li标签
document.createElement(“标签名称”)方法
第三步：创建文本
document.createTextNode(“文本内容”);
第四步：把文本添加到li下面
使用appendChild方法
第五步：把li添加到ul末尾
使用appendChild方法
2.元素对象（element对象）
** 要操作element对象，首先必须要获取到element，
- 使用document里面相应的方法获取
** 方法
*** 获取属性里面的值
getAttribute(“属性名称”)
- var input1 = document.getElementById(“inputid”);
//alert(input1.value);
alert(input1.getAttribute(“value”));
*** 设置属性的值
input1.setAttribute(“class”,“haha”);
*** 删除属性
input1.removeAttribute(“name”);
** 不能删除value
*** 想要获取标签下面的子标签
**使用属性childNodes，但是属性兼容性很差
** 获得标签下面子标签的唯一有效方法，使用getElementsByTagName方法
- var ul11 = document.getElementById(“ulid1”);
//获取ul下面的子标签
//var lis = ul11.childNodes;
//alert(lis.length);
var lis = ul11.getElementsByTagName(“li”);
alert(lis.lenght);
3.Node对象属性一
* nodeName
* nadeType
* nodeValue
* 使用dom解析html时候，需要html里面的标签，属性和文本都封装成对象
* 标签节点对应的值
nodeType：1
nodeName：大写标签名称比如SPAN
nodeValue：null
* 属性节点对应的值
nodeType：2
nodeName：属性名称
nodeValue：属性的值
* 文本节点对应的值
nodeType：3
nodeName：#text
nodeValue：文本内容

4.Node对象的属性二

qqqq<li/
li>www<li/
<ul/
* 父节点
- ul是li的父节点
- parentNode
- //得到li
var li1 = document.getElementById(“li1”);
//得到ul
var ul1 = li1.parentNode;
alert(ul1.id);
* 子节点
- li是ul子节点
- childNode：得到所有子节点，但是兼容性很差
- firstChild：获取第一个子节点
- lastChild：获取最后一个子节点
* 同辈节点
- li直接关系是