HTML DOM 定义了访问和操作 HTML 文档的标准方法。

DOM 将 HTML 文档表达为树结构。

文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式。我们最为关心的是,DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器,而不是JavaScript语言规范里的规定的核心内容。

一、查找元素

1、直接查找(ID, class等)

  1. document.getElementById 根据ID获取一个标签
  2. document.getElementsByName 根据name属性获取标签集合
  3. document.getElementsByClassName 根据class属性获取标签集合
  4. document.getElementsByTagName 根据标签名获取标签集合 //比如a标签啊,p标签啊等
  1. document.getElementsByClassName("current")[0].setAttribute("class","");
    document.getElementById("course").setAttribute("class","current");
  1.  

2、间接查找(父节点等)

  1. parentNode // 父节点
  1. <div id="aa">
  2. <div id="test"></div>
  3. </div>
  4. <script type="text/javascript">
  5. console.log(document.getElementById('test').parentNode);
  6. </script>
  7.  
  8. 结果:
  9. <div id="aa">....< /div>
  1. childNodes // 所有子节点
  1. <div>
  2. 123
  3. <div class="c1">asdf</div>
  4. <div class="c1" id="i1">
  5. <p>asdf</p>
  6. <div name="n1">
  7. <span>asd</span>
  8. </div>
  9. <div name="n1">
  10. <a>1</a>
  11. <a>11111</a>
  12. </div>
  13. </div>
  14. <div class="c1">asdf</div>
  15. </div>
  16. ------------------------------------------------
  17. <script type="text/javascript">
  18. var elm = document.getElementById('i1');
  19. var p1_text = elm.parentNode;
  20. var p1_notext = elm.parentElement;
  21.  
  22. //console.log(p1_text);
  23. //console.log(p1_notext);
  24.  
  25. var p1_child_text = p1_text.childNodes;//获取所有子节点
  26. for (var i=0; i<p1_child_text.length;){
  27. console.log(p1_child_text[i])
  28. }
  29.  
  30. // for (var i=0;i<p1_child_text.length;i++) {
  31. // cur = p1_child_text[i]
  32. // if (cur.nodeType == 1){ //如果是文本的话,比如div标签里面的123的话,cur.nodeType == 3,如果是标签的话,cur.nodeType ==1
  33. // console.log(p1_child_text[i])
  34. // }
  35. // }
  36.  
  37. var p1_child_notext = p1_notext.children;
  38. for(var i=0;i<p1_child_notext.length;i++){
  39. console.log(p1_child_notext[i])
  40. }
  41. </script>

详解样例

firstChild // 第一个子节点

lastChild // 最后一个子节点

nextSibling // 下一个兄弟节点

previousSibling // 上一个兄弟节点

  1. parentElement // 父节点标签元素
  2. children // 所有子标签
  3. firstElementChild // 第一个子标签元素
  4. lastElementChild // 最后一个子标签元素
  5. nextElementtSibling // 下一个兄弟标签元素
  6. previousElementSibling // 上一个兄弟标签元素

二、操作

1、内容 (获取、设置标签的text, HTML等)

  1. innerText 文本
  1. <div id="test">
  2. <span style="color:red">test1</span> test2
  3. </div>

div

  1. document.getElementById('test').innerHTML;
  2. 返回值:<span style="color:red">test1</span> test2
  3. document.getElementById('test').innerText;
  4. 返回值:test1 test2, 其中span标签被去除了
  5. document.getElementById('test').outerHTML;
  6. 返回值:<div id="test"><span style="color:red">test1</span> test2</div>

script

  1. outerText
  2. innerHTML 对象内部HTML内容
  3. outerHTML 除了包含innerHTML的全部内容外, 还包含对象标签本身。
  1. value

2、属性 -->自定义属性(获得属性等)

  1. attributes // 获取所有标签属性
  1. <a href="#" class=".." id=""></a>
  2. </div>
  3. <script type="text/javascript">
  4. document.write(document.getElementsByTagName("div")[3].attributes.length);

