JS七种数据类型
number,string,bool,symbol,null,undefined,object
JS五个falsy值
0,NaN,'',null,undefined
DOM定义
含义：Document Object Model 文档对象模型；浏览器往window上加一个document，JS就可以操作网页
获取元素（element），也叫标签(tag)
- window.idXXX 或者 idXXX
- document.getElementById('idXXX')
- document.getElementsByTagName('div')[0]
- document.getElementsByClassName('red')[0]
- document.querySelector('#idXXX')
- document.querySelectorAll('#idXXX')[0]
- document.querySelectorAll('.red')[0]
获取特定元素
- 获取html元素：document.documentElement
- 获取head元素：document.head
- 获取body元素：document.body
- 获取窗口(窗口不是元素)：window
- 获取所有元素：document.all
节点Node
包括(常用):
1表示元素Element，也叫标签Tag
3表示文本
8表示注释Coment
9表示文档Dcument
11表示文档片段DocumentFragment
cosole.dir(div)看原型链
第一层原型：HTMLDIVElement.prototype（这里包含div所有共有属性）
第二层原型：HTMLElement.prototype(这里面所有HTML标签共有属性)
第三层原型：Element.prototype(这里所有XML,HTML标签共有属性，不会以浏览器只能展示HTML)
第四场原型：Node.prototype(这里面所有节点共有属性，节点包括XML标签文本注释，HTML标签文本注释等)
第五层原型：EventTarget.prototype(里面最重要函数是addEventListener)
第六层原型：Object.prototype
节点的增加
- 创建一个标签节点
1. let div1=document.createElement('div')
2. document.createElement('style')
3. document.creatElement('script')
4. document.createElement('li')
- 创建一个文本节点
text1=document.createTextNode('你好')
- 标签里面插入文本
div1.appendChild(text1)
div1.innerText='你好' 或 div1.textContent='你好'
- 插入页面
创建标签默认处于JS线程中
必须把它插到head或者body立，才会生效
document.body.appendChild(div1)
在已有页面中元素.appendChild(div)
节点的删除
两种方法：
旧方法：parentNode.childChild(节点)
新方法：childNode.remove() //IE不支持
节点的更改
- 改class: div.className='red blue'
- 改class: div.classList.add('red')
- 改style: div.style='width:100px;color:blue'
- 改style的一部分: div.style.width='200px'
- 大小写：div.style.backgroundColor='white'
- 改data-*属性：div.dataset.x='frank'
读标准属性
- div.classList/a.href
- div.getAttribut('class')/a.getAttribut('href')
两种都可以用，但是值可能会稍微有点不同
改事件处理函数
div.onclick默认null
默认点击，div不会有任何事情发生
但如果把div.onclick改成一个函数fn
那么点击div的时候，浏览器就会调用这个函数
并且是这样被调用fn.call(div.event)
div会被当成this
event则包含了点击事件的所有信息，如坐标
div.addEventListener是div.onclick的升级版（多个函数）
节点改内容
1.改文本内容
div.innerText='xxx'
div.textContent='xxx'
2.改HTML内容
div.innerHTML='<strong>重要内容</strong>'
3.改标签
div.innerHTML='' //先清空
div.appendChild(div2) //再加内容
4.改爸爸
newParent.appendChild(div)
节点的查询
查爸爸
node.parentNode 或 node.parentElement
查爷爷
node.parentNode.parentNode
查子代
node.childNodes 或 node.children
查兄弟姐妹
node.parentNode.childNodes //排除自己
node.parentNode.children //排除自己
查老大
node.firstChild 或 node.children[0]
查老幺
node.lastChild
查看上一个哥哥/姐姐
node.previousSibling
查看下一个弟弟/妹妹(注意这里可能查到文本节点)
node.nextSibling
遍历一个div里面所有的元素
travel = (node.fn)=>{
fn(node)
if(node.children){
for(let i=0;i<node.children.length;i++){
travel(node.children[1],fn)
}
}
}
travel(div1,(node)=>console.log(node))
跨线程操作
属性同步
- 标准属性
- 对div1的标准属性修改，会被浏览器同步到页面中,比如id,className,title等
- data-*属性 (启示：如果有自定义属性，想被同步到页面中，请使用data-作为前缀)
- 非标准属性
对非标准的属性的修改，则只会停留在js线程中，不会同步到html里,比如xxx=''
Property 与 Attribute
property属性：JS线程中div1的所有属性，叫做div1的property
Attribut属性：渲染引擎中div1对应标签的属性，叫做attribute
区别：大部分时候，两者的值是相等的；但如果不是标准属性，那么它们一开始时相等，但attribute只支持字符串，而property支持字符串，布尔等类型
回顾
1.假设页面中有如下元素
<div id="test" class="red">demo</div>
获取该 div 元素的代码:
- document.getElementById('test')
- document.getElementsByClassName('red')[0]
- window.test
- document.querySelector('#test')
- document.querySelectorAll('#test')[0]
2.关于节点(Node) 、元素(Element)、标签(Tag) 的关系描述:
- 节点包括元素和文本等
- 元素就是标签，叫法不同而已
3.要删除一个节点 x
1) x.parentNode.removeChild(x)
2) x.remove()
4.获取 x 元素的 class 属性
1) x.className
2) x.getAttribute('class')
5.将 div 的宽度设置为 100 像素
div.style.width = '100px'
6.关于以下代码，下列说法正确
div.onclick = function(){
console.log(this)
console.log(arguments[0])
}
- 当用户点击该 div 时，该代码中的 this 是 div
- 当用户点击该 div 时，arguments[0] 是事件相关的信息组成的对象
