经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
全新java大数据教程之JavaScript的DOM对象(Document Object Model 文档对象模型)
来源:cnblogs  作者:小乐学编程  时间:2021/12/24 9:02:26  对本文有异议

一、DOM简介

DOM:Document Object Model 文档对象模型

要实现页面的动态交互效果,bom 操作远远不够,需要操作 html 才是核心。如何操作 htm,就是 DOM。简单的说,dom 提供了用程序动态控制 html 接口。DOM即文档对象模型描绘了一个层次化的节点树,运行开发人员添加、移除和修改页面的某一部分。dom 处于javascript 的核心地位上。

每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。Document 对象是 Window 对象的一部分,可通过 window.document 属性对其进行访问。

二、节点

加载 HTML 页面时,Web 浏览器生成一个树型结构,用来表示页面内部结构。DOM 将这种树型结构理解为由节点组成,组成一个节点树。对于页面中的元素,可以解析成以下几种类型的节点:

 

html --> 文档节点

div --> 元素节点

title --> 属性节点

测试 Div --> 文本节点

  1. <html>
  2. <head>
  3. <title>树!树!到处都是树!</title>
  4. </head>
  5. <body>
  6. <div title="属性节点">测试 Div</div>
  7. </body>
  8. </html>

 

三、操作元素的节点

当HTML文档在被解析为一颗DOM树以后,里面的每一个节点都可以看做是一个一个的对象,我们称为DOM对象,对于这些对象,我们可以进行各式各样的操作,查找到某一个或者一类节点对象,可以创建某种节点对象,可以在某个位置添加节点对象,甚至可以动态地删除节点对象,这些操作可以使我们的页面看起来有动态的效果,后期结合事件使用,就能让我们的页面在特定时机、特定的事件下执行特定的变换。

1、获取节点

在进行增、删、改的操作时,都需要指定到一个位置,或者找到一个目标,此时我们就可以通过Document对象提供的方法,查找、定位某个对象(也就是我们说的节点)。

注意:操作 dom 必须等节点初始化完毕后,才能执行。

处理方式两种:

(1)把 script 调用标签移到html末尾即可;

