1.网页是什么
网页其实是一棵树,有很多节点组成树的形状的对象.
image.png
image.png
2.DOM概述
DOM 是 JavaScript 操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个 JavaScript 对象，从而可以用脚本进行各种操作（比如增删内容）。
3.如何获取元素
3.1获取元素的几种方法
---第一种方法---
window.idxxx
---第二种方法---
idxxx
---第三种方法---
document.getElementByid('idxxx')
document.getElementByTagName('xxx')
document.getElementsByTagName('xxx')[0]//有很多获取其中某一个需要加s之后在加标签,确定是第几个
document.getElementByClassName('xxx')
document.getElementsByClassName('xxx')[0]
---第四种方法---(用的较多)
document.querySelector('#idXxx')
document.querySelectorAll('red')[0]
3.2获取特定的元素
//获取html元素
document.documentElement
document.documentElement.tagName(类型)//'HTML'
//获取head元素
document.head
//获取body元素
document.body
//获取所有的元素
document.all(第六个falsy值)
//获取窗口(不是元素)
window
4.获取到的元素是什么(显然是对象)
我们通过抓取元素来看下对象的原型,得知抓取到的元素一共有六层原型链,最后一层为object我们可以通过图片来展示里面的原型链.
image.png
5.节点的增删该查
5.1节点是什么,跟元素有什么区别
DOM 的最小组成单位叫做节点（node）,用 Node.nodeType 可以查看节点的类型.节点有七种分类:
1.Document：整个文档树的顶层节点
2.DocumentType：doctype标签（比如<!DOCTYPE html>）
3.Element：网页的各种HTML标签（比如<body>、<a>等）
4.Attr：网页元素的属性（比如class="right"）
5.Text：标签之间或标签包含的文本
6.Comment：注释
7.DocumentFragment：文档的片段
5.2创建节点
//创建标签节点
let div1=document.createElement('div')
document.createElement('div')
document.createElement('li')
document.createElement('style')
document.createElement('script')
//创建文本节点
text1=document.createTextNode('你好')
//标签里面插入文本
div1.appendChild(text1)
div1.innerText='你好'或者div1.textContent='你好'
不能使用
div1.appendChild('你好')
5.2.1创造的元素插入网页
我们创建的元素默认是在JS的线程中,所以我们需要放到head或者body里面.
document.body.appendChild(div)
已经在页面中的元素.appendChild(div)
5.3删除节点
旧方法:parentNode.childChild(childNode)
新方法:childChild.remove()
5.4修改节点
//改写class属性
div.className='blue'
如果在增加一个红色的属性
div.className+=' red'或者新语法为div.classList.add('red')
//改写style属性
div.style='width:100px,color:blue'
//如果碰到有中划线,中划线去掉后面的第一个拼音字母变为大写
div.style.background-color=div.style.backgroundColor
//改写文本内容
div.innerText='xxx'
//改爸爸
newParent.appendChild(div)//直接从原来的地方消失
5.4.1读标准属性节点
//第一种方法
div.classList/a.href
//第二种方法
div.getAttribute('class')/a.getAttribute('href')
5.4.2改事件处理函数(onclick)
image.png
如图例子test.onclick默认是null,当把其改为函数的时候会调用这个函数,test相当于this,而event相当于时间,包含坐标这些.
5.5查节点
//查爸爸
node.parentNode或者node.parentElement
//查爷爷
node.parentNode.parentNode
//查子代
node.children
//查兄弟姐妹
node.parentNode.children
//查看老大
node.firstChild
//查看老幺
node.lastChild
//查看上一个哥哥/姐姐
node.previousSibling
//查看下一个弟弟/妹妹
node.nextSibling
5.5.1遍历所有的节点
//遍历一个div里面所有的元素
travel = (node, fn) => {
fn(node)
if(node.children){
for(let i=0;i<node.children.length;i++){
travel(node.children[i], fn)
}
}
}
travel(div1, (node) => console.log(node))
6.js是跨线程操作的
6.1js跨线程操作的理解
JS引擎不能操作页面,只能操作js
渲染引擎不能操作js,只能操作页面
所有通过流浪器来跨线程操作.
image.png
6.2属性同步
如果是修改的标准属性,会被同步到网页中,如果不是标准的属性不会被同步到网页中.
image.png
本文为本人的原创文章，著作权归本人和饥人谷所有，转载务必注明来源.
网友评论