案例

  1. setAttribute(key,value) // 设置标签属性
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4.  
  5. <input value="OK">
  6.  
  7. <p id="demo">点击按钮来设置按钮的 type 属性。</p>
  8.  
  9. <button onclick="myFunction()">试一下</button>
  10.  
  11. <script>
  12. function myFunction()
  13. {
  14. document.getElementsByTagName("INPUT")[0].setAttribute("type","button");
  15. }
  16. </script>
  17.  
  18. <p>Internet Explorer 8 以及更早的版本不支持此方法。</p>
  19.  
  20. </body>
  21. </html>
  1. getAttribute(key) // 获取指定标签属性
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4.  
  5. 请阅读 <a href="/jsref/dom_obj_attributes.asp" target="_blank">Attr 对象</a>
  6.  
  7. <p id="demo">请点击按钮来显示上面这个链接的 target 属性值。</p>
  8.  
  9. <button onclick="myFunction()">试一下</button>
  10.  
  11. <script>
  12. function myFunction()
  13. {
  14. var a=document.getElementsByTagName("a")[0];
  15. document.getElementById("demo").innerHTML=a.getAttribute("target");
  16. }
  17. </script>
  18.  
  19. </body>
  20. </html>
  21.  
  22. 结果是:_blank

案例

  1. removeAttribute() //删除指点标签属性
    /*
  2. var atr = document.createAttribute("class");
  3. atr.nodeValue="democlass";
  4. document.getElementById('n1').setAttributeNode(atr);
  5. */
  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4. <meta charset="UTF-8">
  5. <title></title>
  6. </head>
  7. <body>
  8. <input type="button" value="全选" onclick="CheckAll();"/>
  9. <input type="button" value="取消" onclick="CancelAll();"/>
  10. <input type="button" value="反选" onclick="ReverseCheck();"/>
  11.  
  12. <table border="1" >
  13. <thead>
  14.  
  15. </thead>
  16. <tbody id="tb">
  17. <tr>
  18. <td><input type="checkbox" /></td>
  19. <td>111</td>
  20. <td>222</td>
  21. </tr>
  22. <tr>
  23. <td><input type="checkbox" /></td>
  24. <td>111</td>
  25. <td>222</td>
  26. </tr>
  27. <tr>
  28. <td><input type="checkbox" /></td>
  29. <td>111</td>
  30. <td>222</td>
  31. </tr>
  32. <tr>
  33. <td><input type="checkbox" /></td>
  34. <td>111</td>
  35. <td>222</td>
  36. </tr>
  37. </tbody>
  38. </table>
  39. <script>
  40. function CheckAll(ths){
  41. var tb = document.getElementById('tb');
  42. var trs = tb.childNodes;
  43. for(var i =0; i<trs.length; i++){
  44.  
  45. var current_tr = trs[i];
  46. if(current_tr.nodeType==1){
  47. var inp = current_tr.firstElementChild.getElementsByTagName('input')[0];
  48. inp.checked = true;
  49. }
  50. }
  51. }
  52.  
  53. function CancelAll(ths){
  54. var tb = document.getElementById('tb');
  55. var trs = tb.childNodes;
  56. for(var i =0; i<trs.length; i++){
  57.  
  58. var current_tr = trs[i];
  59. if(current_tr.nodeType==1){
  60. var inp = current_tr.firstElementChild.getElementsByTagName('input')[0];
  61. inp.checked = false;
  62. }
  63. }
  64. }
  65.  
  66. function ReverseCheck(ths){
  67. var tb = document.getElementById('tb');
  68. var trs = tb.childNodes;
  69. for(var i =0; i<trs.length; i++){
  70. var current_tr = trs[i];
  71. if(current_tr.nodeType==1){
  72. var inp = current_tr.firstElementChild.getElementsByTagName('input')[0];
  73. if(inp.checked){
  74. inp.checked = false;
  75. }else{
  76. inp.checked = true;
  77. }
  78. }
  79. }
  80. }
  81.  
  82. </script>
  83. </body>
  84. </html>
  85.  
  86. Demo
  1.  

