DOM的一些小示例

最新推荐文章于 2024-08-29 14:33:40 发布
最新推荐文章于 2024-08-29 14:33:40 发布
阅读量289 收藏
点赞数
分类专栏： javascrip 文章标签： 语言 文档 html file
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/faunjoe/article/details/4380809
版权
  1. <script type="text/javascript">   
  2. //document.getElementsByTagName();   
  3. function SearchDom(){   
  4.     //得到该页面中所有li标签的对象数组   
  5.     var oli=document.getElementsByTagName("li");   
  6.     //数组长度,第一个对象的标签名,第四个对象的文本节点的值.   
  7.     alert("长度:"+oli.length+" 标签名:"+oli[0].tagName+" 第四个li元素的子节点的值:"+ oli[3].childNodes[0].nodeValue);   
  8.     var oul=document.getElementsByTagName("ul");   
  9.     var ol2=oul[1].getElementsByTagName("li");   
  10.     alert("长度:"+ol2.length+"标签名:"+oli[1].tagName+" 第二个元素的文本节点值:"+ol2[1].childNodes[0].nodeValue);   
  11. }   
  12. </script>   
  13. </head>   
  14. <body οnlοad="SearchDom()">   
  15. <ul>客户端语言   
  16. <li>HTML</li>   
  17. <li>Javascript</li>   
  18. <li>Css</li>   
  19. </ul>   
  20. <ul>服务端语言   
  21. <li>asp.net</li>   
  22. <li>jsp</li>   
  23. <li>php</li>   
  24. </ul>   
  25. </body>   
  26. </html>   
  27.   
  28.   
  29.   
  30. <script type="text/javascript">   
  31. //document.getElementById();   
  32. function SearchDom(){   
  33.     var myid=document.getElementById("myid");   
  34.     alert(myid.tagName+" "+myid.childNodes[0].nodeValue);   
  35. }   
  36. </script>   
  37. </head>   
  38. <body οnlοad="SearchDom()">   
  39. <ul>客户端语言   
  40. <li>HTML</li>   
  41. <li>Javascript</li>   
  42. <li id="myid">Css</li>   
  43. </ul>   
  44. <ul>服务端语言   
  45. <li>asp.net</li>   
  46. <li>jsp</li>   
  47. <li>php</li>   
  48. </ul>   
  49. </body>   
  50. </html>   
  51.   
  52.   
  53.   
  54.   
  55.   
  56. <script type="text/javascript">   
  57. /*父子关系:在访问元素之后Dom提供给我们最重要的一种关系,它可以通过某一个元素遍历其他元素*/  
  58. /*在DOM模型中只要获得了某一个元素,便可以通过父子关系,遍历整个HTML文档,通过DOM我们对文档拥有空前的控制能力*/  
  59. function MyDOMInspector(){   
  60.     var str="";   
  61.     var myList=document.getElementById("myList");   
  62.     if(myList.hasChildNodes())   
  63.         var child=myList.childNodes;   
  64.         for(var i=0;i<child.length;i++)   
  65.         str+=child[i].childNodes[0].nodeValue+"/n";   
  66.         //str+=child[i].tagName+"/n";   
  67.         //str+=child[i].nodeName+"/n";   
  68.         alert(str);   
  69. }   
  70. </script>   
  71. </head>   
  72. <body οnlοad="MyDOMInspector()">   
  73. <ul id="myList">   
  74. <li>苹果</li>   
  75. <li>香蕉</li>   
  76. <li>菜牙</li>   
  77. <li>橘子</li>   
  78. <li>西瓜</li>   
  79. <li>草莓</li>   
  80. </ul>   
  81. </body>   
  82. </html>   
  83.   
  84.   
  85.   
  86.   
  87. <script type="text/javascript">   
  88. /*节点属性*/  
  89. function property(){   
  90.     var img=document.getElementsByTagName("img")[0];//都打该页面的第一个图片标签的DOM对象   
  91.     alert(img.getAttribute("title"));   
  92. }   
  93. </script>   
  94. </head>   
  95. <body οnlοad="property()">   
  96. <img title="情人坡"  src="file:///D|/我的文档/My Pictures/Sunset.jpg"/>   
  97. </body>   
  98. </html>   
  99.   
  100.   
  101.   
  102. <script type="text/javascript">   
  103. /*创建新节点*/  
  104. function createP(){   
  105.     var newP=document.createElement("p");   
  106.     var text=document.createTextNode("这是一段感人的故事!");   
  107.     newP.appendChild(text);   
  108.     document.body.appendChild(newP);   
  109. }   
  110. </script>   
  111. </head>   
  112. <body οnlοad="createP()">   
  113. <p>事先写一行文字在这里!</p>   
  114. </body>   
  115. </html>   
  116.   
  117.   
  118. <script type="text/javascript">   
  119. /*InnerHTML点*/  
  120. function test(){   
  121.     var mydiv=document.getElementById("mydiv");   
  122.     alert(mydiv.innerHTML);   
  123.     mydiv.innerHTML="<span>你是小白!</span>"  
  124. }   
  125. </script>   
  126. </head>   
  127. <body οnlοad="test()">   
  128. <div id="mydiv">   
  129. 我是呆瓜!   
  130. </div>   
  131. </body>   
  132. </html>  
