JavaScript入门⑦-DOM操作大全

JavaScript入门系列目录

  • JavaScript入门⑧-事件总结大全
  • JavaScript入门⑨-异步编程●异世界之旅
  • JavaScript入门⑩-ES6归纳总结

01、DOM(document)

DOM（Document Object Model）文档对象模型，将文档document解析为一个由节点和对象（包含属性和方法的对象）组成的逻辑树，每个节点都是一个对象，document 对象就是整个DOM树的根节点。DOM提供的API方法用来管理这棵树，用JavaScript 等脚本语言操作文档结构、样式和内容。

1.1、DOM结构-节点/元素

DOM树是由很多节点构成，分为下面几种类型，注意节点是包含文本、注释的。

节点类型 描述 示例
document文档节点 document文档本身，DOM的入口（根） document
element元素节点 所有HTML元素Element /?el?m?nt/ i html、body、a、p
attribute属性节点 元素的属性 id、name、href、class
文本节点 元素内的文本形成文本节点 文本字符、换行、空格
注释节点 注释

一颗完整的DOM树，除了显而易见的元素，还有注释、换行符构成的文本类节点。



    
        The truth about elk.
        
    
            
  1. An elk is a smart
    2. 
            
            
  2. ...and cunning animal!
    3.

当前选择元素$0：在浏览器控制台中，$0标识当前选中的元素。$0.style.background='red';

节点和元素在DOM树上的不同视图（导航方式）如下图，现代JS中主要使用元素导航属性。

?节点-导航属性 描述 ?元素-导航属性 描述
parentNode 父节点 parentElement 父元素，一般和parentNode一样，只有document.documentElement不同
firstChild 第一个子节点 firstElementChild 第一个子元素
lastChild 最后一个子节点 lastElementChild 最后一个子元素
childNodes 子节点集合 children 子元素集合
nextSibling 下一个兄弟节点 nextElementSibling 下一个兄弟元素（ Sibling/?s?bl??/ 兄弟）
previousSibling 上一个兄弟节点 previousElementSibling 上一个兄弟元素（/?pri?vi?s/以前 ） 
document.documentElement.parentNode; //HTMLDocument
document.documentElement.parentElement; //null
document.body.childNodes.length; //33
document.body.children.length; //16
document.body.firstElementChild;

?元素节点：这里的导航属性都是只读的，不可用于插入、修改元素；都是实时的；集合是可迭代的，用for..of，不要用for(in)

1.2、节点Node/元素Element

节点/元素的继承层次结构如下，最基础的EventTarget 又继承自Object，因此可以自由添加属性、方法。

  • EventTarget：—— 是一切的根（“抽象（abstract）”类），定义了基础的事件。
  • Node：也是一个“抽象”类，充当 DOM 节点的基础，提供了节点导航功能，如parentNode，nextSibling，childNodes 等。
  • Document：表示整个文档，全局变量document就是他。
  • CharacterData：一个文本“抽象”类，被Text（文本节点） 、Comment （注释节点）继承。（Character/?k?r?kt?r/ 符号文字）
  • Element：是 DOM 元素的基础类，提供了元素导航功能，如nextElementSibling，children等，以及搜索方法getElementsByTagName 和 querySelector等。
  • HTMLElement：所有 HTML 元素的基础类，常用的如：HTMLInputElement、HTMLBodyElement、HTMLAnchorElement、HTMLDivElement、HTMLTableElement
document.body.querySelector("div").constructor.name; //HTMLDivElement
document.body.querySelector("div").toString(); //[object HTMLDivElement]

??Node节点

Node节点对象的属性：

Node属性/方法 描述
data 文本/注释节点的文本值，可修改，注释节点可用来存放一些待处理内容
nodeName 节点名称
textContent 元素内文本，不含标签。可修改，可安全的写入文本。
appendChild(node) 从末尾追加一个子节点
removeChild(child) 删除一个子节点
replaceChild(new,old) 替换一个子节点
insertBefore(new,ref) 在ref节点前插入一个节点
cloneNode(deep) 克隆当前节点副本，deep=true会克隆其所有后代，否则只是节点本身
contains( node) 是否包含指定的后代节点，返回bool
hasChildNodes() 是否包含子节点，返回bool 
// 
div内容
p内容


