DOM节点操作

1、DOM:文档对象模型。核心对象是document

​ document.body

​ 2、DOM树:浏览器的JavaScript引擎(谷歌的V8引擎)在解析页面时,采用树形结构来存放页面元素

​ 3、DOM操作元素的样式:

​ (1)元素对象名.style.样式属性名 = 属性值

​ (2)HTML5对象样式的操作:

​ a、一个元素的class属性可以有多个值:作用是在保留原有样式的基础上添加新的样式

​ b、如何在js程序运行过程中动态的添加class属性值:

​ classList属性:是元素的class属性的列表

​ 4、classList属性提供的方法和属性

​ (1)属性:length —— 某个标签的class属性值的个数(即多少个类名)

​ (2)方法:

​ a、add(‘字符串’):给元素添加类名。一次只能添加一个

​ b、remove(‘字符串’):将元素的类名删除。一次只能删除一个

​ c、toggle(‘字符串’):若类名存在则删除,不存在则添加

​ d、item(index):根据index,来获取元素的类名

​ e、contains(‘类名’):判断元素是否含有给定的类名,若有返回true,没有返回false

 

5、DOM中节点的操作:采用操作节点的方式来操作页面中的元素

​ (1)获取节点时使用的属性:

​ a、firstChild:获取当前节点的首个子节点。

注意:换行符、空格等也是节点

​ b、nextSibiling:返回同一层级中指定节点之后紧跟的节点

 

 c、lastChild:访问当前节点的最后一个子节点

​ d、previousSibling:返回同一层级中指定节点的前一个节点

 e、nodeName:节点的名称

​ f、nodeValue:节点的值

​ g、nodeType:节点类型

​ 1:表示当前节点的类型是标签(元素)

​ 2:表示属性节点

​ 3:表示文本节点

​ h、parentNode:访问当前元素节点的父节点

​ i、childNodes:当前节点的所有子节点

强调:childNodes属性和children属性的区别

​ (1)相同点:都可以获取子元素

​ (2)不同点:

​ childNodes不仅包含文本节点,也包含其他的元素节点,返回值类型是NodeList

​ children返回的元素节点(即标签),返回值类型是HTMLCollection

​ getAttribute(‘id’):用来获取元素的id属性值

​ getAttributeNode(‘id’):用来获取元素的id属性(属性节点)

6、追加节点

​ (1)创建元素节点:

​ document.createElement()

​ (2)在指定节点的末尾追加节点

​ appendChild(newNode)

​ (3)在指定节点之前添加节点

​ insertBefore(newNode,node):将结点newNode插入到节点node之前

​ 该方法需要通过插入节点(node)的父节点来调用

 

(4)创建文本节点:

​ document.createTextNode()

练习:利用DOM创建ul无序列表 

 

 

 

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值