Dom对象是什么?

DOM对象就是每次你打开浏览器后,进入一个网址时浏览器获取到的HTML文本内容,当浏览器获取到HTML文本内容时,会将其内容以DOM对象的形式缓存到内存中,这时你便可以对DOM对象进行任何的操作及获取了。以下是学习到的javascript操作DOM对象的学习及总结:

一、DOM树节点分为四大类:

(1)文档节点

文档节点:doucment,Dom树最顶层的节点

(2)元素节点

包括:html、head、title、body、head、h1-h6、div、span等

(3)属性节点

包括:属性和方法、id 、class

(4)文本节点

包括:text

二、访问Dom树节点

(1)返回单一元素节点有2种方法:

getElementById、querySeletor

示例:

//获取id=one的元素节点
var firstItem = document.getElementById('one');
//获取li元素节点
var firstItem = document.querySeletor('li');
//获取id=one的li元素节点
var firstItem = docuemt.querySeletor('li#one');

(2)返回一个或多个元素节点

getElementsByClassName
getElementsByTagName
querySelectorAll

示例:

//获取class='hot'的元素节点
var hotItem = document.getElementsByClassName('hot');
//获取li元素节点,返回的是nodeList数组
var liItems = document.getElementsByTagName('li');
//获取li元素节点,返回的是nodeList数组
var liItems2 = document.querySelectorAll('li');
//获取class属性名为hot的li元素节点,返回的是nodeList数组
var nodeItems = document.querySelectorAll('li.hot');

(3)元素节点间的遍历

  1)父子节点

  parentNode   知道子节点,查找父亲节点

  2)兄弟节点

   previousSibling  查找相邻兄弟节点的上一个节点

nextSibling    查找相邻兄弟节点的下一个节点

     previousElementSibling    查找上一个元素节点(注意:只能是元素节点)

  nextElementSibling  查找下一个元素节点(注意:只能是元素节点)
   3)前后节点
   firstChild    查找第一个节点

  lastChild    查找最后一个节点

  firstElementChild    查找第一个元素节点

  lastElementChild    查找最后一个元素节点

三、操作Dom树节点

(1)新增元素节点  createElement()

(2)新增文本节点       createTextNode()

(3)将元素节点/文本节点,追加到现有节点后     appendChild()

(4)将元素节点/文本节点,添加到元素节点开始处   insertBefore()

示例:

//使用createElement() createTextNode() appendChild()在two上进行追加节点内容
var itemTwo = document.getElementById("two").lastChild;
var newElement_em = document.createElement("em");
var newEmContent = document.createTextNode("123");
newElement_em.appendChild(newEmContent);
//使用insertBefore方法,在元素节点前插入新元素
var ulItem = document.getElementsByTagName("ul")[0];
var newLiItem = createElement("li");
var newContent = createTextNode("这是新增的内容")
newLiItem.appendChild(newContent);
ulItem.insertBefore(newLiItem,ulItem.firstChild);

四、操作属性节点

获取属性值   getAttribute()

检查元素节点是否包含特定属性   hasAttribute()

设置属性值   setAttribute()

从元素节点移除属性  removeAttribute()
   

五、获取/更新元素/文本内容

获取元素内容

innerHTML

获取文本内容

nodeValue
textContent
innerText

修改文本节点内容

nodeValue="修改的值"
textContent="修改的值"

修改元素节点内容
innerHTML="修改的元素内容"

完结.

 

  

  

