JavaScript - DOM
2021/5/25 1:24:42
本文主要是介绍JavaScript - DOM,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
1 文档结构(元素关系)
1.1 节点树
childNodes 获取所有子节点组成的集合,是个NodeList类型的对象 firstChild 获取第一个子节点 lastChild 获取最后一个子节点 parentNode 获取父节点 previousSibling 获取前一个兄弟节点 nextSibling 获取后一个兄弟节点
1.2 元素树
children 获取所有子元素组成的集合,是个HTMLCollection类型的对象 firstElementChild 获取第一个子元素 lastElementChild 获取最后一个子元素 parentElement 获取父元素 previousElementSibling 获取上一个兄弟元素 nextElementSibling 获取下一个兄弟元素
2 元素的属性操作
2.1 读写内置属性
元素对象.属性; // 可读可写
HTML 标签有什么内置属性,元素对象也有什么属性!
2.2 读写自定义属性
// 获取属性的值 元素对象.getAttribute('属性名'); // 修改属性的值 如果是不存在的属性会添加到标签上 元素对象.setAttribute('属性名', '值')
总结: getAttribute() 和 setAttribute() 本质山是读写写在 HTML 标签上的属性,不论是内置的还是自定义。
2.3 data-*
形式的自定义属性
<img data-name="" data-user-address="">
imgNode.dataset.name; imgNOde.dataset.userAddress; // 可读可写,自动转为小驼峰 对应HTML中的-语法
3 元素的样式操作
3.1 读写行内样式
元素对象.style.属性名; // 可读可写
注意: 只能读取行内的样式; 使用该方式设置css样式也会设置到行内。
3.2 读取计算样式
window.getComputedStyle(元素对象).属性名;
注意:
- 不论以何种方式设置的样式,只要是作用在元素上都可以读取,没有设置的样式也会读取默认值。
- 该方式只能读取无法设置
/** * 兼容性写法, 兼容IE8 * @param element ele 要获取样式的元素对象 * @param string attrName CSS属性名 * @return attrName的值 */ function getStyle(ele, attrName) { // 判断是否支持 getComputedStyle if (window.getComputedStyle) { // 非IE 和 IE9+ return getComputedStyle(ele)[attrName]; } else if (ele.currentStyle) { // IE8 以及以下 return ele.currentStyle[attrName]; } }
3.3 通过设置元素的类名操作样式
① className
元素对象.className; // 可读可写 对应元素的内置属性 class
② classList
元素.classList; 得到一个对象,专门用于操作元素的类名 元素.classList.add(); 添加一个类名 元素.classList.remove(); 删除一个类名 元素.classList.toggle(); 切换一个类名(有就删除,没有就添加)
4 读写元素的文本内容(可读可写)
innerHTML 读写元素内部的文本内容和html代码 outerHTML 读写包括元素以及内部的文本内容和html代码 innerText 读写元素内部的文本内容(不包括html代码) textContent 相比于 innerText 会保留原文本的缩进格式
5 读取元素的尺寸(只读)
offsetWidth / offsetHeight 获取元素的总宽高(内容+padding+border) clientWidth / clientHeight 获取元素的宽高(内容+内边距) scrollWidth / scrollHeight 在 clientWidth/clientHeight 的基础上加上溢出内容的大小 getBoundingClientRect() 该方法返回一个对象,对象中有 width 和 height 属性,能够获取元素的总宽高,同 offsetWidht/offsetHeight
6 读取元素的位置 (只读)
offsetLeft / offsetTop 获取元素在第一个定位的祖先元素上的位置,都没有定位就是在整个页面上的位置 clientLeft / clientTop 获取元素左边框宽和上边框宽 getBoundingClientRect() 该方法返回一个对象,对象与位置有关的属性 left / top: 元素在视口上的位置 (与祖先元素定位与否无关) x / y: 同上 right / bottom:元素右下角在视口上的位置,坐标原点是视口左上角
这篇关于JavaScript - DOM的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-07-08如何在敏捷项目中实现高效测试?
- 2024-07-08用户故事一定要有 “So that...” 吗?
- 2024-07-04TiDB 资源管控的对撞测试以及最佳实践架构
- 2024-07-03万字长文聊聊Web3的组成架构
- 2024-07-02springboot项目无法注册到nacos-icode9专业技术文章分享
- 2024-06-26结对编程到底难不难?答案在这里
- 2024-06-19《2023版Java工程师》课程升级公告
- 2024-06-15matplotlib作图不显示3D图,怎么办?
- 2024-06-1503-Loki 日志监控
- 2024-06-1504-让LLM理解知识 -Prompt