【前端学习笔记DOM—DOM常见操作】

前言

本文就前端知识中部分DOM和DOM常见操作基础知识点进行总结，希望对你有用！

一、什么是DOM

概念：DOM就是文档对象模型（Document Object Model），当网页被加载时，浏览器会创建页面的文档对象模型。

作用：通过DOM，JavaScript能够访问和改变HTML文档的所有元素。

特点：树形结构。

二、常见的DOM操作

1.增

（1）新建

var pNew = document.createElement("p");
//通过fn createElement(标签名) 创建元素节点

pNew.setAttribute("title", "这里设置属性值");
//通过fn setAttribute(name.value) 直接设置属性

var p2 = pNew.cloneNode(true);
//通过fn cloneNode(true/false) 克隆节点（true包含子节点，false不包含）

（2）插入

父节点.appendChild(需拼接的节点);
//拼接节点

父节点.insertBefore(new,old);
//插入节点

2.删

（1）删除子节点

父节点.removeChild(待删除的节点);
//删除子节点

（2）删除属性节点

父节点.removeAttributeNode(待删除的属性节点);
//删除属性节点

3. 改

（1）替换节点

父节点.replaceChild(new, old);
//需要用父级来调用，替换节点

（2）修改属性值

父节点.setAttribute("属性名","属性值");
//修改属性值

4. 查

（1）通过id属性查找 （常用）

var id = document.getElementById('id');
//通过id属性查找,查找拥有指定id的第一个元素节点(常用)

（2）通过class属性查找

var classname = document.getElementsByClassName('classname');
//通过classname属性查找,查找所有带有class指定属性值的元素

（3）通过name属性查找

var name = document.getElementsByName('name');
//查找所有指定name属性值的元素

（4）通过标签名查找

var tag = document.getElementsByTagName('div');
//查找所有指定标签名的元素

（5）通过CSS选择器查找

var title = document.querySelector("#title");   
// CSS ID选择

var h1 = document.querySelector("h1");    
//选取第一个h1元素

特点：返回第一个匹配的元素；

var h1s = document.querySelectorAll("h1");   
//返回所有h1标签元素

特点：返回元素是类数组。

（6）获取父节点

p.parentNode.style.color = "red";

（7）获取子节点

var children = div.children;
//获取div所有子元素

var firstChild = div.children[0];
    firstChild = div.firstElementChild;
//获取div首个子元素节点

var lastChild = div.lastElementChild;
//获取div最后一个子元素节点

（8）获取兄弟节点

var proSib= div.previousElementSibling;
//获取div上一个兄弟元素节点
var proSib= div.nextElementSibling;
//获取div下一个兄弟元素节点

如果以上知识对你有用欢迎点赞和关注~ 谢谢~