DOM中元素操作

最新推荐文章于 2024-10-21 20:57:04 发布
最新推荐文章于 2024-10-21 20:57:04 发布
阅读量510 收藏 1
点赞数
分类专栏： 前端开发 文章标签： DOM中元素操作
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/xiaotian2516/article/details/101556752
版权
本文详细介绍了DOM（文档对象模型），包括DOM的定义、DOM对象、DOM树的概念，以及如何操作DOM元素，如获取元素（getElementById、getElementsByTagName等）、创建元素、插入元素、删除元素、复制元素和替换元素。文章还讨论了元素节点、属性节点和文本节点之间的关系，并提供了JavaScript操作DOM的实用技巧和注意事项。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

知识大纲：

  1. DOM是什么？
  2. 节点类型；
  3. 获取元素；
  4. 创建元素；
  5. 插入元素；
  6. 删除元素；
  7. 复制元素；
  8. 替换元素；

DOM是什么？

DOM对象

DOM(Document Object Model)全称“文档对象模型”，是W3C定义的一个标准。

DOM操作，可以简单理解成“元素操作”。

DOM结构

DOM采用“树形结构”，用“树节点”的形式来表示页面中的每个元素。例如：

<html>
<head>
    <meta charset="utf-8" /> 
    <title></title> 
</head> 
<body> 
    <h1>今日学习网</h1>
    <p>今日学习网是一个....</p> 
    <p>今日学习网成立于....</p> 
</body>
</html>

以上也叫“DOM树”，html是DOM树的树根，称之为根元素。(父节点、子节点、兄弟节点)

 

【重点】：

每一个元素就是一个节点，而每一个节点就是一个对象。我们在操作元素时，其实就是把这个元素看成了一个对象，然后使用这个对象的属性和方法来进行相关的操作。(DOM对象)

 

节点类型

在JavaScript中，DOM共有12种类型的节点，常用的只有三种节点：

  1. 元素节点；
  2. 属性节点；
  3. 文本节点；
<div id="wrapper">绿叶学习网</div>

 

表示元素的叫作元素节点，表示属性的叫作属性节点，表示文本的叫作文本节点。

【疑问】元素与节点的关系？

答：元素是节点，但节点不一定是元素，节点是包含元素的。

【疑问】元素节点、属

