1
(一)DOM简介

DOM,全称Document Object Model,文档对象模型。
JS通过DOM来对HTML文档进行操作,理解了DOM就能随意操作WEB页面。


(二)DOM节点类型
nodeNamenodeTypenodeValue
文档节点#document9null
元素节点标签名1null
属性节点属性名2属性值
文本节点#text3文本内容

(三)常用DOM方法

(1)获取元素节点

1、document.getElementById(id):根据ID获取元素,如果页面中出现多个一样的ID,则返回第一次出现的;
2、document.getElementsByTagName(tagName):根据元素标签获取,获取到的是一个数组;
3、document.getElementsByClassName(className):根据元素类名获取,获取到的是一个数组;
4、document.getElementsByName(name):根据 name 获取元素;
5、namedItem():通过元素的 name 属性来获取元素;
6、document.anchors():获取所有带 name 属性的 a 标签;
7、document.forms:获取所有的元素;
8、document.links:获取所有带 href 属性的 a 标签;
9、document.querySelector():根据css选择器获取dom,有多个,只取第一个;
10、document.querySelectorAll():返回满足条件的所有元素;

(2)获取元素节点的子节点

1、getElementsByTagName():返回当前节点的指定标签名后代节点;
2、childNodes:表示当前节点的所有子节点,包括文本节点在内的所有节点;
3、firstChild:表示当前节点的第一个子节点;
4、lastChild:表示当前节点的最后一个子节点;

(3)获取父节点和兄弟节点
1、parentNode:表示当前节点的父节点;
2、previousSibling:表示当前节点的前一个兄弟节点;
3、nextSibling:表示当前节点的后一个兄弟节点;


中二病の软
148 声望7 粉丝