JavaScript入门系列目录
- JavaScript入门①-基础知识筑基
- JavaScript入门②-函数(1)基础{浅出}
- JavaScript入门③-函数(2)原理{深入}执行上下文
- JavaScript入门④-万物皆对象:Object
- JavaScript入门⑤-欲罢不能的对象、原型与继承
- JavaScript入门⑥-WEB浏览器API
- JavaScript入门⑦-DOM操作大全
- 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.
An elk is a smart
...and cunning animal!
当前选择元素
$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
let div = document.querySelector('#firstDiv');
div.classList.add("c5");
div.setAttribute("att2", 3) //添加、设置属性值
div.addEventListener("click",
(event) => {
console.log(event)
});
div.hidden = true;
📢注意: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
。
span[data-status="success"] {
color: green;
}
span[data-status="failure"] {
color: red;
}
操作结果
const espan = document.querySelector("span[data-status]");
console.log(espan.attributes); //所有属性集合
console.log(espan.getAttributeNames()); //['data-status', 'class', 'style']
console.log(espan.hasAttribute("data-status")); //true
//切换样式
espan.attributes["data-status"].value="failure";
espan.dataset.status="failure";
espan.setAttribute("data-status","failure");
espan.class="success";
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 元素滚出去(隐藏)的部分宽度、高
#sdiv {
border: 5px solid pink;
padding: 5px;
margin: 5px;
width: 200px;
height: 50px;
overflow: auto;
}
光圈效应:会导致爱屋及乌的认知偏差,名人效应就是典型的光环效应。与之相反的是音叉效应(恶魔效应)。
let sdiv = document.querySelector('#sdiv');
console.log(sdiv.clientWidth, sdiv.clientHeight); //193 60
console.log(sdiv.offsetWidth, sdiv.offsetHeight); //214 70
console.log(sdiv.scrollWidth, sdiv.scrollHeight); //193 115
console.log(sdiv.clientLeft,sdiv.clientHeight); //5 60
console.log(sdiv.offsetLeft,sdiv.offsetTop); //13 261
console.log(sdiv.scrollLeft,sdiv.scrollTop); //0 0
1.5、document
✅ document 属性 描述
documentElement 对应 <html></html>
标签的 顶层节点 all、head、
body
所有元素的集合、head节点、body节点 images 所有 <image></image>
图片元素集合 forms 所有表单元素 <form></form>
的列表 links 所有超链接的列表 scripts 所有的 <script></code><p class="node-read-div2p"> 元素 </p><strong>✅扩展属性</strong><p class="node-read-div2p"> 继承自 HTMLDocument 接口 title 文档标题(浏览器页签显示的名称)来自</p><code><title></code><p class="node-read-div2p">标签,可以动态修改。 </p><strong>readyState</strong><p class="node-read-div2p"> document 的加载状态:loading( 文档正在被加载)、interactive( 文档被全部读取,/ˌɪntərˈæktɪv/ 交互)、complete(包括资源都已加载完成) domain、URL 网址域名、完整URL地址。还有个</p><code>location</code><p class="node-read-div2p">属性同</p><code>window.location</code><p class="node-read-div2p"> cookie 前页面的Cookie defaultView 当前window的引用,</p><code>window===document.defaultView; //true</code><pre><code class="language-javascript">console.log(document.documentElement.childNodes); //[head, text, body]
window[‘hid’]
console.log(document.documentElement.children); //[head, body]
//京东首页
console.log(document.all.length, document.images.length, ); //8438 433
console.log(document.links.length, document.scripts.length); //2771 34
console.log(document.title); //京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物!
console.log(document.readyState); //complete
console.log(document.domain, document.URL); //www.jd.com https://www.jd.com/
console.log(document.cookie);
console.log(document.defaultView === window); //true
</code></pre><h1 id="02查找dom元素">02、查找DOM元素</h1><p>查找元素、节点的相关方法,最常用、好用的就是<code>querySelector(cssSelector)</code>了,参数就是css选择器,这个方法设计的不错👍。</p><strong>属性/方法</strong><strong>描述</strong><strong>querySelector</strong><p class="node-read-div2p">(css) 根据选择器查询返回</p><strong>第一个元素</strong><p class="node-read-div2p">,selectors同CSS选择器 </p><strong>querySelectorAll</strong><p class="node-read-div2p">(css) 根据选择器查询返回</p><strong>NodeList</strong><p class="node-read-div2p">集合(静态集合) </p><strong><code>id</code></strong><p class="node-read-div2p">全局变量 元素</p><code>id</code><p class="node-read-div2p">作为全局变量访问:</p><code>hid.innerText="33";
不推荐使用:容易命名冲突,不容易分辨变量来源 elem.
matches
(css) 判断是否匹配css选择器,返回
true
false
elem.
closest
(css) 查找离元素
最近的css匹配的祖先
(/klosɪst/靠近),包含elem自己 document.
getElementById
(id) 根据id获取
一个元素
,id重复则取第一个 document.
getElementsByName
(name) 根据
name
属性获取元素
集合
(动态),多用于单选框、复选框
getElementsByClassName
(class) 根据
class
属性值获取元素
集合
(动态,会实时更新)
getElementsByTagName
(tag) 根据元素标签名元素
集合
(动态),
getElementsByTagName("div")
//id=sdiv,可以直接使用
console.log(sdiv.matches('.cname')) //false
console.log(sdiv.closest(':not(div)')); //body
document.body.getElementsByTagName("div"); //HTMLCollection
document.body.querySelectorAll("div"); //NodeList
document.body.querySelector("div") === document.body.querySelectorAll("div")[0]; //true
console.log(sdiv.closest(':not(div)')); //body
03、增删改DOM元素
属性/方法描述createElement
(tagName) 根据标签名创建节点元素:
document.createElement("div")
createTextNode
(text) 创建一个文本节点。也可用
innerText
直接设置文本内容。 ele.
(child…) 在末尾追加多个子节点(或DOMString=text节点) ele.
prepend
(child…) 在开头插入多个子节点(或DOMString) ele.
after
(node…) 在后面插入节点(或DOMString) ele.
before
(node…) 在前面插入节点(或DOMString) ele.
replaceWith
(node, … nodes) 将
ele
替换为给定的节点或字符串 ele.
remove
(element) 把对象从它所属的 DOM 树中删除 elem.
(where, html) 插入html字符,不会影响现有元素,性能比innerHTML 更好! node.
cloneNode
(deep) 克隆当前节点副本,deep=true会克隆其所有后代,否则只是节点本身 ele.innerHTML 设置标签HTML内容,也可以达到创建节点内容的目的 ele.
innerText
设置标签文本内容,兼容性最好? node.textContent 设置节点文本内容,效果同上
📢注意:
- 移动插入:所有插入方法,如果插入的是已存在DOM树上节点,都会自动从旧的位置删除再插入到新的位置。
- 下拉框
select
的选项option
可以通过其属性options
添加。obj1.options.add(new Option("abc",3))
let parent = document.createElement("div"); //这两个命名(parent、child)和window有冲突的,虽然可以用
let child = document.createElement("p");
child.innerText = "p-innertext";
parent.appendChild(child);
parent.append("sam1", "sam2"); //插入多个文本节点
child.replaceWith(document.createElement("span"), "text-"); //替换节点
console.log(parent.outerHTML); //text-sam1sam2
parent.innerHTML = "ptext
";
console.log(parent.outerHTML); //ptext
parent.innerText = "ptext
"; //会被转义
console.log(parent.outerHTML); //ptext
sdiv.append(parent);
3.1、远古的node方法
远古时期流传下来的node
提供的插入节点的方法,返回参数都是Node
。和element
方法主要区别是element
的方法参数可多个,方法也更简洁。
属性/方法描述
node.
(child) 从末尾追加一个子节点,支持字符串参数 node.
insertBefore
(new,ref) 在ref节点前插入一个节点 node.
replaceChild
(new,old) 替换一个子节点 node.
removeChild
(child) 删除一个子节点
3.2、insertAdjacentHTML/Text/Element
插入HTML字符、文本、元素节点的通用方法:(adjacent /əˈdʒeɪs(ə)nt/ 相邻的)。
属性/方法描述
elem.
insertAdjacentHTML
(where, html) 插入html字符,不会影响现有元素 elem.
insertAdjacentElement
(where, element) 插入元素 elem.
insertAdjacentText
(where, text) 插入文本
参数where是一个枚举字符,这个谁取的名真头疼:
- ‘beforebegin‘:元素自身的前面。
- ‘afterbegin‘:插入元素内部的第一个子节点之前。
- ‘beforeend‘:插入元素内部的最后一个子节点之后。
- ‘afterend‘:元素自身的后面。
div
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
const cdiv = document.getElementById("cssDiv");
cdiv.style.backgroundColor = window.prompt("input background color", "red");
cdiv.style.backgroundColor = "";
cdiv.style.removeProperty("backgroundColor");
cdiv.style.lineHeight = "30px"; //注意要带单位
cdiv.style.cssText = "color:red;font-weight:bold;" //会覆盖前面的样式
//计算样式
const cdstyle = getComputedStyle(cdiv);
console.log(cdiv.className); //c1 c2 c3 c4
console.log(cdiv.classList); //DOMTokenList(4) [ "c1", "c2", "c3", "c4" ]
cdiv.classList.toggle("c1");
cdiv.classList.remove("c1", "c2");
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
©️版权申明:版权所有@安木夕,本文内容仅供学习,欢迎指正、交流,转载请注明出处!原文编辑地址-语雀
Original: https://www.cnblogs.com/anding/p/16890295.html
Author: 安木夕
Title: JavaScript入门⑦-DOM操作大全
原创文章受到原创版权保护。转载请注明出处:https://www.johngo689.com/797064/
转载文章受原作者版权保护。转载请注明原作者出处!