DOM和BOM常用知识点
1.js组成
ECMAScript(javascript) 的基础语法
变量 2语句 3函数 4 内置对像 (作用 数据传输 处理数据 展示数据)
2.DOM是什么
- 全称Document Object Model(文档对象模型),简称DOM,是一套操作HTML和XML文档(文件)的API
- 学习DOM就是学习封装好的操作页面的API(应用程序接口)，Application programming interface 就是一些封装好的方法
3.DOMDOM节点是什么
- DOM是由DOM节点(文档节点)组成
- HTML 文档中的所有内容都是节点
- 整个文档是一个文档节点
- 每个 HTML 元素是元素节点
- HTML 元素内的文本是文本节点
- 每个 HTML 属性是属性节点
- 注释是注释节点
4.查找dom节点,查看dom节点的属性和样式
1. 查找节点
- document.getElementById() 通过标签的Id获得的是唯一的页面标签对象
- document.getElementsByTagName() 通过标签(元素)名,得到一个标签对象的数组
- document.getElementsByClassName() 通过标签的类名:在JS中不推荐使用这种方式，因为有兼容性的问题
- H5的获取元素节点： document.querySelector("")
- H5的获取元素节点： document.querySelectorAll("")
- 注意：DOM对象的属性和标签的属性几乎是一模一样的，用DOM的方法获得的标签对象就是DOM对象,使用dir可查看和比较
2. 查看属性 var dom = document.querySelect('#app');
- 获取属性值（可以获的自定义属性的值）：dom.getAttribute(name) dom.xxx(比如dom.checked)
- 获取class的值 dom.className(得到的是字符串) dom.classList(得到的数组)
- dom.style.xxx 比如dom.style.color,dom.style.fontSize(仅限内联样式,font-size要写成fontSize)
- getComputedStyle(dom).color (任意式都可以), ComputedStyle => 有所有样式叠加之后的样式
3. 查看dom 节点内容和亲戚节点
- dom.innerText dom节点的内容,不包含标签
- dom.innerHTML dom节点的内容,包含标签
- dom.parentNode： 获取dom节点的父节点
- dom.children: 获取dom节点的子节点，是一个数组
- dom.nextElementSibling : 获取dom的下一个元素节点
- dom.nextSibling ：获取dom的下一个节点（包括元素节点）
- dom.previousSibling dom.previousElementSibling 同上
5. 添加节点
- createElement创建节点
- cloneNode克隆节点
- appendChild追加节点到某个元素后
- insertBefore在元素前面添加节点
image.png
image.png
- 删除节点
- m.removeChild(n)删除m元素中的n节点
- m.remove(); 删除自己(自杀)
- 修改dom节点 var dom = document.querySelector('#app');
- 修改dom节点的内容
- dom.innerText = '前端工程师';
- dom.innerHTML =
<button>前端工程师</button>;
- 修改属性 dom.setAttribute(name, value)
- 修改样式
- dom.style.border = "1px solid red"
- dom.style.backgroundColor = "yellow"
- 修改class
- dom.className = 'aaa'; 给元素添加一个加aaa的class
- dom.classList.add() | remove() , 添加或者删除，返回的是一个类名数组
- 修改dom节点的内容
