html 文档的骨干是标签。
根据文档对象模型(DOM),每个HTML标签都是一个对象,同样标签内的文本也是一个对象。因此这些对象都可通过 JavaScript 操作
如果文档中有空格(就像任何字符一样),那么它们将成为 DOM 中的文本节点,如果我们删除它们,则不会有任何内容。
<head> 之前的空格和换行符被忽略
</body> 之后放置了一些东西,那么它会自动移动到 body 内部,因为 HTML 规范要求所有内容必须位于 内。所以 后面可能没有空格。
通常再浏览器中的文本不会显示开头/结尾的空文本节点,标签之间也不会显示空文本节点。
如果浏览器遇到格式不正确的HTML,在形成DOM是会自动修复它
如:
<html> 即使不在文档中,浏览器也会自动创建它
按DOM规范,table 必须具有 <tbody>,因此table中未使用<tbody> 形成DOM时会自动添加。
其它节点:
注释不会以任何方式影响视觉表示,但是必须遵循一条规则 —— 如果HTML中有东西,那么它必须在DOM树中。
HTML中所有内容都是DOM的一部分,
注释是一个节点甚至<!DOCTYPE...>也是一个节
DOM总有12种节点
所有对DOM的操作都是从document对象开始,将这个对象赋予一个变量,对其进行修改操作
DOM节点树可以通过 document属性使用
顶端的节点对应<html> 并且 <html> = document.documentElement
而<body> = document.body,<head> = document.head
docment.body可能为null,如果将script脚本放入 <head>标签种,那么此脚本无法访问到document.body,即为null
childNodes 集合提供对所有子节点包括文本节点的访问,它看起来是一个数字,实际上只是一个可迭代的类数组对象,因此没有数组的方法
所有的Dom 集合节点都是只读的无法通过赋值来替换对应的节点
除小部分节点,几乎所有的DOM集合都是实时的,它们反应的是DOM的实时状态
不要是有 for...in来遍历DOM集合,此方法会列出其所有的属性。
注意此属性只能访问到当前script脚本之前对应的节点
可以通过elem.hasChildNodes()来检测是否含有子节点
通过elem.parentNode可访问当前节点的父节点
通过elem.previousSibling/elem.nextSibling可访问对应节点的上/下兄弟节点
parentElement 可能为null,因为其方法返回的是父元素节点,而parentNode返回的是任何类型的父节点,因此,document.documentElement.parentElement === null
通过元素查找子元素如果子元素是一个集合将返回 HTMLCollection 类数组
let tb = documet.querySelector('table')
let tbs = tb.tBodies // HTMLCollection [tbody]
let trs =tbs.rows // HTMLCollection [tr,tr,tr,...]
let tr1 = trs[0]
tr1.sectionRowIndex //0 当前 tr 在集合中的位置
tr1.rowIndex // 1 当前 tr 在整张表中的 位置
let tds = tr1.cells // HTMLCollection [td,td,td,...]
td[0].cellIndex //0 当前 td 在父元素 tr节点 中的位置
通过 document 中的方法 document.querySelectorAll 或elem.querySelectorAll获取的元素集合将返回NodeList类数组
getElement* 方法只能通过 document对象调用
let divs = document.querySelectorAll('div') // NodeList(4) [div.Owen, div#modal, div.main, div]
document.getElementsByTagName('div')//HTMLCollection [div.Owen]
elem.matches(css)会检测 elem是否匹配到给定的css选择器,返回 true 或 false
elem.closest(css)此方法会查找css选择器匹配到的祖先HTML,包括自身,并返回最先找到的元素
elem.catains(dom) 判断 dom 是否为 elem 的后代,或等于elem,返回true 或false
所有的节点都继承自根节点 EventTarget
用于存储节点的包装器,不会再浏览器中展示,需要通过插值方法才能展示包装器里面的内容
function creatEl(){
let frag = new DocumentFragment();
for (let i=1;i<4;i++) {
let li = document.createElement('li')
li.append(i)
frag.append(li)
}
return frag
}
ul.append(creatEl())
elem.className 对应元素的类名,多个类目以空格分隔
ul.className // "class1 class2 ..."
同时还要一个 elem.classList 对象可访问类名,它以类数组的方式存在,同时具有 add/remove/toggle/contains 等方法
ul.classList // DOMTokenList(2) ["333", "444", value: "333 444"]
ul.classList.add('class1')
ul.classList.remove('class1')
ul.classList.toggle('class1') // true 新增
ul.classList.toggle('class1') // false 去除
ul.classList.contains('class1') //false 是否包含
通常我们使用 style.*单独对样式属性进行修改,如果想要对多种样式进行调整可使用 cssText,此方法会直接替换之前的样式
ul.style.cssText = `
color: red ;
background-color: skyblue;
width: 20px;
text-align: center;`
style 属性仅针对 style 属性值进行操作,无法读取css类中的属性值
<style>
body {margin:20 auto;}
</style>
<script>
document.body.style.margin // ""
</script>
这时我们需要使用 getComputedStyle(el,[,pseudo])方法来获取对应的值
如果不传参或值无意义,将返回元素所有样式,其属性值都为解析值,如 font-size:1em 最后获取的可能为解析后的值"16px"
let res = getComputedStyle(document.body)
res.marginTop // "20px"
res.margin // 谷歌 "20px 0px" 在火狐中为 "" 因此访问确切属性值须使用完整属性名
HTML 文件里如果没有 <!DOCTYPE HTML> 上述的属性可能会有所不同,这不是一个 JavaScript 的问题,但会影响到 JavaScript。
pageXOffset/pageYOffset: 获取可视窗口移动的距离 无法设值
可通过 window.scrollBy, window.scrollTo, elem.scrollIntoView来滚动窗口
如果禁止窗口滚动可使 样式属性 overflow 值为 hidden
其所有属性都是以可视窗口左端(X)和顶部(Y)为起点
ul.getBoundingClientRect()
/*
DOMRect {
bottom: 829.59375 // 元素底部的Y坐标
height: 210 // 元素真实高度
left: 0 // 元素左边 X 坐标
right: 1903 // 元素右边 X 坐标
top: 619.59375 // 元素顶部 Y 坐标
width: 1903 // 元素自身真实宽度即不包含滚动条
x: 0
y: 619.59375
}
*/
document.elementFromPoint(x,y)返回可视窗口坐标(x,y),最顶层的元素
let elem = document.elementFromPoint(0,0) // <p>556666</p>
如果x,y不在正常范围内将返回 null,
function getDomCoords(el){
let {top,left} = el.getBoundingClientRect()
return {
top:top+ window.pageYOffset,
left:left+window.pageXOffest
}
}
DOM是很慢的,其元素非常庞大,页面的性能问题鲜有由JS引起的,大部分都是由DOM操作引起的。虚拟的DOM的核心思想是:对复杂的文档DOM结构,提供一种方便的工具,进行最小化地DOM操作。
浏览器解析HTML文档生成DOM树的过程,以下是一段HTML代码,以此为例来分析解析HTML文档的原理.解析HTML文档构建DOM树的理解过程可分为两个主要模块构成,即标签解析、DOM树构建
javascript获取DOM对象的多种方法:通过id获取 、通过class获取、通过标签名获取、通过name属性获取、通过querySelector获取、通过querySelectorAll获取等
遍历DOM节点常用一般用节点的 childNodes, firstChild, lastChild, nodeType, nodeName, nodeValue属性。在获取节点nodeValue时要注意,元素节点的子文本节点的nodeValue才是元素节点中文本的内容。
要构建自己的虚拟DOM,需要知道两件事。你甚至不需要深入 React 的源代码或者深入任何其他虚拟DOM实现的源代码,因为它们是如此庞大和复杂——但实际上,虚拟DOM的主要部分只需不到50行代码。
事件冒泡: 即事件开始时由最具体的元素(文档中嵌套层数最深的那个点)接收,事件捕获:不太具体的节点应该更早接收到事件,而最具体的节点应该最后接收到事件.与此同时,我们还需要了解dom事件绑定处理的几种方式:
先列出我的理解,然后再从具体的例子中说明:DOM操作本身应该是同步的(当然,我说的是单纯的DOM操作,不考虑ajax请求后渲染等);DOM操作之后导致的渲染等是异步的(在DOM操作简单的情况下,是难以察觉的)
早期由于浏览器厂商对于浏览器市场的争夺,各家浏览器厂商对同一功能的JavaScript的实现都不进相同,本节内容介绍JavaScript的DOM事件模型及事件处理程序的分类。
设置定义属性值 :data-value=.., 2.直接获取 3.通过this.$refs.***获取 1.目标DOM定义ref值: 2.通过 【this.$refs.***.属性名】 获取相关属性的值: this.$refs.*** 获取到对应的元素 ...
框架用多了,你还记得那些操作 DOM 的纯 JS 语法吗?看看这篇文章,来回顾一下~ 操作 className,addClass给元素增加 class,使用 classList 属性
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!