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

猜你喜欢

转载自www.cnblogs.com/sherryStudy/p/dom.html