JS学习75-107！

一、DOM

可以改变li数量

核心对象：docuement对象

1.获取一个元素p77

特殊

console.log(document.docunentElement)//rem
console.log(document.docunent.head)//获取head
console.log(document.docunent.body)

常规
getElementById

console.log(document.docunent.getElementById("box")//box为其名

getElementByClassName

var items = console.log(document.docunent.getElementByClassName("newsitem")
console.log(items)//伪数组
for(var i=0;i<items.length;i++){
items[i].innerHTML = "news-"+i
}

(或者转换成真数组orgetElementByName与上面同理

querySelector

低版本浏览器不兼容

var item = document.querySelector(".newsitem")
console.log(item)

ps：只会返回一个对象，或遇到的第一个

querySelectorAll

var item = document.querySelectorAll("ul li.newsitem")
console.log(item)

2.操作元素属性

元素自带属性
（可以后期补票

<input type="checkbox" checked id="rember">
    <script>
      rember.checked = false
    </script>

自定义属性

 box.setAttribute("chris","22222")//定义
 console.log(box.getAttribute("cheis"))//获取
 box.rremoveAttribute("chris")//删除

区分二者
自定义：data-xxx .dataset

3.操作元素文本内容

innerxxx

console.log(box.innerHTMl)//获取完整

console.log(box.innerText)//只获取文本获取

box.innerText = "<h1>111<h1>"//不解析

value
下拉列表
可以通过value获取表单的value

console.log(select.value)

4.操作元素样式（p83

获取元素样式：

console.log(box.style.width)

console.log(box.style["width"])

console.log(box.style.width)

改变元素样式

box.style.width = "200px"

box.style["width"] = "200px"

访问内部，外部，行内样式（但不能赋值）

var res = getComputed Style(box).height
console.log(res)

5.操作元素类名（p84

.classname

console.log(box.className)

box.className = " item3"//添加

.classlist

console.log(box.classList)

box.classList.add("item")//可自动去重

.toggle 切换

二、DOM节点p87(面试考题

节点==>标签
元素节点
通过getElementBy...获取
属性节点
通过getAtteribute获取
文本节点
通过innerText获取





注意回车符&换行也算一个节点

获取节点方式

console.log(box.chlidNodes)//所有节点

console.log(box.children)//所有元素

console.log(box.firstChild）//第一个
console.log(box.laststChild）//最后一个
console.log(box.firstElementChild)
console.log(box.laststElementChild)

console.log(box.previousSibling)
console.log(box.previousnextSibling)
console.log(box.previousElementSibling)

节点操作（p89

增删改查（CRUD）

1.创建节点

var odiv = document,createElement("div")
       odiv.innerHTML = "我是新创建的节点"
       console.log(odiv)

2.插入节点

box.appendChild(odiv)

然后可以

或者

box.insertBefore(odiv,child)

3.删除节点

box.removeChild(chlid)

或者

box,remove()//删除父节点

4.替换节点

box.replaceChild(odiv,child)

5.克隆节点

var oCloneBox = box.cloneNode(true/false)//false不克隆后代反之克隆

然后

oCloneBox.id = "box2"
document.body.appendChild(oCloneBox)

节点属性p91（面试考点

获取元素尺寸

console.log(box.offsetWidth,box.offsetHeight)

offsetWidth和offsetHeight

• offsetWidth:获取的是元素内容+padding+border的宽度
• offsetHeight：获取到是元素内容+padding+border的高度

clientWiidth和clientHeight

• clientWiidth:元素内容+padding的宽度
• clientHeight:元素内容+padding的高度

ps:获取的尺寸没有单位，
当元素不占位置的时候取得0,
box-sizing会对其有影响，
display：none拿不到；

获取元素偏移量

offset

console.log(child.offsetLeft,child.offsetTop)

• 参考点：有定位的父节点，如果没有定位，偏移量相对与body

client

border的宽度和厚度

console.log(child.clientLeft,child.clientTop)

获取可视窗口的尺寸

无滚动条的尺寸

console.log(document.documentElement.clientWidth)//宽度

console.log(document.documentElement.clientHeignt)//高度

四、事件p96

• 触发谁的事件：事件源
• 触发什么事件：事件类型
• 触发以后：事件处理函数

dom0类型—（后面会覆盖前面的

var oDiv = document.querySelector
('div')
oDiv.onclick = function(){
  console.log('你点击了div')}

dom2 类型----（绑定多个事件处理函数，按照顺序执行

box.onclick = funcktion(){
console.log("222")}
  box2.addEventListener('click",function9
  （){
  console.log("111")
  }）

事件解绑p97

dom0

this.onclick = null//在dom节点onclick = null

dom2
先定义好再使用

function handler(){
console.log("xxhg")
this.removeEventLisener("click",handler)
}
btn.addEventListener("click",handler)

四、事件类型p98

鼠标事件

单击

btn.onclick = function(){
 console.log("双击执行")}

双击

btn.onblclick = function(）{
console.log("双击执行”）}

mousedown（按下即触发

移入移出

移入移除（无法触发子节点

键盘事件

onkeydown 和onkeyup

浏览器事件

表单事件 需要和表单一起用

foucus 和blur

change只有改变了里面的内容才会触发change

submit和reset

移动端触摸屏

事件对象
事件对应对象来描述事件信息
浏览器给了文明一个黑盒子，叫window.event,就是对事件信息所有描述

DOM事件流
捕获：window=>document=>body=>outer
目标：inner
冒泡：outer=>body=>document=>window

默认情况：只在冒泡触发
按照dom2是加密绑定，并进行配置，才能看到回调函数被触发

阻止事件传播（停止冒泡现象）

 evt.stopPropageation()

阻止默认行为

dom0

return false

dom2

evt.preventDefauly()

事件委托

• 因为冒泡机制，点子元素的时候，也会同时触发父元素的相同事件==> 把子元素的事件委托给父元素

target

evt.target//target事件源头