html 文档的骨干是标签。
根据文档对象模型(dom),每个html标签都是一个对象,同样标签内的文本也是一个对象。因此这些对象都可通过 javascript 操作
如果文档中有空格(就像任何字符一样),那么它们将成为 dom 中的文本节点,如果我们删除它们,则不会有任何内容。
<head>
之前的空格和换行符被忽略
</body>
之后放置了一些东西,那么它会自动移动到 body 内部,因为 html 规范要求所有内容必须位于
通常再浏览器中的文本不会显示开头/结尾的空文本节点,标签之间也不会显示空文本节点。
如果浏览器遇到格式不正确的html,在形成dom是会自动修复它
如:
<html>
即使不在文档中,浏览器也会自动创建它
按dom规范,table 必须具有 <tbody>
,因此table中未使用<tbody>
形成dom时会自动添加。
其它 节点:
注释不会以任何方式影响视觉表示,但是必须遵循一条规则 —— 如果html中有东西,那么它必须在dom树中。
html中所有内容都是dom的一部分,
注释是一个节点甚至<!doctype...>
也是一个节
dom总有
所有对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
parentnode
、nextsibling
、previoussibling
、childnodes
等(只能读取 getter);文本节点 text
,元素节点element
,注释节点comment
都继承自nodenextelementsibling
、children
、getelement*
、queryselector
等等,浏览器不仅支持html,还支持 xml、svg等,分别对应的基类 htmlelement
、xmlelement
、svgelement
用于存储节点的包装器,不会再浏览器中展示,需要通过插值方法才能展示包装器里面的内容
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" 在火狐中为 "" 因此访问确切属性值须使用完整属性名
<!doctype html>
上述的属性可能会有所不同,这不是一个 javascript 的问题,但会影响到 javascript。pagexoffset/pageyoffset: 获取可视窗口移动的距离 无法设值
可通过 window.scrollby, window.scrollto, elem.scrollintoview来滚动窗口
scrollby(x,y)
:滚动页面至相对于现在位置的(x,y)位置scrollto(x,y)
:滚动到页面相对于文档左上方的(x,y),位置,类似于 scrolltop/scrollleft
elem.scrollintoview(truly)
:如果 truly 为真则使 当前元素 滚动至窗口顶部,元素顶部与窗口顶部对齐,如果truly 为false,则当前元素底部与窗口底部对齐。如果禁止窗口滚动可使 样式属性 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 } }
如对本文有疑问, 点击进行留言回复!!
Android 入门第七讲01-数据存储(数据存储概述,文件存储(raw和asserts目录读写,data/data/包名目录读写,sdcard目录读写),SharedPreferences读写)
vue-axios系列:axios拦截器,配置请求头,配置请求参数
Vuejs 针对 安卓低版本 、ios9.x 不兼容 ES6语法导致失效解决方法
网友评论