js DOM知识总结

Posted 2021-05-19 JYsen

DOM

关于节点

• 父节点：一个节点之上的直接节点是其父节点
• 子节点：一个节点下一层的直接节点是其子节点
• 兄弟节点：在同一层上具有相同父节点的节点是兄弟节点
• 后代节点：在一个节点之下的所有层级的节点是其后代节点
• 祖先节点：一个节点的任何父节点、祖父节点和其上层的所有节点是祖先节点

注意：在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 节点类型

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

• 通过nodeType方法 返回数字判断节点类型
  • 元素节点：nodeType 返回数字 1
  • 属性节点：nodeType 返回数字 2
  • 文本节点：nodeType 返回数字 3
  • 文档节点：nodeType 返回数字 9
  • 注释节点：nodeType 返回数字 8

属性节点的操作

• 获取元素的属性
  • ele.getAttribute(\'属性\');
• 设置元素的属性
  • ele.setAttribute(attr,val);
• 移除元素的属性
  • ele.removeAttribute(attr);

元素节点操作

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

DOM元素的样式的值

• 元素的行间样式
  • 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 获取元素的定位父级节点
    • 返回 距离最近的 定位父级元素