DOM的一些小示例

最新推荐文章于 2025-08-11 22:30:00 发布
原创 最新推荐文章于 2025-08-11 22:30:00 发布 · 316 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#语言 #文档 #html #file

  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 onload="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 onload="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 onload="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 onload="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 onload="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 onload="test()">   
  128. <div id="mydiv">   
  129. 我是呆瓜!   
  130. </div>   
  131. </body>   
  132. </html>  
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
常见的DOM操作示例
借雨醉东风的博客
09-29 831
DOM（文档对象模型）的例子非常丰富，这里我列举几个常见的DOM操作示例，以帮助你理解DOM在实际开发中的应用。
微信小程序开发：DOM 相关 API 使用详解
xingyu_qie的专栏
07-21 3613
在微信小程序开发中，与传统的网页开发相比，由于安全性和性能考虑，访问 DOM（文档对象模型）是受限的。然而，微信小程序提供了一些特定的 API，使开发者能够处理和操作视图层，实现丰富的用户交互体验。
js监听dom大小改变的实现示例，支持vue
阿赛
08-25 857
【代码】js监听div类型dom的size尺寸变化方法。
React组件渲染后对DOM的操作示例
虚怀若愚
03-14 7645
文章目录 在React.js中基本不需要对DOM进行操作，可以直接通过 setState 的方式重新渲染组件，渲染的时候可以把新的 props 传递给子组件，从而达到页面数据更新的效果。 但是有的时候需要组件渲染完后对DOM进行一些操作，比如表单提交后对其中的&lt;input&gt;中的内容进行清空，重新定义鼠标焦点，下面以1个简单的例子进行说明。先看下显示效果： 在上例中，组件渲染结束后，清...
DOM 选择器小知识
2301_76509206的博客
04-07 946
在 HTML 和 CSS 里，类名是把样式规则运用到元素上的关键途径。当 JavaScript 代码对元素的类名进行操作时，实际上是在动态改变元素所应用的样式。这种操作通常是在事件处理函数里完成的。例如，在用户点击某个元素时切换其类名，以此来改变元素的样式或者触发其他交互效果。类名也许关联着某种特殊的背景颜色、边框样式或者字体样式等。虽然在这两行代码本身中未体现，但在实际应用里，像。
DOM案例练习-推荐几个DOM小案例练习有示例代码
m0_71485750的博客
06-04 757
说明: 做一个消息提示, 让消息的内容跟随数据动态发生改变示例代码:CSS部分 HTML结构 JS代码 案例二: 关闭删除消息 说明: 点击叉号将对应导航栏删除示例代码:CSS代码 HTML结构: JS代码: 案例三: 侧边栏的展示 说明: 鼠标经过添加动画将宽度调高-, 案例中的图片使用同一张精灵图, 且精灵图位置是有规律的, 我们选择通过js动态设置background-position示例代码:CSS代码 HTML结构 JS代码 案例四: 登录框
使用 DOM4j 解析 XML 文件的详细教学和示例代码
m0_73941339的博客
04-04 1531
详细讲解DOM4j核心API的使用方法，包括SAXReader读取XML、Element节点操作、属性与文本内容提取，提供完整代码示例和常见错误解决方案，帮助开发者高效处理XML数据解析任务。
js动态创建dom元素示例
ABC__D的专栏
05-09 3199
js中有时候需要动态的创建代码，这也是常规的基础知识，再次我总结一下，以备后用！ 直接上代码： //动态添加一个标签 function add(){ var map = document.getElementById("planetmap"); var x=180;
DOM详解
m0_48224507的博客
06-10 9698
文章目录一、什么是DOM1. 什么是DOM2. 为什么学习DOM3. 何时会用到DOM4. DOM标准5. DOM能做的5件事二、DOM树1. 什么是DOM树2. 何时会生成DOM树三、查找1. 不需要查找就可直接获得的4种节点对象:2. 按节点间关系查找3. 示例: 输出指定元素，并用节点间关系查找想要的元素4. 按HTML特征查找: 4个函数5.查找指定的元素，并修改元素的样式总结 一、什么是DOM 1. 什么是DOM 一套专门操作网页内容的对象和方法的集合。 2. 为什么学习DOM ECM
react-router-dom 官方示例解读(上)
冷月心的博客
11-26 6397
react-router-dom 官方示例解读(上)
AngularJS HTML DOM详解及示例代码
01-19
以下指令可用于应用程序数据绑定到HTML DOM元素的属性。 S.No. 名称 描述 1 ng-disabled 禁用一个给定的控制 2 ng-show 显示一个给定的控制 3 ng-hide 隐藏在给定的控制 4 ng-click 表示AngularJS click...
JavaScript dom操作 删除元素 示例代码
06-27
示例代码JavaScript dom操作 删除元素 示例代码JavaScript dom操作 删除元素 示例代码JavaScript dom操作 删除元素 示例代码JavaScript dom操作 删除元素 示例代码JavaScript dom操作 删除元素 示例代码JavaScript ...
Python Day27 HTML 核心知识笔记及例题分析
ihghhfffv的博客
08-11 717
HTML基础与网页结构简明指南 本文系统介绍了HTML的核心知识：HTML是超文本标记语言，通过标签描述网页结构。网页基本结构包含文档声明、头部(head)和主体(body)三部分，头部设置编码和标题，主体包含所有可见内容。详细讲解了常见HTML标签的用法： 文本标签(h1-h6标题、p段落、pre预格式文本) 列表标签(ol有序、ul无序、dl定义列表) 媒体与链接标签(img图片、a超链接) 表格标签(table及合并单元格属性) 语义标签(div布局、span行内样式) 特别说明了三种元素显示模式：块
HTML已死，HTML万岁——重新思考DOM的底层设计理念
2301_79342058的博客
08-07 852
《Web技术亟需革新：DOM、HTML与CSS的历史包袱》文章指出当前Web技术发展陷入瓶颈，客户端体验十年未变。DOM已变得异常臃肿（Chrome中document.body含350+属性），HTML在过去15年几乎停滞，CSS布局存在心智模型错位问题。WebComponents因设计缺陷未能成为主流解决方案，SVG与CSS的融合反而造成混乱。文章认为当前技术堆栈已无法满足现代Web应用需求，建议开放底层能力，重新设计去除历史负担的新架构。作者呼吁关注Servo等实验性项目，认为Web技术亟需突破传统DO
HTML应用指南：利用GET请求获取全国一加授权零售店位置信息
最新发布
weixin_45812624的博客
08-11 709
本文介绍了如何通过发送GET请求从一加中国官方网站获取授权零售店的分布信息，并使用Python中的requests库提取各城市的详细门店数据，包括地址、营业时间及联系方式等。文章首先解释了如何找到数据存储位置并解析响应内容，接着提供了完整的代码示例用于获取和保存这些信息为CSV文件。由于2021年后一加成为OPPO子品牌，两者线下渠道高度重合，因此其门店分布特征反映了共同的市场策略。文章指出，在华东和华南地区以及主要一线城市中，一加/OPPO门店布局密集，而在西北、东北等地则较为谨慎扩展。
文件编辑html
weixin_38849487的博客
08-11 161
.NET Core MVC中CSHTML
ultramand的博客
08-11 310
CSHTML是ASP.NET Core MVC中的视图文件，结合HTML与C#代码，通过Razor语法动态生成网页内容。核心特点包括：使用@符号嵌入变量/表达式，@{}包裹代码块，支持条件判断和循环；功能涵盖布局复用（_Layout.cshtml）、模型绑定（@model）和HTML辅助方法。典型应用如商品详情页，通过强类型模型、条件渲染和循环实现动态数据展示。CSHTML有效分离逻辑与展示层，是构建动态Web界面的关键组件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值