DOM相关知识点

1、DOM
概念:document object model
作用:提供了可以通过JS操作文档节点的方式

2、学习DOM包括:
(1)获取节点的方式(6种)
document.getElementById();
docuement.getElementSByClassName();
document.getElementsByTagName();
document.getElementsByName();
document.querySelector();
docuemnt.querySelectorAll();

(2)查找节点的方式
childNodes 查找元素节点+文本节点
children 查找元素节点
nextSibling 查找下一个节点(可能是元素节点或文本节点)
nextElementSibling 查找下一个元素节点
previousSibling 查找上一个节点(可能是元素节点或文本节点)
previousElementSibling 查找上一个元素节点
parentNode等同于parentElement 查找父元素节点
firstElementChild
lastElementChild

(3)节点属性的操作
【添加属性】
=====元素默认拥有的属性(eg:class、id、title、src、href......)======
添加属性:info.title info.href......
添加特定属性:info.className labels[0].htmlFor

=====不是元素自带属性,需要使用setAttribute()来添加属性========
info.setAttribute('index',123);
info.setAttribute('class','memeda');

【获取属性】
============获取元素默认拥有的属性=============
console.log(info.title);
console.log(info.className);

=====不是元素自带属性,需要使用getAttribute()来添加属性========
info.getAttribute('index');
info.getAttribute('class');

【删除元素属性】
============删除元素默认拥有的属性=============
info.className = ' ';
info.title = ' ';
=====不是元素自带属性,需要使用removeAttribute()来添加属性========
info.removeAttribute('index');
info.removeAttribute('class');

(4)节点样式的操作
(1)直接操作元素的CSS属性 -- 适用于要设置的属性较少的情况下
(2)通过给元素添加和移除类名或ID名,控制元素的样式

3、特定元素节点获取方式
(1)获取window: window
(2)获取document: window.document等同于document
(3)获取HTML: document.documentElement
(4)获取body: docuemnt.body
(5)获取title: document.title
(6)获取页面中所有的form: document.forms
(7)获取页面中所有的img: document.images
(8)获取页面中的a链接: document.links

转载于:https://www.cnblogs.com/sherryStudy/p/dom.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值