let div = document.querySelector('#div');
console.log(div.innerHTML,div.textContent,div.innerText); //div内容
p内容
  div内容p内容  div内容\n\np内容
console.log(div.nodeName, div.localName, div.tagName); //DIV div  DIV

??Element 元素

Element 基类元素对象提供的属性方法：

?Element属性 描述
id 唯一id，基础通用属性还要name、class、style
localName 本地化名称，名称相关的还有nodeName、tagName
classList、className class样式集合、class样式值，集合可以新增、删除。
innerHTML 元素标签内的所有HTML内容，可以修改，注意innerHTML+=会进行完全重写
outerHTML 包含元素本身及其内部的所有HTML内容，可以修改（删除并替换）
innerText 元素标签内的所有文本节点值，包含所有后代节点的文本。
hidden 是否隐藏的bool属性，
?方法
addEventListener() 注册实践到EventTarget，还有配套的removeEventListener()
append(node...) 在末尾追加多个子节点（或DOMString=text节点）
prepend(node...) 在开头插入多个子节点（或DOMString）
after(node...) 在后面插入节点（或DOMString）
before(node...) 在前面插入节点（或DOMString）
replaceWith(node) 将 node 替换为给定的节点或字符串
remove(element) 把对象从它所属的 DOM 树中删除
scroll()/scrollBy() 元素内滚动
?事件(event)
blur(event)、focusout() 元素失去焦点，blur不会冒泡 （blue /bl??r/ 模糊）
focus、focusin 元素获取焦点时触发，focus不会冒泡
keydown、keyup 键盘按键按下、松开时触发
click(event) 点击触发，通常是鼠标左键在一个元素上被按下并放开时
dblclick 双击触发事件
mousedown、mouseup 鼠标按下、弹起时触发
mousemove 鼠标在元素上移动时触发
onmouseover、mouseout 鼠标移入、移出元素区域时触发
mouseenter、mouseleave 鼠标移入、移出元素区域时触发，与上面不同的是不会冒泡 
Element

??注意：DOM操作必须等节点初始化完成后才能进行。可以在html尾部执行JS，或者在window的onload事件中处理

1.3、元素特性Attribute

元素特性的操作方法：

Element-特性方法
attributes 所有属性节点的一个实时集合，支持移除项、属性值操作，ele.attributes["href"].value
getAttribute(attName) 获取属性值
getAttributeNames() 所有属性名数组
setAttribute(attName,value) 设置属性值，可以新增自定义特性，常用于设置css
removeAttribute(attName) 从指定的元素中删除一个属性
hasAttribute(attName) 判断是否包含指定属性，返回一个布尔值
hasAttributes() 判断是否包含属性，返回一个布尔值
  • 特性（attribute）—— 写在 HTML 中的内容，值都是字符串，大小写不明感。
  • 属性（property）—— DOM 对象中的内容，大小写敏感。

?特性attribute与属性property：元素上的特性attribute与属性property基本上都是一致相对应的。也有个别例外，如input.value只能单向从特性attribute同步到属性property。




    操作结果

dataset属性用来存放自定义的非标准特性，自定义的特性都以“data-”开头，这是专门保留给程序猿门使用的。如“data-status”，通过elem.dataset.status访问（属性上没有前缀date-）。这样可以避免HML语言升级后造成的名称冲突。

1.4、元素的大小位置

Element-大小位置 描述
clientHeight、clientWidth 元素内部高度、宽度，包括内边距（不含边框）
offsetWidth/offsetHeight 元素完整的宽度、高度，为元素的完整大小，包括border
clientTop/Left 元素边框宽度，同border宽度
offsetLeft/Top 元素相对于 offsetParent 左上角的 x/y 坐标
scrollHeight 、scrollWidth 元素滚动视图的高度、宽度，包含滑动隐藏部分。
scrollLeft/scrollTop 元素滚出去（隐藏）的部分宽度、高 




    光圈效应：会导致爱屋及乌的认知偏差，名人效应就是典型的光环效应。与之相反的是音叉效应（恶魔效应）。

