一文解读JavaScript中的文档对象（DOM）

大家好，我是IT共享者，人称皮皮。

前言

相信做网站对JavaScript再熟悉不过了，它是一门脚本语言，不同于Python的是，它是一门浏览器脚本语言，而Python则是服务器脚本语言，我们不光要会Python，还要会JavaScript，因为它对做网页方面是有很大作用的。

1.文档对象(DOM)

1).Document对象

这是我们用的最普遍的一个文档对象了，专门用来操作DOM节点时用。

1)).获取元素

 
 
 
 
    
  
  
  
  
  1. document.getElementById()           #通过id查找HTML元素 
    2.   
  
  
  
  2. document.getElementsByName()        #通过name查找HTML元素 
    3.   
  
  
  
  3. document.getElementsByTagName()     #通过标签名查找HTML元素 
    4.   
  
  
  
  4. document.getElementsByClassName()   #通过类名查找HTML元素  
    5.   
  
  
  
  5. document.querySelector(".h")        #第一个类名为 "h" 的元素 
    6.   
  
  
  
  6. document.querySelectorAll("div.no, div#h") #所有class为"no"或者id为"h"的div元素 
    7.   
  
  
  
  7. document.body          #获取body标签 
    8.   
  
  
  
  8. document.documentElement   #获取html标签 
    9.

2)).获取网页内容

 
 
 
 
    
  
  
  
  
  1. document.cookie        #网页cookie 
    2.   
  
  
  
  2. document.domain        #文档的域名 
    3.   
  
  
  
  3. document.lastModified  #文档被最后修改的日期和时间 
    4.   
  
  
  
  4. document.referrer      #载入当前文档的文档的URL 
    5.   
  
  
  
  5. document.title         #当前文档的标题 
    6.   
  
  
  
  6. document.URL           #当前文档的URL 
    7.   
  
  
  
  7. document.doctype       #当前文档的doctype 
    8.   
  
  
  
  8. document.baseURI       #当前文档的绝对URI 
    9.   
  
  
  
  9. document.documentMode   #浏览器使用的模式 
    10.   
  
  
  
  10. document.documentURI    #文档的URI 
    11.   
  
  
  
  11. document.implementation #DOM实现 
    12.   
  
  
  
  12. document.inputEncoding  #文档的编码（字符集） 
    13.   
  
  
  
  13. document.readyState     #文档的（加载）状态 
    14.   
  
  
  
  14. document.strictErrorChecking    #是否强制执行错误检查 
    15.

3)).文档写入

 
 
 
 
    
  
  
  
  
  1. document.write('hello world')   向文档写入文本 
    2.   
  
  
  
  2. document.writeln('hello world') 向文档写入文本并换行 
    3.

4)).获取集合

 
 
 
 
    
  
  
  
  
  1. document.all        #所有html元素 
    2.   
  
  
  
  2. document.anchors    #所有Anchor引用 
    3.   
  
  
  
  3. document.forms      #所有的表单引用 
    4.   
  
  
  
  4. document.images     #所有的图片引用 
    5.   
  
  
  
  5. document.links      #所有的超链接引用 
    6.   
  
  
  
  6. document.scripts    #所有的脚本引用 
    7.   
  
  
  
  7. document.embeds     #所有的流媒体引用 
    8.

5)).获取节点

 
 
 
 
    
  
  
  
  
  1. childNodes          #获取子节点的集合 ，返回数组 ，并把换行和空格也当成是节点信息。 
    2.   
  
  
  
  2. children            #获取子节点的集合 ，返回数组    
    3.   
  
  
  
  3. firstChild          #获取第一个子元素  并把换行和空格也当成是节点信息 
    4.   
  
  
  
  4. firstElementChild   #获取第一个子节点 
    5.   
  
  
  
  5. lastChild           #获取最后一个子节点 并把换行和空格也当成是节点信息 
    6.   
  
  
  
  6. lastElementChild    #获取最后一个子节点 
    7.   
  
  
  
  7. parentNode          #获取父节点 
    8.   
  
  
  
  8. parentElement       #获取父节点(IE) 
    9.   
  
  
  
  9. offsetParent        #获取所有父节点  对应的值是body下的所有节点信息 
    10.   
  
  
  
  10. previousSibling         #获取上一个兄弟节点  匹配字符，包括换行和空格，而不是节点 
    11.   
  
  
  
  11. previousElementSibling  #获取上一个兄弟节点  直接匹配节点 
    12.   
  
  
  
  12. nextSibling             #获取下一个兄弟节点  匹配字符，包括换行和空格，而不是节点 
    13.   
  
  
  
  13. nextElementSibling      #获取下一个兄弟节点  直接匹配节点 
    14.   
  
  
  
  14. ownerDocument           #元素的根节点 
    15.

这里我们获取到了所有的Div元素，我们可以针对性的获取一个ID下的Div的子元素以及它的兄弟和父，子元素，如下：

6)).创建节点

我们可以自定义节点并添加值，不过要将它添加到文档中去，所以必须添加节点，一般和下方的增加节点配套使用。

 
 
 
 
    
  
  
  
  
  1. document.createElement(标签)  #创建HTML元素 
    2.   
  
  
  
  2. document.createTextNode(文本) #给文档添加文本 
    3.   
  
  
  
  3. document.createComment(文本)  #创建一个注释节点 
    4.   
  
  
  
  4. document.createDocumentFragment() #创建文档粉碎节点 
    5.

