JS——DOM
关注
分享
扫一扫
学习JS三大组成部分DOM
溜_x_i_a_o_迪
本人从事过C++、MFC、Qt、asp.net、C#开发，目前从事Web前端开发，本人很菜，希望大牛们手下留情啊。。。
展开
-
DOM学习实用路线（12）——DOM表格相关操作
表格相关操作常见基本操作：tBodies、tHead、tFoot、rows、cellstable.tHead 获取 tHead（表头）table.tBodies 获取的就是 tbodyrows 获取 行(tr)cells 获取单元格 (th,td)<!DOCTYPE html><html lang="en"><head> <me...原创 2020-04-10 19:14:14 · 173 阅读 · 0 评论 -
DOM学习实用路线（11）——DOM元素的尺寸获取-获取页面及可视区的绝对位置
元素的尺寸获取getBoundingClientRect()left 元素左侧距离可视区左侧距离top 元素顶部距离可视区顶部距离right 元素右侧距离可视区左侧距离bottom 元素底部距离可视区顶部距离width 可视宽度height 可视高度元素相对可视区的位置（不太兼容）<!DOCTYPE html><html l...原创 2020-04-10 18:48:11 · 928 阅读 · 0 评论 -
DOM学习实用路线（10）——DOM元素的尺寸获取-client和scroll
元素的尺寸获取clientclientWidth 可视宽度 - borderclientHeight 可视高度 - borderclientTop 上边框宽度clientLeft 左边框宽度 client宽高包括内边距 padding，但不包括边框 border、外边距 margin 和垂直滚动条（如果有的话），其宽高盒模型如下： clientcl...原创 2020-04-10 15:30:22 · 479 阅读 · 0 评论 -
DOM学习实用路线（9）——DOM元素的尺寸获取-offset
元素的尺寸获取offsetoffsetWidth 可视宽度offsetHeight 可视高度offsetLeft 距离定位父级的left坐标offsetTop 距离定位父级的top坐标offsetWidth 可视宽度offsetHeight 可视高度<!DOCTYPE html><html lang="en"><hea...原创 2020-04-10 13:40:49 · 529 阅读 · 0 评论 -
DOM学习实用路线（8）——DOM节点操作之DOM克隆节点和DOM深浅克隆（拷贝）、DOM文档碎片（性能优化）
节点操作克隆节点node.cloneNode(deep)deep: 默认为falsedeep 为 true, 克隆元素及属性，以及元素的内容和后代deep 为 false, 只克隆元素本身，及它的属性<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8...原创 2020-04-10 12:21:50 · 601 阅读 · 0 评论 -
DOM学习实用路线（7）——DOM节点操作之替换节点和删除节点
节点操作替换节点node.replaceChild(newnode,oldnode)方法用新节点替换某个子节点。 这个新节点可以是文档中某个已存在的节点，或者您也可创建新的节点。 用newnode替换 oldChild 的新节点。如果该节点已经存在于 DOM 树中，则它首先会被从原始位置删除。<!DOCTYPE html><html lang="en">...原创 2020-04-09 23:12:41 · 706 阅读 · 0 评论 -
DOM学习实用路线（6）——DOM节点操作之创建节点和添加节点
节点操作创建节点语法：element document.createElement(“tagName”); 创建一个节点参数：tagName 标签名称返回值：创建好的节点<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta nam...原创 2020-04-09 21:18:24 · 526 阅读 · 0 评论 -
DOM学习实用路线（４）——DOM属性操作及ECMA、DOM 的属性操作的区别
DOM 属性操作注意 . 和 [] 都是 ECMAScript 中，对象的属性操作，对象属性的值会被存在内存中, 想要直接获取存在 文档中属性，或者 想把一个属性设置在文档中我们需要使用DOM 的属性操作：el.attributes 元素所有属性的集合el.getAttribute(“attr”) 获取属性el.setAttribute(“attr”,“val”) 设置属性el.r...原创 2020-04-09 16:24:14 · 395 阅读 · 0 评论 -
DOM学习实用路线（5）——DOM自定义属性
data 自定义属性在标签中定义data自定义属性：data-key=“value”;在js操作该元素的 data 自定义属性：el.dataset获取：el.dataset.key设置: el.dataset.key = “value”&npsb; 溜_x_i_a_o_迪童鞋自行想象自定义属性，尝试失败了！！！<!DOCTYPE html><...原创 2020-04-09 14:20:21 · 278 阅读 · 0 评论 -
DOM学习实用路线（3）——NodeList 和 HTMLCollection区别差异
NodeList 和 HTMLCollection返回值nodeListchildNodesquerySelectorAll返回值HTMLCollectionchildren以下我们可以观察出childNodes、querySelectorAll、children的返回值类型。<!DOCTYPE html><html lang="en">...原创 2020-04-09 13:22:46 · 253 阅读 · 0 评论 -
DOM学习实用路线（2）——DOM关系及DOM查找子级
DOM关系childNodes 子节点children 子元素firstChild 第0个子节点firstElementChild 第0个子元素lastChild 最后一个子节点lastElementChild 最后一个子元素nextSibling 下一个兄弟节点nextElementSibling 下一个兄弟元素previousSibling 上一个兄弟节点previo...原创 2020-04-09 12:10:48 · 598 阅读 · 0 评论 -
DOM学习实用路线（1）——DOM简介及DOM节点介绍
DOMjavascript 的组成部分DOM (document object model) 文档对象模型BOM (browers object model) 浏览器对象模型ECMAScript js 的核心 DOM树我们可以打印“console.log(document)”看看： DOM 节点节点分类元素节点：每个 HTML元素属性节点：HTM...原创 2020-04-09 09:57:13 · 329 阅读 · 0 评论