js DOM知识总结

2024-03-27 14:35:22

注意：在DOM树中，顶端节点被称为根（root）,每个节点都有父节点，除了根节点（它没有父节点）在DOM树中根节点为html

document.getElementById('box');
- 作用：获取特定ID 元素的节点
- 如果找到相应的元素则返回该元素对象，如果不存在，则返回null;
- 说明：id表示一个元素节点的唯一性，不能同时给两个或以上的元素创建同一个id名。
document.getElementsByTagName();
- 作用：返回一个对象类（伪）数组，这个数组保存着所有相同元素名的节点列表(NodeList)
document.getElementsByName();
- 获取相同名称(name)的元素，返回一个数组对象，一般多用在表单元素上。比如单选框、复选框的name值就相同
document.getElementsByClassName()
- 作用：返回包含带有指定类名的所有元素的节点列表
document.querySelectorAll()
- 作用：返回文档中匹配指定 CSS 选择器的所有元素
document.querySelector()
- querySelector()方法querySelectorAll()工作原理相似，但是它只是返回第一个匹配的元素（以文档顺序）如果没有匹配的元素就返回null

parentNode//获取所选节点的父节点
childNodes //获取所选节点的子节点们
firstChild //获取所选节点的第一个子节点
lastChild //获取所选节点的最后一个子节点
nextSibling //获取所选节点的后一个兄弟节点列表中最后一个节点的nextSibling属性值为null
previousSibling //获取所选节点的前一兄弟节点列表中第一个节点的previousSibling属性值为null
children // 返回当前元素的元素子节点
childElementCount:返回子元素节点的个数（IE9以下不兼容）
firstElementChild:返回该节点的第一个子元素节点（IE9以下不兼容）
lastElementChild:返回该节点的最后一个子元素节点（IE9以下不兼容）
previousElementSibling:返回前一个兄弟元素节点（IE9以下不兼容）
nextElementSibling:返回后一个兄弟元素节点（IE9以下不兼容）(6)parentElement　//返回当前元素的父元素节点（IE9以下不兼容）

DOM节点类型划分有12种：我们重点了解5种类型

创建一个元素
- document.createElement(tag);
创建一个文本标签
- document.createTextNode();
添加节点的方法
- 父级.appendChild('添加的节点');
- 父元素.insertBefore('插入的子元素','插入元素的相对位置');
克隆节点
- 元素节点.cloneNode(参数);
  - 浅复制不需要传参数参数默认false 只复制元素不复制内容
  - 深复制需要传参数 true 复制元素本身还复制元素内容

元素的行间样式
- ele.style.width
获取元素实际的尺寸
- elem.clientWidth/ elem.clientHeight (获取某个元素的宽高)
  - 不计算边框加上padding
- elem.offsetWidth / elem.offsetHeight (获取某个元素的宽高)
  - 计算边框加上padding
获取任意css样式中样式的属性值
- 标准浏览器 ie9以上 chrome fireFix
  - window.getComputedStyle( 对象,null )["属性"];
- 非标准 ie8以下
  - 对象.currentStyle["属性"]
获取元素的left 和 top
- ele.clientLeft / ele.clientTop (获取左边框和上边框的宽度)
- ele.clientLeft 只获取元素的左边框的尺寸
- ele.clientTop 只获取元素的上边框的尺寸
获取元素距离定位父级的距离
- offsetLeft 与 offsetTop
- 定位父级节点
  - 元素. offsetParent 获取元素的定位父级节点
  - 返回距离最近的定位父级元素

码农公寓