7)).增加节点

 
 
 
 
    
  
  
  
  
  1. appendChild（节点） #节点被添加到元素的末尾 
    2.   
  
  
  
  2. insertBefore（a,b） #a节点会插入b节点的前面 
    3.

8)).删除节点

 
 
 
 
    
  
  
  
  
  1. removeChild(节点名)  #被移除的节点仍在文档中，只是文档中已没有其位置了 
    2.

9)).替换节点

 
 
 
 
    
  
  
  
  
  1. replaceChild(插入的节点，被替换的节点) 
    2.

10)).复制节点

 
 
 
 
    
  
  
  
  
  1. a.cloneChild() #复制a节点,复制出来的节点作为返回值为true时，则a元素后代也一并复制。否则，仅复制a元素本身 
    2.

11)).节点属性

 
 
 
 
    
  
  
  
  
  1. #节点类型 nodeType 有三种情况 
    2.   
  
  
  
  2. #1.元素节点  2.属性节点  3.文本节点 
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4. #节点名称 nodeName  
    5.   
  
  
  
  5.  
    6.   
  
  
  
  6. #节点值 nodeValue  
    7.   
  
  
  
  7. #元素节点没节点值，为null  
    8.   
  
  
  
  8. #文本节点的节点值就是文本 
    9.   
  
  
  
  9. #属性节点的节点值就是该属性值 
    10.   
  
  
  
  10.  
    11.   
  
  
  
  11. #节点属性获取 
    12.   
  
  
  
  12. a.width 
    13.   
  
  
  
  13. a['width'] 
    14.   
  
  
  
  14. a.gerAttribute(属性名)  返回指定的属性值 
    15.   
  
  
  
  15. a.gerAttributeNode(属性名) 返回指定的属性节点 
    16.   
  
  
  
  16. 节点属性设置 
    17.   
  
  
  
  17. a.width=400 
    18.   
  
  
  
  18. a['width']=400 
    19.   
  
  
  
  19. a.attributes['width']=400 
    20.   
  
  
  
  20. a.setAttribute('width',400) 添加指定的属性 
    21.   
  
  
  
  21. a.setAttributeNode(b) 添加指定的属性节点 
    22.   
  
  
  
  22.  
    23.   
  
  
  
  23. #节点属性删除 
    24.   
  
  
  
  24. a.removeChild(子节点)    从元素中移除子节点 
    25.   
  
  
  
  25. a.removeAttribute(属性)  从元素中移除指定属性 
    26.   
  
  
  
  26. a.removeAttributeNode(属性) 移除指定的属性节点，并返回被移除的节点 
    27.   
  
  
  
  27.  
    28.   
  
  
  
  28. a.id 获取当前元素的id 
    29.   
  
  
  
  29. a.className  获取当前元素的class 
    30.   
  
  
  
  30. a.classList  获取当前元素的class列表 
    31.   
  
  
  
  31.  
    32.   
  
  
  
  32. a.accessKey='w'    设置或返回元素的快捷键 
    33.   
  
  
  
  33. a.namespaceURI     返回指定节点的命名空间的 URI 
    34.   
  
  
  
  34. a.dir              设置或返回元素的内容是否可编辑 
    35.   
  
  
  
  35. a.normalize()      合并元素中相邻的文本节点，并移除空的文本节点 
    36.   
  
  
  
  36. a.tabIndex='3'     设置或返回元素的tab键控制次序 
    37.   
  
  
  
  37. a.tagName          返回元素的标签名 
    38.   
  
  
  
  38. a.textContent      设置或返回节点及其子代的文本内容 
    39.   
  
  
  
  39. a.title            设置或返回元素的标题属性 
    40.   
  
  
  
  40. a.item(num)        返回节点列表中位于指定下标的节点 
    41.   
  
  
  
  41. a.length           返回节点列表中的节点数 
    42.

12)).获取元素文本

 
 
 
 
    
  
  
  
  
  1. a.innerHTML  获取或者设置对象内的HTML 
    2.   
  
  
  
  2. a.innerText  获取或者设置对象内的文本 
    3.   
  
  
  
  3. a.outerHTML  获取或者设置对象外的HTML 
    4.   
  
  
  
  4. a.outerText  获取或者设置对象外的文本 
    5.   
  
  
  
  5. a.value      获取或者设置表单元素的值 
    6.

总结

这篇文章主要介绍了JavaScript的文档对象。下一篇文章，我们继续介绍JavaScript，敬请期待!

本文题目：一文解读JavaScript中的文档对象（DOM）
当前URL：http://www.csdahua.cn/qtweb/news21/419721.html

网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网

成都快上网为您推荐相关内容

电子商务知识

行业网站建设

电信机房托管服务器　　 　网站建设　　 　乐山中领科信　　 　营销型网站建设　　 　网站优化排名推广　　 　崇州做网站　　 　移动服务器托管　　 　成发金汇　　 　四川服务器托管　　 　成都商城网站开发　　 　LED显示屏厂家　　 　软文平台　　 　成都众诚伟业　　 　服务器托管　　 　品牌官网设计　　 　南京护栏钻孔机　　 　网站ssl证书　　 　无边发光字　　 　成都保温材料　　 　添翼二手车鉴定