最低0.47元/天 解锁文章
分析HttpServletRequest的sessionId不一致的原因
ଳxin的博客
05-09 4088
事情是这样的： 在接口①存入session，接着在接口②获取session，结果：同一个key，却打印为空！！！ 为何不同？ 一、从session的原理上来看： session的工作原理就是依靠cookie来做支撑，第一次使用request.getSession()时session被创建， 并且会为该session创建一个独一无二的sessionid存放到cookie中，然后发送会浏览器端， 浏览器端每次请求时，都会带着这个sessionid，服务器就会认识该sessionid， 知道了sessi
javaweb JAVA JSP在线考试系统（考试管理系统）jsp考试管理系统源码
m0_69711799的博客
07-18 408
理财系统，就业管理系统，汽车租赁，简易网盘，疫情数据查看，在线招标房，屋租赁，教务管理，医院管理，餐厅收银，来访咨询，兼职论坛，桌面聊天室，酒店管理，民宿管理，车位租赁，音乐网站，在线问卷，旅游网站，流浪猫狗救助，在线选房，健身房管理，甜品网站，校园论坛，在线考试。很多同学苦于没有参考的资料，或者下载的资料不全、代码有问题、数据有问题等等,造成一系列问题。不管同学们是出于什么需求。都希望各位计算机专业的同学有一个提高。等设计题目,可用于毕业设计和课程设计，喜欢的可以下载！在这里完全不用担心以上所述问题，..
java 中 request.getSession(true、false、null)的区别
08-31
主要介绍了java 中 request.getSession(true/false/null)的区别的相关资料,需要的朋友可以参考下
request.getSession(true)和request.getSession(false)的区别
weixin_30843605的博客
10-27 96
request.getSession(true)和request.getSession(false)的区别 request.getSession(true)：若存在会话则返回该会话，否则新建一个会话。request.getSession(false)：若存在会话则返回该会话，否则返回NULL 当向Session中存取登录信息时，一般建议：HttpSession session =re...
对request.getSession(false)的理解（附程序员常疏忽的一个漏洞）
热门推荐
笑的自然技术博客
06-25 9万+
本文属于本人原创，转载请注明出处：http://blog.csdn.net/xxd851116/archive/2009/06/25/4296866.aspx【前面的话】在网上经常看到有人对request.getSession(false)提出疑问，我第一次也很迷惑，看了一下J2EE1.3 API，看一下官网是怎么解释的。 【官方解释】  getSession  public
request.getSession的用法
11-29 7761
HttpRequest对象有两种形式的getSession方法调用，一个是getSession()，另一个是getSession(boolean isNew)这样的，前者会检测当前时候有session存在，如果不存在则创建一个，如果存在就返回当前的。getSession()相当于getSession(false)，getSession(true)则不管当前是否存在Session都创建一个。 
十、request.getSession( )、reqeust.getSession(false)和 request.getSession(true)
用心做事，用爱生活
04-24 371
getSession()/getSession(true)：当session存在时返回该session，否则新建一个 session并返回该对象 getSession(false)：当session存在时返回该session，否则返回null
javaWeb学习笔记.pdf
05-20
HttpSession session = request.getSession(true); session.setAttribute("loginUser", user); Object loginUser = session.getAttribute("loginUser"); ``` #### 五、页面跳转 - **请求转发**: - 使用`...
javaWeb练习题.docx
08-02
- 在Servlet中，通过HttpServletRequest的getSession()方法获取Session，无参数版本表示如果没有现有Session则创建新的，带参数false表示没有Session时返回null，true则强制创建新Session。 5. **JSP内置对象**： ...
JavaWeb基础概念.docx
08-16
- `request.getSession(true)`和`request.getSession()`：这两个方法类似，如果会话不存在，它们都会创建一个新的Session并返回。 2. **错误页面配置**： - 在JSP页面中，可以通过`<%@ page errorPage="b.jsp"%>`...
request.getSession(false)
qq_30443907的博客
09-04 1093
/** * Returns the current HttpSession * associated with this request or, if there is no * current session and create is true, returns * a new session. * * If create...
request.getSession() 与 request.getSession(true/false）区别
风小起的博客
12-22 4360
getSession是返回当前用户的会话对象 request.getSession() 与 request.getSession(true) 在效果上没有区别。 request.getSession(true) ，“当前用户的会话对象”为空（第一次访问时）则创建一个新的会话对象返回； request.getSession(false) ，“当前用户的会话对象”为空，则返回null（即不自动创
request.getSession(false)与request.getSession()
bianEnjoy的博客
04-16 2637
参考：http://blog.csdn.net/xxd851116/archive/2009/06/25/4296866.aspx 先看一下API： 解释：getSession(booleancreate)意思是返回当前reqeust中的HttpSession ，如果当前reqeust中的HttpSession 为null，当create为true，就创建一个新的Session，否则返回...
对request.getSession(false)的理解
。
07-20 1万+
本文属于本人原创，转载请注明出处：http://blog.csdn.net/xxd851116/archive/2009/06/25/4296866.aspx 【前面的话】 在网上经常看到有人对request.getSession(false)提出疑问，我第一次也很迷惑，看了一下J2EE1.3 API，看一下官网是怎么解释的。  【官方解释】   getSession  public H...
getSession()的使用小结
ngc_1277
04-16 2万+
getSession() HttpServletRequest.getSession(ture) 与 HttpServletRequest.getSession() 是一个意思； HttpServletRequest.getSession(false) 等同于：如果当前Session没有就为null； Session在网络应用中被称为会话。 具体到web中的Session指的就是用户在浏览某个网站...
Java中Servlet的request.getSession(true/false)的区别
2403_87261884的博客
10-21 298
但是当参数是false时，当调用session时，原本有则会返回原本的session，若没有则不会新建一个session，而是返回null值，如果但会对象调用了方法，则会出现Java中常见的报错：空指针异常（NullPointerException）。当参数是true时，则当调用session这个方法时如果有原本的session则会返回原本的session，若没有则会新建一个session。上课时老师和我们聊了下关于request.getSession(tru/false)的一些知识。
getSession(true/false)和getSession()的区别
csdn_javaweb的博客
03-22 1100
getSession()和getSession(true)是一样的，如果当前有Session对象就返回，如果没有就新建一个空的Session对象返回，getSession(false)则有可能返回null，当前request存在session时返回session,没有的时候就不创建session直接返回null;
对request.getSession(false)以及参数为true的理解
秋水の歌的专栏
07-09 740
在网上经常看到有人对request.getSession(false)提出疑问，我第一次也很迷惑，看了一下J2EE1.3 API，看一下官网是怎么解释的。  【官方解释】 getSession  public HttpSession getSession(boolean create) Returns the current HttpSession associated w
请按照以下要求设计一个购物车的类PurchaseServlet。 书籍数据如下： public class BookDB { private static Map<String, Book> books = new LinkedHashMap<String, Book>(); static { books.put("1", new Book("1", "javaweb开发")); books.put("2", new Book("2", "jdbc开发")); books.put("3", new Book("3", "java基础")); books.put("4", new Book("4", "struts开发")); books.put("5", new Book("5", "spring开发")); } // 获得所有的图书 public static Collection<Book> getAll() { return books.values(); } // 根据指定的id获得图书 public static Book getBook(String id) { return books.get(id); } 要求如下： 1) 创建一个PurchaseServlet类，使其继承HttpServlet类并重写该类的doGet()方法； 2) 在doGet()方法中，使用request.getSession()实现购物车； 3) 将session的id保存到cookie中； 4) 重定向到/chapter05/CartServlet。
最新发布
04-03
### PurchaseServlet的设计与实现 以下是基于需求编写的 `PurchaseServlet` 类，该类实现了通过 `HttpSession` 管理购物车状态、将生成的 Session ID 存储到 Cookie 中，并最终重定向至 `CartServlet` 页面。 #### 代码实现 ```java import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.Cookie; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpSession; @WebServlet("/purchase") public class PurchaseServlet extends HttpServlet { private static final long serialVersionUID = 1L; @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 获取当前会话或创建新会话 HttpSession session = request.getSession(true); // 初始化购物车对象（如果尚未存在） if (session.getAttribute("cart") == null) { Cart cart = new Cart(); // 假设已定义了一个名为 Cart 的购物车类 session.setAttribute("cart", cart); } // 将 Session ID 添加到 Cookie 并设置过期时间 String sessionId = session.getId(); Cookie cookie = new Cookie("JSESSIONID", sessionId); cookie.setPath("/"); cookie.setMaxAge(60 * 30); // 设置 Cookie 过期时间为 30 分钟 response.addCookie(cookie); // 重定向到 CartServlet 页面 response.sendRedirect(request.getContextPath() + "/cart"); } } ``` --- ### 功能解析 1. **获取或创建会话** 使用 `request.getSession(true)` 方法确保每次请求都会返回一个有效的会话实例。如果不存在现有会话，则自动创建一个新的会话[^1]。 2. **初始化购物车对象** 如果会话中未绑定购物车对象，则创建新的 `Cart` 对象并将其存储在会话中。此操作确保每个用户的购物车状态独立维护[^4]。 3. **存储 Session ID 到 Cookie** 创建一个名为 `JSESSIONID` 的 Cookie 来保存会话标识符，并设置其路径为根路径 (`/`) 和最大存活时间为 30 分钟。这样客户端可以在后续请求中携带该 Cookie 自动恢复会话状态[^2]。 4. **重定向至目标页面** 调用 `response.sendRedirect()` 方法将用户重定向到指定的目标地址 `/cart`，即 `CartServlet` 处理程序所在位置[^5]。 --- ### 注意事项 - 需要提前定义好 `Cart` 类及其方法，以便支持实际业务逻辑。 - 若项目运行过程中遇到 XML 文件配置错误或其他问题，可根据提示调整 Tomcat 或 IDE 的环境设置。 - 在生产环境中应考虑安全性措施，例如加密敏感数据或将重要信息存储于服务器端而非客户端 Cookie 中。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值