首页 > 其他分享> 文章详细

js DOM知识总结

2021-05-19 16:03:03 阅读：135 来源： 互联网

标签：总结返回 document DOM 元素 js 获取 ele 节点

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

标签：总结,返回,document,DOM,元素,js,获取,ele,节点
来源： https://www.cnblogs.com/jiaoyisen/p/14785373.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9