(2)使用onload事件来处理JS,等待html 加载完毕再加载 onload 事件里的 JS。

  1. window.onload = function () { //预加载 html 后执行};

获取方式如下:

 

  1. <body>
  2. <p id="p1" class="para">这是一个段落<span>文本</span></p>
  3. <p id="p1" class="para">这又是一个段落</p>
  4. <input type="text" name="txt" />
  5. <input type="checkbox" name="hobby" value="游泳" />游泳
  6. <input type="checkbox" name="hobby" value="篮球" />篮球
  7. <input type="checkbox" name="hobby" value="足球" />足球
  8. <hr />
  9. <a href="javascript:void(0)" onclick="testById()">按照id获取</a>
  10. <a href="javascript:void(0)" onclick="testByName()">按照name获取</a>
  11. <a href="javascript:void(0)" onclick="testByTagName()">按照标签名获取</a>
  12. <a href="javascript:void(0);" onclick="testByClass();">按照class获取</a>
  13. </body>

 

 

说明:href="javascript:void(0)":伪协议,表示不执行跳转,而执行指定的点击事件。本文是Java大数据教程中JavaScript课程DOM部分的教学文档,如需全套视频课程和资料请评论留言或私聊。

  1. <script type="text/javascript">
  2. // 按照id获取元素
  3. function testById() {
  4. // 返回单个对象
  5. var p = document.getElementById("p1");
  6. console.log(p);
  7. // 表示获取元素开始标签和结束标签之间的html结构
  8. console.log(p.innerHTML);
  9. console.log(p.innerText); // 表示获取标签之间的普通文本
  10. }
  11. // 按照name获取元素
  12. function testByName() {
  13. // 对象数组
  14. var ho = document.getElementsByName("hobby");
  15. console.log(ho);
  16. for(var i = 0; i <= ho.length - 1; i++) {
  17. console.log(ho[i].value);
  18. }
  19. }
  20. // 按照标签名获取元素
  21. function testByTagName() {
  22. // 对象数组
  23. var inputArr = document.getElementsByTagName("input");
  24. for(var i = 0; i < inputArr.length; i++) {
  25. if(inputArr[i].type == "text") {
  26. console.log("text类型");
  27. } else if(inputArr[i].type == "checkbox") {
  28. if(inputArr[i].checked) {
  29. console.log(inputArr[i].value);
  30. }
  31. }
  32. }
  33. }
  34. // 按照class属性获取元素
  35. function testByClass() {
  36. // 对象数组
  37. var ps = document.getElementsByClassName("para");
  38. console.log(ps[0].innerHTML);
  39. ps[0].innerHTML += "这是一段新的文本";
  40. }
  41. </script>

 

四、创建节点和插入节点

很多时候我们想要在某个位置插入一个新的节点,此时我们首先需要有一个节点存在,可以通过以下几种方式创建新节点。

1、创建节点

 

2、插入节点

 

  1. <button onclick="add()">添加段落</button>
  2. <div id="container"></div>
  3. <script type="text/javascript">
  4. function add(){
  5. var container = document.getElementById('container')
  6. var paragraph = document.createElement('p');
  7. var txt = document.createTextNode('hello')
  8. paragraph.appendChild(txt)
  9. container.appendChild(paragraph)
  10. }
  11. </script>

 

 

添加 "段落、图片、文本框、选项"

  1. <body>
  2. <button onclick="addPara();">添加段落</button>
  3. <button onclick="addImg();">添加图片</button>
  4. <button onclick="addTxt();">添加文本框</button>
  5. <button onclick="addOptions()">添加选项</button>
  6. <select name="music">
  7. <option value="-1">你心内的一首歌</option>
  8. <option value="0">南山南</option>
  9. <option value="1">喜欢你</option>
  10. </select>
  11. <hr />
  12. <div id = "container"></div>
  13. </body>
  14.  
  15. <script type="text/javascript">
  16. // 添加p节点
  17. function addPara(){
  18. // 获取容器
  19. var container =document.getElementById("container");
  20. // 创建段落<p></p>
  21. var p =document.createElement('p');
  22. // 第一种方式
  23. // 创建文本节点
  24. var txt=document.createTextNode("以后的你会感谢现在努力的你");
  25. // 将txt节点追加到p节点中
  26. p.appendChild(txt);
  27. // 将p节点追加到container节点中
  28. container.appendChild(p);
  29. /*
  30. // 第二种方式
  31. // 向p节点中添加内容
  32. p.innerHTML = "以后的你会感谢现在努力的你";
  33. // 将p节点追加到container节点中
  34. container.appendChild(p);
  35. */
  36. /*
  37. // 第三种方式
  38. // 将字符串类型的p标签内容添加到container中,不会添加多次
  39. var str = "<p>以后的你会感谢现在努力的你</p>";
  40. container.innerHTML = str;
  41. */
  42. }
  43. // 添加图片
  44. function addImg(){
  45. // 创建图片
  46. var img = document.createElement("img") ;
  47. /*
  48. // 设置属性第一种方式
  49. // 设置img标签的src属性
  50. // img.src ="http://www.baidu.com/img/bd_logo1.png";
  51. */
  52. // 设置属性第二种方式
  53. // setAttribute() 方法添加指定的属性,并为其赋指定的值。
  54. // 设置img的src属性
  55. img.setAttribute('src','http://www.baidu.com/img/bd_logo1.png');
  56. img.style.width = '300px';
  57. img.style.height = '200px';
  58. // 获取容器
  59. var container =document.getElementById("container");
  60. // 将img节点追加到container中。
  61. container.appendChild(img);
  62. }
  63. // 添加文本框
  64. function addTxt(){
  65. // 创建文本框
  66. var txt =document.createElement("input");
  67. /*
  68. // 设置类型第一种方式
  69. txt.type = "text";
  70. txt.value = "添加成功";
  71. */
  72. // 设置类型第二种方式
  73. txt.setAttribute('type', 'text');
  74. txt.setAttribute('value', '添加成功');
  75. /*
  76. * txt.type = 'password'
  77. * txt.value = '123'
  78. */
  79. // 获取容器
  80. var container =document.getElementById("container");
  81. // 将txt节点追加到container中。
  82. container.appendChild(txt);
  83. }
  84. // 添加下拉框的选项
  85. function addOptions(){
  86. // 第一种方式
  87. /*
  88. // 创建下拉项
  89. var option = document.createElement("option") ;
  90. option.value = "2" ;
  91. option.text = "油菜花" ;
  92. // 获取下拉框
  93. var sel = document.getElementsByTagName("select")[0];
  94. // 添加 下拉项
  95. sel.appendChild(option);
  96. */
  97. // 第二种方式:
  98. var option = document.createElement("option") ;
  99. option.value = "2" ;
  100. option.text = "不该" ;
  101. // 获取下拉框
  102. var sel = document.getElementsByTagName("select")[0];
  103. // 添加下拉项
  104. sel.options.add(option);
  105. // 第三种方式: 添加下拉项
  106. var sel = document.getElementsByTagName("select")[0];
  107. sel.innerHTML += "<option value = '2'>英雄</option>" ;
  108. }
  109. </script>
  110. 如需全套java大数据架构教程和配套课件代码等资料请+V:xiaole888899999

 

3、间接查找节点

 

4、删除节点

removeChild():从元素中移除子节点

  1. <script type="text/javascript">
  2. function delNode(){
  3. var programmer =document.getElementById("programmer");
  4. // 从父元素中删除节点,获取要删除对象的父元素,然后从父元素中删除该对象
  5. programmer.parentNode.removeChild(programmer);
  6. }
  7. </script>
  8. <body>
  9. <span id="programmer">程序猿</span>
  10. <a href="javascript:void(0)" onclick="delNode();">删除</a>
  11. </body>

 

原文链接:http://www.cnblogs.com/xiaole888899999/p/15724112.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号