文档对象DOM的操作及使用的更多相关文章

  1. 第一百一十三节,JavaScript文档对象,DOM基础

    JavaScript文档对象,DOM基础 学习要点: 1.DOM介绍 2.查找元素 3.DOM节点 4.节点操作 DOM(Document Object Model)即文档对象模型,针对HTML和XM ...

  2. 前端开发—BOM对象DOM文档对象操作

    BOM 浏览器对象 BOM:Browser Object Model 操作浏览器,需要调用window对象,它是所有浏览器都支持的对象,表示的就是浏览器窗口 window对象可以通过点调用子对象 wi ...

  3. DOM文档对象总结

    DOM总结: DOM:文档对象模型document object model DOM三层模型: DOM1:将HTML文档封装成对象 DOM2:将XML文档封装成对象 DOM3:将XML文档封装成对象 ...

  4. 第一百一十四节,JavaScript文档对象,DOM进阶

    JavaScript文档对象,DOM进阶 学习要点: 1.DOM类型 2.DOM扩展 3.DOM操作内容 DOM自身存在很多类型,在DOM基础课程中大部分都有所接触,比如Element类型:表示的是元 ...

  5. 文档对象类型DOM

    1 DOM概述 1.1 什么是DOM 文档对象模型 Document Object Model 文档对象模型 是表示和操作 HTML和XML文档内容的基础API 文档对象模型,是W3C组织推荐的处理可 ...

  6. js操作文档对象的节点

    好吧,为了能让大家不至于睡着,我们先回顾先前面的东东吧~ 1.首先我们写了javaScriput的是一门弱类型的解释性的脚本语言:弱类型:我们的变量不用申明其具体的数据类型,在使用的时候浏览器根据其存 ...

  7. 文档对象模型DOM通俗讲解

    转自:http://www.jb51.net/article/42671.htm 在开始之前先说一点,DOM是非常容易理解的,但是大家说的太官方,让人很是难于理解,我们就用非常简单的语言翻译一遍.加深 ...

  8. 数组对象元素的添加,String对象,BOM对象以及文档对象的获取

    数组对象的删除有三种方法: pop();        //移除最后一个元素并返回该元素值shift();      //移除最前一个元素并返回该元素值,数组中元素自动前移splice(0,2); / ...

  9. XML文档读取-DOM

    DOM(Document Object Model),“文档对象模型”早期是为了解决不用浏览器间数据兼容问题提出的解决方案,现在已经是W3C组织推荐的处理可扩展标志语言的标准编程接口. W3C DOM ...

随机推荐

  1. postman 中post方式提交数据

    post方式提交数据时,把参数填写在body中而不是pOST下面的哪一行

  2. Educational Codeforces Round 12 B C题、

    B. Shopping 题意:n个顾客,每个顾客要买m个物品,商场总共有k个物品,看hint就只知道pos(x)怎么算了,对于每一个Aij在k个物品中找到Aij的位置.然后加上这个位置对于的数值,然后 ...

  3. H3C DCC的特点

  4. hihocoder 1272 买零食

    #1272 : 买零食 时间限制:5000ms 单点时限:1000ms 内存限制:256MB 描述 小Ho很喜欢在课间去小卖部买零食.然而不幸的是,这个学期他又有在一教的课,而一教的小卖部姐姐以冷若冰 ...

  5. Python数据可视化matplotlib和seaborn

    Python在数据科学中的地位,不仅仅是因为numpy, scipy, pandas, scikit-learn这些高效易用.接口统一的科学计算包,其强大的数据可视化工具也是重要组成部分.在Pytho ...

  6. PowerShell 通过 WMI 获取系统信息

    本文告诉大家如何通过 WMI 使用 Win32_OperatingSystem 获取设备厂商 通过下面代码可以获取 系统版本和系统是专业版还是教育版 Get-WmiObject Win32_Opera ...

  7. slim的简单使用

    1.在命令行进入项目根目录,然后用composer下载slim composer require slim/slim "^3.0" 2.下载slim完成后,在php文件中引入req ...

  8. .Net Core 3.0 的 docker 容器中运行 无法 访问 Oracle数据库

    .Net  Core 3.0 的 docker 容器中运行 无法 访问 Oracle数据库  , 一直报下面的错误 ORA-00604: error occurred at recursive SQL ...

  9. css3条件判断_@supports的用法 以及 Window.CSS.supports()的使用

    为了判断浏览器是否支持css3的一些新属性样式,当不兼容该样式的时候,我们可以更优雅的降级处理.这就需要使用到css3的条件判断功能:在css中支持@supports标记.或者在js中使用CSS.su ...

  10. requests库结合selenium库共同完成web自动化和爬虫工作

    我们日常工作中,单纯的HTTP请求,程序员都倾向于使用万能的python Requests库.但大多数场景下,我们的需求页面不是纯静态网页,网页加载过程中伴随有大量的JS文件参与页面的整个渲染过程,且 ...