faunjoe
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript dom操作 dom元素查询 示例代码
06-27
JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码...
JavaScript DOM节点添加示例
01-19
<!DOCTYPE html> <html> <body> 这是一个段落。 这是另一个段落。 </div> [removed] var para=document.createElement(h1); var node=document....var element=document.getElementById(di
JavaScript DOM操作 示例代码
06-25
包含dom的查询、访问、修改、添加、替换、删除等操作包含dom的查询、访问、修改、添加、替换、删除等操作包含dom的查询、访问、修改、添加、替换、删除等操作包含dom的查询、访问、修改、添加、替换、删除等操作包含...
JS实现的DOM插入节点操作示例
11-28
在这个示例中，我们重点探讨如何使用`insertBefore()`方法来插入新的节点。 一、`insertBefore()`方法详解 `insertBefore()`方法是JavaScript DOM中的一个重要函数，它允许我们在已有子节点的前面插入一个新的子...
【功能自动化】使用HTMLTestRunner生成测试报告
a272329874a的博客
08-29 450
1.部署webtours网站。
HTML沙漏爱心
兔子王
08-28 3939
用HTML语言实现炫酷的沙漏爱心。
泛微协同办公平台E-cology9.0版本后台维护手册(D)--流程引擎.docx
09-03
泛微后端技术文档
A fast intra mode decision algorithm combining neighboring info
09-03
论文提出了一种用于H.264/AVC高配置文件的快速帧内模式决策算法，旨在降低编码复杂度。 算法基于当前块的内容以及邻块的空间连续性来选择最佳预测模式。 通过使用重建的邻域像素，不同的预测模式会导致不同的残差块，算法利用残差块的特征来辅助模式决策。 提出的算法使用绝对变换差之和（SATD）来衡量残差块，并使用最可能的模式来指示邻块预测模式的影响。 实验结果表明，与全搜索算法相比，所提出的算法在编码性能略有下降的情况下，有效降低了帧内预测的复杂度
《会员卡刷卡消费管理系统专业版》是一款集系统设置、会员管理、充值积分、会员消费、查询统计于一体的软-MbccmsP.zip
09-03
c 《会员卡刷卡消费管理系统专业版》是一款集系统设置、会员管理、充值积分、会员消费、查询统计于一体的软_MbccmsP.zip 《会员卡刷卡消费管理系统专业版》是一款集系统设置、会员管理、充值积分、会员消费、查询统计于一体的软_MbccmsP.zip 《会员卡刷卡消费管理系统专业版》是一款集系统设置、会员管理、充值积分、会员消费、查询统计于一体的软_MbccmsP.zip 《会员卡刷卡消费管理系统专业版》是一款集系统设置、会员管理、充值积分、会员消费、查询统计于一体的软_MbccmsP.zip 《会员卡刷卡消费管理系统专业版》是一款集系统设置、会员管理、充值积分、会员消费、查询统计于一体的软_MbccmsP.zip 《会员卡刷卡消费管理系统专业版》是一款集系统设置、会员管理、充值积分、会员消费、查询统计于一体的软_MbccmsP.zip 《会员卡刷卡消费管理系统专业版》是一款集系统设置、会员管理、充值积分、会员消费、查询统计于一体的软_MbccmsP.zip《会员卡刷卡消费管理系统专业版》是一款集系统设置、会员管理、充值积分、会员消费、查询统计于一体的软_MbccmsP.zip 《会
基于springboot学生选课系统设计与实现.docx
09-03
基于springboot学生选课系统设计与实现.docx
【天线阻抗】基于matlab耦合偶极子天线阻抗计算【含Matlab源码 7447期】.mp4
09-03
Matlab研究室上传的视频均有对应的完整代码，皆可运行，亲测可用，适合小白； 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描视频QQ名片； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
【无线电】基于matlab认知无线电网络中协同频谱传感的优化【含Matlab源码 7449期】.mp4
09-03
Matlab研究室上传的视频均有对应的完整代码，皆可运行，亲测可用，适合小白； 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描视频QQ名片； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
【误码率仿真】基于matlab 2x2MIMO-LDPC系统误码率仿真【含Matlab源码 7446期】.zip
09-03
CSDN海神之光上传的代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博客文章底部QQ名片； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 功率谱估计： 故障诊断分析： 雷达通信：雷达LFM、MIMO、成像、定位、干扰、检测、信号分析、脉冲压缩 滤波估计：SOC估计 目标定位：WSN定位、滤波跟踪、目标定位 生物电信号：肌电信号EMG、脑电信号EEG、心电信号ECG 通信系统：DOA估计、编码译码、变分模态分解、管道泄漏、滤波器、数字信号处理+传输+分析+去噪（CEEMDAN）、数字信号调制、误码率、信号估计、DTMF、信号检测识别融合、LEACH协议、信号检测、水声通信
小程序-同乐居商城：购物车合算（源码）.zip
最新发布
09-03
小程序-同乐居商城：购物车合算（源码）.zip
新增1986-2017年农村固定观察点数据，三农数据大全(全新整理)
09-03
1、资源内容地址：https://blog.csdn.net/2301_79696294/article/details/141282812 2、代码特点：今年全新，手工精心整理，放心引用，数据来自权威，相对于其他人的控制变量数据准确很多,适合写论文做实证用 ，不会出现数据造假问题 3、适用对象：大学生，本科生，研究生小白可用，容易上手！！！ 3、课程引用: 经济学，地理学，城市规划与城市研究，公共政策与管理，社会学，商业与管理 【新增数据】 全国农村固定观察点数据服务是由农业农村部主导的逐年农户层级跟踪调查数据库，具有全国代表性以及权威性，是目前全国样本数量规模最大的农户层级数据。
基于Spring Boot的点餐系统.zip
09-03
基于Spring Boot的点餐系统 项目概述 本项目是一个基于Spring Boot的点餐系统，旨在提供一个高效、易用的在线点餐平台。系统包含了订单管理、商品管理、分类管理、座位管理等多个模块，通过RESTful API与前端进行交互。 主要功能 订单管理 订单创建支持创建新订单，包括订单详情和商品信息。 订单查询提供根据订单号、状态等多种条件查询订单的功能。 订单状态变更支持订单的接受、完成、取消和支付等状态变更操作。 商品管理 商品创建与更新支持商品的新增和信息更新。 商品查询提供根据分类、状态等多种条件查询商品的功能。 商品状态管理支持商品的上架和下架操作。 分类管理 分类创建与更新支持分类的新增和信息更新。 分类查询提供查询所有分类和根据ID查询分类的功能。 座位管理 座位状态查询支持根据状态查询所有座位的功能。 技术栈 后端框架Spring Boot 数据库JPA（Java Persistence API） 日志记录SLF4J 测试框架JUnit 项目结构 com.order.controller包
Python毕业设计：Python基于OpenCV 和深度学习的车牌识别系统源码+文档
09-03
Python毕业设计：Python基于OpenCV 和深度学习的车牌识别系统源码+文档，含有代码注释，新手也可看懂，个人手打98分项目，导师非常认可的高分项目，毕业设计、期末大作业和课程设计高分必看，下载下来，简单部署，就可以使用。 Python毕业设计：Python基于OpenCV 和深度学习的车牌识别系统源码+文档，含有代码注释，新手也可看懂，个人手打98分项目，导师非常认可的高分项目，毕业设计、期末大作业和课程设计高分必看，下载下来，简单部署，就可以使用。 Python毕业设计：Python基于OpenCV 和深度学习的车牌识别系统源码+文档，含有代码注释，新手也可看懂，个人手打98分项目，导师非常认可的高分项目，毕业设计、期末大作业和课程设计高分必看，下载下来，简单部署，就可以使用。 Python毕业设计：Python基于OpenCV 和深度学习的车牌识别系统源码+文档，含有代码注释，新手也可看懂，个人手打98分项目，导师非常认可的高分项目，毕业设计、期末大作业和课程设计高分必看，下载下来，简单部署，就可以使用。Python毕业设计：Python基于OpenCV 和深度学
【球类识别系统】图像识别Python+卷积神经网络算法+人工智能+深度学习+TensorFlow_ball_check.zip
09-03
【球类识别系统】图像识别Python+卷积神经网络算法+人工智能+深度学习+TensorFlow_ball_check
前端分析-202307110088
09-03
前端分析-202307110088
DOM 解析XML 示例
06-01
以下是一个使用DOM解析XML的示例代码，假设我们要解析如下的XML文档： ```xml <title lang="en">Harry Potter <author>J.K. Rowling <year>2005 <price>29.99 <title lang="en">Learning XML ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值