3、class操作(添加删除class等)

  1. className // 获取所有类名
  2. classList.remove(cls) // 删除指定类
  3. classList.add(cls) // 添加类

4、标签操作(创建a标签操作标签等)

a.创建标签

  1. // 方式一
  2. var tag = document.createElement('a')
  3. tag.innerText = "wupeiqi"
  4. tag.className = "c1"
  5. tag.href = "http://www.cnblogs.com/wupeiqi"
  6.  
  7. // 方式二
  8. var tag = "<a class='c1' href='http://www.cnblogs.com/wupeiqi'>wupeiqi</a>"

b.操作标签

  1. // 方式一
  2. var obj = "<input type='text' />";
  3. xxx.insertAdjacentHTML("beforeEnd",obj);
  4. xxx.insertAdjacentElement('afterBegin',document.createElement('p'))
  5.  
  6. //注意:第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'
  7.  
  8. // 方式二
  9. var tag = document.createElement('a')
  10. xxx.appendChild(tag)
  11. xxx.insertBefore(tag,xxx[1])

5、样式操作(css操作)

  1. var obj = document.getElementById('i1')
  2.  
  3. obj.style.fontSize = "32px";
  4. obj.style.backgroundColor = "red";
  1. <input onfocus="Focus(this);" onblur="Blur(this);" id="search" value="请输入关键字" style="color: gray;" />
  2.  
  3. <script>
  4. function Focus(ths){
  5. ths.style.color = "black";
  6. if(ths.value == '请输入关键字' || ths.value.trim() == ""){
  7.  
  8. ths.value = "";
  9. }
  10. }
  11.  
  12. function Blur(ths){
  13. if(ths.value.trim() == ""){
  14. ths.value = '请输入关键字';
  15. ths.style.color = 'gray';
  16. }else{
  17. ths.style.color = "black";
  18. }
  19. }
  20. </script>

