文档对象DOM的操作及使用
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的操作及使用的更多相关文章
- 第一百一十三节,JavaScript文档对象,DOM基础
JavaScript文档对象,DOM基础 学习要点: 1.DOM介绍 2.查找元素 3.DOM节点 4.节点操作 DOM(Document Object Model)即文档对象模型,针对HTML和XM ...
- 前端开发—BOM对象DOM文档对象操作
BOM 浏览器对象 BOM:Browser Object Model 操作浏览器,需要调用window对象,它是所有浏览器都支持的对象,表示的就是浏览器窗口 window对象可以通过点调用子对象 wi ...
- DOM文档对象总结
DOM总结: DOM:文档对象模型document object model DOM三层模型: DOM1:将HTML文档封装成对象 DOM2:将XML文档封装成对象 DOM3:将XML文档封装成对象 ...
- 第一百一十四节,JavaScript文档对象,DOM进阶
JavaScript文档对象,DOM进阶 学习要点: 1.DOM类型 2.DOM扩展 3.DOM操作内容 DOM自身存在很多类型,在DOM基础课程中大部分都有所接触,比如Element类型:表示的是元 ...
- 文档对象类型DOM
1 DOM概述 1.1 什么是DOM 文档对象模型 Document Object Model 文档对象模型 是表示和操作 HTML和XML文档内容的基础API 文档对象模型,是W3C组织推荐的处理可 ...
- js操作文档对象的节点
好吧,为了能让大家不至于睡着,我们先回顾先前面的东东吧~ 1.首先我们写了javaScriput的是一门弱类型的解释性的脚本语言:弱类型:我们的变量不用申明其具体的数据类型,在使用的时候浏览器根据其存 ...
- 文档对象模型DOM通俗讲解
转自:http://www.jb51.net/article/42671.htm 在开始之前先说一点,DOM是非常容易理解的,但是大家说的太官方,让人很是难于理解,我们就用非常简单的语言翻译一遍.加深 ...
- 数组对象元素的添加,String对象,BOM对象以及文档对象的获取
数组对象的删除有三种方法: pop(); //移除最后一个元素并返回该元素值shift(); //移除最前一个元素并返回该元素值,数组中元素自动前移splice(0,2); / ...
- XML文档读取-DOM
DOM(Document Object Model),“文档对象模型”早期是为了解决不用浏览器间数据兼容问题提出的解决方案,现在已经是W3C组织推荐的处理可扩展标志语言的标准编程接口. W3C DOM ...
随机推荐
- postman 中post方式提交数据
post方式提交数据时,把参数填写在body中而不是pOST下面的哪一行
- Educational Codeforces Round 12 B C题、
B. Shopping 题意:n个顾客,每个顾客要买m个物品,商场总共有k个物品,看hint就只知道pos(x)怎么算了,对于每一个Aij在k个物品中找到Aij的位置.然后加上这个位置对于的数值,然后 ...
- H3C DCC的特点
- hihocoder 1272 买零食
#1272 : 买零食 时间限制:5000ms 单点时限:1000ms 内存限制:256MB 描述 小Ho很喜欢在课间去小卖部买零食.然而不幸的是,这个学期他又有在一教的课,而一教的小卖部姐姐以冷若冰 ...
- Python数据可视化matplotlib和seaborn
Python在数据科学中的地位,不仅仅是因为numpy, scipy, pandas, scikit-learn这些高效易用.接口统一的科学计算包,其强大的数据可视化工具也是重要组成部分.在Pytho ...
- PowerShell 通过 WMI 获取系统信息
本文告诉大家如何通过 WMI 使用 Win32_OperatingSystem 获取设备厂商 通过下面代码可以获取 系统版本和系统是专业版还是教育版 Get-WmiObject Win32_Opera ...
- slim的简单使用
1.在命令行进入项目根目录,然后用composer下载slim composer require slim/slim "^3.0" 2.下载slim完成后,在php文件中引入req ...
- .Net Core 3.0 的 docker 容器中运行 无法 访问 Oracle数据库
.Net Core 3.0 的 docker 容器中运行 无法 访问 Oracle数据库 , 一直报下面的错误 ORA-00604: error occurred at recursive SQL ...
- css3条件判断_@supports的用法 以及 Window.CSS.supports()的使用
为了判断浏览器是否支持css3的一些新属性样式,当不兼容该样式的时候,我们可以更优雅的降级处理.这就需要使用到css3的条件判断功能:在css中支持@supports标记.或者在js中使用CSS.su ...
- requests库结合selenium库共同完成web自动化和爬虫工作
我们日常工作中,单纯的HTTP请求,程序员都倾向于使用万能的python Requests库.但大多数场景下,我们的需求页面不是纯静态网页,网页加载过程中伴随有大量的JS文件参与页面的整个渲染过程,且 ...