1.5、document

?document属性 描述
documentElement 对应 标签的 顶层节点
all、head、body 所有元素的集合、head节点、body节点
images 所有图片元素集合
forms 所有表单元素
的列表
links 所有超链接的列表
scripts 所有的

3.3、DocumentFragment包装器

DocumentFragment 是一个特殊的节点，像一个容器，用来附加其他节点，然后传输给其他方法使用，当然好像也可以用数组代替。（Fragment /?fr?ɡm?nt/ 片段）

const adiv=document.getElementById("adjacent");
let fram=new DocumentFragment();
fram.append(document.createElement("li"));
fram.append(document.createElement("li"));
adiv.append(fram);
console.log(adiv.outerHTML);

04、DOM样式管理

属性/方法 描述
HTMLElement.style style是一个对象，对应于css中的属性，属性是驼峰命名的，注意值带单位！
style.cssText 设置style样式字符串值，同html标签中的style，注意会覆盖已有style样式
ele.className 获取、设置class样式值（字符串）
ele.classList 样式class列表，DOMTokenList集合，支持add/remove/toggle方法
length、value 数量，值（同className）
contains(css) 是否包含指定样式，返回bool
add(...css) 添加（多个）样式
remove(...css) 移除（多个）样式
replace(old, new) 替换
toggle(css) 不存在就添加，存在就移除（toggle /?tɑ?ɡl/ 切换）
windwo.getComputedStyle(ele) 计算/获取一个元素的已解析（resolved）样式style对象（同elem.style）

重置style属性样式的方式：

  • 值置空：cdiv.style.backgroundColor="";
  • 移除属性值：cdiv.style.removeProperty("backgroundColor");
css

05、滚动和坐标

有效的文档窗口区域高度、宽度，可以使用 document.documentElement 的 clientWidth/clientHeight，不含滚动条。window.innerWidth/innerHeight 包括了滚动条。

文档完整大小（包含滚动隐藏的部分）：documentElement.scrollWidth/scrollHeight，如果内容没有铺满，某些浏览器会小于clientWidth/clientHeight。因此获取完整文档高度，可以取多个值的最大值：

let scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight,
    document.body.offsetHeight, document.documentElement.offsetHeight,
    document.body.clientHeight, document.documentElement.clientHeight);

??滚动位置：

  • window.scrollX/scrollY，一般就用这个就可以了。
  • window.pageXOffset /pageYOffset ，是上面的别称。
  • document.documentElement.scrollLeft/scrollTop

??滚动方法：方法更通用，兼容性更好。

  • window.scrollBy(x,y) ，移动的距离。
  • window.scrollTo(pageX,pageY)，移动到坐标。
  • ele.scrollIntoView(top)，滚动到元素ele可见，参数top为bool，true（元素显示在顶部）、false（底部）

??禁止滚动：设置css属性overflow ：document.body.style.overflow = "hidden"，可用于元素、document。

??坐标：clientX/clientY 为相对于窗口的坐标，就是能看到的位置。pageX/pageY为相对于文档的坐标，包括滚动隐藏的部分。

??元素坐标：

  • 相对于窗口的坐标：elem.getBoundingClientRect()，返回一个 DOMRect 对象，包含了坐标位置宽（x、y、widht、height、top、left）等属性。
  • 相对于文档的坐标：elem.getBoundingClientRect() 加上当前页面滚动window.scrollX/scrollY
  • 获取指定坐标的元素：document.elementFromPoint(x, y)，获取坐标 (x, y) 处嵌套最多的元素。
const cele= document.elementFromPoint(window.innerWidth/2,window.innerHeight/2);
cele.style.backgroundColor='red';
cele.scrollIntoView(true);

const rect = sdiv.getBoundingClientRect();
console.log(rect.x, rect.y, rect.left, rect.top); //13 260.875 13 260.875

??版权申明：版权所有@安木夕，本文内容仅供学习，欢迎指正、交流，转载请注明出处！原文编辑地址-语雀

前端WEB

相关

标签

一品网 冀ICP备14022925号-6