6、位置操作

  1. 总文档高度
  2. document.documentElement.offsetHeight
  3.  
  4. 当前文档占屏幕高度
  5. document.documentElement.clientHeight
  6.  
  7. 自身高度
  8. tag.offsetHeight
  9.  
  10. 距离上级定位高度
  11. tag.offsetTop
  12.  
  13. 父定位标签
  14. tag.offsetParent
  15.  
  16. 滚动高度
  17. tag.scrollTop
  18.  
  19. /*
  20. clientHeight -> 可见区域:height + padding
  21. clientTop -> border高度
  22. offsetHeight -> 可见区域:height + padding + border
  23. offsetTop -> 上级定位标签的高度
  24. scrollHeight -> 全文高:height + padding
  25. scrollTop -> 滚动高度
  26. 特别的:
  27. document.documentElement代指文档根节点

具体也可以参考博客:http://www.cnblogs.com/renfanzi/p/5663472.html7、提交表单

  1. document.geElementById('form').submit()

7、其他操作

  1. console.log 输出框
  2. alert 弹出框
  3. confirm 确认框
  4.  
  5. // URL和刷新
  6. location.href 获取URL
  7. location.href = "url" 重定向
  8. location.reload() 重新加载
  9.  
  10. // 定时器
  11. setInterval 多次定时器
  12. clearInterval 清除多次定时器
  13. setTimeout 单次定时器
  14. clearTimeout 清除单次定时器

三、事件

对于事件需要注意的要点:

  • this
  • event
  • 事件链以及跳出

this标签当前正在操作的标签,event封装了当前事件的内容。

以Python角度学习Javascript(二)之DOM的更多相关文章

  1. 以Python角度学习Javascript(一)

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAO4AAADZCAIAAACo85tgAAAgAElEQVR4Aey9SdAs13XnV/P8jW8e8D ...

  2. Python爬虫学习:二、爬虫的初步尝试

    我使用的编辑器是IDLE,版本为Python2.7.11,Windows平台. 本文是博主原创随笔,转载时请注明出处Maple2cat|Python爬虫学习:二.爬虫的初步尝试 1.尝试抓取指定网页 ...

  3. Python Django 学习 (二) 【Django 模型】

    注: 由于自己排版确实很难看,本文开始使用markdown编辑,希望有所改善 官方定义 A model is the single, definitive source of information ...

  4. Javascript学习笔记二——操作DOM

    Javascript学习笔记 DOM操作: 一.GetElementById() ID在HTML是唯一的,getElementById()可以定位唯一的一个DOM节点 二.querySelector( ...

  5. 轻松学习JavaScript二十七:DOM编程学习之事件模型

    在介绍事件模型之前,我们先来看什么是事件和什么是event对象. 一事件介绍 JavaScript事件是由訪问Web页面的用户引起的一系列操作,使我们有能力创建动态页面.事件是能够被 JavaScri ...

  6. javascript学习(二) DOM操作HTML

    一:DOM操作HTML JavaScript能够改变页面中所有的HTML元素 JavaScript能够改变页面中所有的HTML属性 JavaScript能够改变页面中所有的CSS样式 JavaScri ...

  7. 轻松学习JavaScript二十二:DOM编程学习之节点操作

    DOM编程不只能够查找三种节点,也能够操作节点.那就是创建,插入,删除.替换和复制节点.先来看节点 操作方法: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQ ...

  8. python进阶学习(二)

    本节学习图形用户界面 ------------------------ 本节介绍如何创建python程序的图形用户界面(GUI),也就是那些带有按钮和文本框的窗口.这里介绍wxPython : 下载地 ...

  9. Python入门学习(二)

    1 字典 1.1 字典的创建和访问 字典不同于前述的序列类型,它是一种映射类型.它的引入是为了简化定义索引值和元素值存在特定关系的定义和访问问题. 字典的定义形式为:字典变量名 = {key1:val ...

随机推荐

  1. javaEE规范和SSH三大框架到底有什么关系

    转自博客:http://blog.csdn.net/bingjing12345/article/details/20641891 1994-2000 年是互联网的大航海时代. 请注意,下面的时间点及其 ...

  2. Java编程思想学习(十一) 泛型

    1.概要 generics enable types (classes and interfaces) to be parameters when defining classes, interfac ...

  3. org.springframework.beans.factory.annotation.Autowired(required=true)

    Injection of autowired dependencies failed ERROR org.springframework.web.context.ContextLoader  - Co ...

  4. 洛谷P2320 [HNOI2006]鬼谷子的钱袋

    https://www.luogu.org/problem/show?pid=2320#sub 题目描述全是图 数学思维,分治思想 假设总数为n 从n/2+1到n的数都可以用1~n的数+n/2表示出来 ...

  5. POJ 2559 Largest Rectangle in a Histogram

    Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 18942   Accepted: 6083 Description A hi ...

  6. Linux System Log Collection、Log Integration、Log Analysis System Building Learning

    目录 . 为什么要构建日志系统 . 通用日志系统的总体架构 . 日志系统的元数据来源:data source . 日志系统的子安全域日志收集系统:client Agent . 日志系统的中心日志整合系 ...

  7. loadrunner获取Http信息头中指定值作为参数

    ); //web_save_header(RESPONSE,"response header"); //web_save_header(REQUEST,"request ...

  8. 初试visual studio2012的新型数据库LocalDB

    http://www.cnblogs.com/zhangran/archive/2012/08/21/2649200.html 今天在vs2012里面打开以前的mvc3项目,结果弹出警告说在vs201 ...

  9. yii 10.16

    什么是框架? a)         框架就是一个半成品,一个帮助我们完成业务流程的程序 b)        框架融合了很多的功能,但是不会给我们具体功能模块 c)         我们需要在框架的基础 ...

  10. CSS小记

    1.元素居中 (1)水平居中:指定宽度,然后margin auto 即可 .middle{ max-width:400px; //width:400px;//当浏览器被缩小,宽度小于元素宽度时,元素会 ...