DOM :
DOM(Document Object Model)文档对象模型。DOM为HTML提供了结构化表示方法,定义了访问和处理文档结构的方法规范。
HTML可以理解为是由DOM节点构成的集合,主要由元素节点、文本节点、属性节点三部分构成。
js操作DOM的方法 :
js操作dom主要分对元素节点、文本节点、属性节点的增删改查:
判断元素节点类型
新增节点:
var newNode=document.createElement("div"); //创建一个元素节点
var textNode=document.createTextNode("hello world!"); //创建一个文本节点
var cloneNode =newNode.cloneNode(true);//克隆一个节点,参数true表示会克隆当前节点以及他的所有子节点,flase表示只克隆当前节点,默认为false
document.createDocumentFragment();//创建文档对象变量,主要用来临时存储节点,大量操纵dom时性能会有很大的提升
删除节点
var deleteNode = parentNode.removeChild(item);//删除指定的子节点,并返回 deleteNode只是在dom树中删除了,但在内存中还可以访问
修改节点
node.appendChild(newNode);// 在指定元素后面新增子节点
parentNode.insertBefore(newNode,node); //在parentNode的子节点newNode前面插入newNode节点
parentNode.replaceChild(newNode,oldNode);//用oldNode节点替换parentNode的子节点newNode
查找节点
var parentNode=document.getElementById("list");//返回第一个带有指定id的元素
var classList=document.getElementsByClassName("wrapper"); //返回所有带有指定class的元素的集合(返回数组形式)
var tagList=document.getElementsByTagName("li");//返回所有带有指定标签的元素的集合(返回数组形式) // *表示查找所有标签
var list=document.querySelector(".wrapper");//返回第一个带有指定id或class的元素
var allList=document.querySelectorAll(".wrapper");//返回所有带有指定id或class的元素
通过节点之间的关系来查找元素节点,dom节点之间关系图以及操作方法如下
var node =document.getElementById("list");
// classList方法操作元素的class属性
node.classList.add("test"); //给node节点添加一个class
node.classList.remove("test");//删除node节点名为test的class
node.classList.replace("old-class","new-class");//替换node节点的class
var hasClass = node.classList.contains("test");//node节点是否存在给定的class,如果存在则返回 true,否则返回 false。
node.classList.toggle("test")//如果节点已经存在给定的class则删除,如果没有则添加
node.setAttribute("id","123");//给node节点设置id=123
var id = node.getAttribute("id");//获取node节点的id属性值
var hasAttr =node.hasAttribute("id");//判断node节点是否存在id属性
// dataset方法获取元素的data- 属性值
var dataId=node.dataset.id; //获取node节点的data-id属性值
var dataName=node.dataset.userName;//类似data-user-name属性必须使用驼峰式来访问
'id' in node.dataset // 判断node节点是否有data-id属性
// style方法修改元素的样式
node.style.color = 'red'; //设置color样式
node.style.setProperty('font-size', '16px'); //设置font-size样式
node.style.removeProperty('color'); //移除color属性
获取元素类型
element.nodeType
//返回元素的节点类型
1元素节点
2属性节点
3文本节点
4CDATA节点
5实体引用名称节点
6实体名称节点
7处理指令节点
8注释节点
9文档节点
10文档类型节点
11文档片段节点
12DTD声明节
获取当前节点的文本值
element.innerHtml //返回当前节点的所有文本包含html
element.innerText //返回当前节点及所有后代节点的文本值,不包含html