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