JS75-107

初识DOM

非常规：

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

常规：上图byId或者

var item ocument.getElementsByClassName("newsitem")

伪数组：

//getElementsByClassName
var items = document.getElementsByClassName("newsitem")
console.log(items)//伪数组
// items[0].innerHTML = "news-111111"
for(var i=0;i<items.length;i++){
items[i].innerHTML = "news-"+i
// Set => Array.from
var newitems = Array.from(items)
console.log(newitems.filter)

//querySelector 返回一个对象，（第一个遇到的）
var item = document.querySelector("ul li")
console.log(item)

//querySelectorAll 返回多个对象
var items = document.querySelectorAll("ul li")
console.log(items)

操作元素属性

属性分为原生属性和自定义属性

<div id="box" kerwin="hello">hello </div>
<input type="text" jvalue="hello" id="username">
<script>
/*
元素自带（原生）属性
自定义属性
*/
box.innerHTML ="22222"
username.type = "password"
</script>

自定义属性设置需要：setAttribute getAttibute removeAttibute

box.setAttribute("tiechui","222222")
console.log(box.getAttribute("tiechui"))
box.removeAttribute("tiechui")
box.removeAttribute("kerwin")
var oitems = document.getElementsByTagName("li")
for(var i=0;i<oitems.length;i++)
)E
oitems[i].setAttribute("kerwinindex",i)

密码可视化

<script>
var passInput = document.getElementById("password")
var eyeBtn = document.querySelector("#eyebtn")
eyeBtn.onclick = function(){
console.log(passInput.type)
"password"){
"text"
(passInput.type
passInput.type
}else{
"password"
passInput.type
}
</script>

全选全不选

首先在body中创建一个表单和几个列表
通过query获取值 （true或者false）
将表单的值赋值给列表

<script>
var oAll = document.querySelector("#all")
var oitems = document.querySelectorAll(".shop input")
// console.log(oitems)
oAll.onclick = function(){
// console.log(oAll.checked)
for(var i=0;i<oitems.length;i++){
oitems[i].checked = oAll.checked
}
}
</script>

实现列表全选时全选按钮自动勾选

for(var i=0;i<oitems.length;i++){
oitems[i].onclick = handler
}
function handler()E
var count = O
for(var i=0;i<oitems.length;i++){
if(oitems[i].checked) count++
if(count===oitems.length){
oAll.checked = true
}else{
oAll.checked = false
}
}

操作元素文本内容

// innerHTML
// innerText
// value
console.log(box.innerHTML)
// box.innerHTML = "11111111"
console.log(box.innerText)//获取识有文本
box.innerText="<h1>1111111</h1>"//不解析 html

value既可以赋值也可以读取（只能用于表单标签）

操作元素样式

<div id="box" style="width: 100px;color:
yellow;"background-color：black;>11111</div>
<script>
//只能行内样式方法style
console.log(box.style.width)
console.log(box.style["background-color"])  
console.log(box.style.backgroundcolor)//驼峰  如果不用这两种写法的话，会使得color被认为是变量名

//内部样式，外部样式，行内getcomputedstyle获取，不能赋值写样
式。

var res = getComputedStyle(box)

var res = getComputedStyle(box).height
console.log(res)

操控class：3种方法
法一

// .className
// console.log(box.className)
// box.className = "item item2"
"item item2 item2 item3"
box.className

法二

console.log(box.classList)
// box.classList.add("item2")
box.classList.remove("item2")

法三

//切换 toggle   有就加，没有就删
btn.onclick =function(){
box.classList.toggle("item")

选项卡案例感悟

非常典型的错误写法

因为是先用for循环绑定的事件，for循环是一瞬间的事，所以之后点击事件一定会返回i的最后的值。
正确写法：

var oHeaderItems = document.querySelectorAll(".header li")
var oBoxItems = document.querySelectorAll(".box li")
for(var i=0; i<oHeaderItems.length; i++){
//自定义属性
oHeaderItems[i].dataset.index =i
oHeaderItems[i].onclick = function(){
console.log(this.dataset.index)
//获取自身上的属性
}   

通过this来获取index

DOM节点

获取节点的方法

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

//firstChild firstElementChild
console.log(box.firstChild)
console.log(box.firstElementChild)
//lastChild lastElementChild
console.log(box.lastChild)
console.log(box.lastElementChild)

// previousSibling previousElementSibling
console.log(box.previousSibling)
console.log(box.previou;Sibling)

// nextSibling nextElementSibling
console.log(box.nextSibling)
console.log(box.nextElementSibling)

节点操作

<div id="box">
<div id="child">11111111</div>
</div>
var odiv = document.createElement("div")
“我是新创建的节点”
odiv.innerHTML
console.log(odiv)
box.appendChild(odiv)

其中appendChild为在 其中插入一个

//插入节点
// box.appendChild(odiv)
//insertBefore(要插入的节点，谁的前面）
box.inserBefore(odiv,child)

//删除节点(节点对象）
box.removeChild(child)
box.remove(）//删除自己以及后代

替换节点replacechild(新的节点，老的节点)
var odiv2= document.createElement("div")
odiv2.innerHTML = "2222222"
box.replaceChild(odiv2,child)

var oCloneBox = box.cloneNode(true)
console.log(oCloneBox)
document.body.appendChild(oCloneBox)

动态删除案例感想

var arr = ["111","2222","333"]
for(var i=0;i<arr.length;i++){
var oli = document.createElement("li")
oli.innerHTML = arr[i]
var obutton = document.createElement("button")
="delete"
obutton.innerHTML
obutton.onclick = handler
oli.appendChild(obutton)
list.appendChild(oli)



function handler(){
console.log(this.parentNode)
this.parentNode.remove()   //动态删除
}

节点属性

获取元素尺寸

注意：

1.单位数字
2. box-sizing (border+padding+content)
3.display:none 拿不到

获取元素偏移量

console.log(child.offsetLeft,child.offsetTop)
console.log(myparent.offsetLeft,myparent.offsetTop)
console.log(box.offsetLeft,box.offsetTop)
参考点：是定位父级
如果父级元素都没有定位，偏移量相对于body
*/

获取可视窗口的尺寸

console.log("宽度",document.documentElement.clientwidth)
console.log("高度",document.documentElement.clientHeight)

初识事件

事件解绑

//事件解绑-dom0节点.οnclick=null
btn.onclick
function(){
console.log("谢谢惠顾"）
// console.log(this)
this.onclick=null
}

//事件解绑dom2
function handler(){
console.log("谢谢惠顾"）
this.removeEventListener("click",handler)
}
//btn.addEventListener("click",handler)

低版本ie：
function handler(){
console.1og("谢谢惠顾“)
btn.detachEvent("onclick",handler)
“
btn.attachEvent("onclick",handler)

事件类型

事件对象

username.onkeyup = function(evt){
console.log(evt.keyCode)
if(evt.keyCode===13){
console.log("创建节点")
3
box.onclick
function(evt){
console.log(evt)

鼠标事件

box.onclick =function(evt){
console.log(evt.clientX,evt.clientY)
console.log(evt.pagex,evt.pageY)
}
//clientxclientY距离浏览器可视窗口的左上角的坐标值
//pagex pageY 距离页面文档流的左上角的坐标值
//offsetx offsetY 距离触发元素的左上角的坐标值

鼠标跟随

1.鼠标移入显示

但是会出现抽风的现象，因为会碰到p标签，而相对于p标签距离就会变为0
所以：

3.最后控制移动，通过获取与父盒子的距离

鼠标拖拽

基础拖拽：

box.onmousedown =function(){
console.log("down")
document.onmousemove = function (evt) E
// console.log("move")
var x = evt.clientX -box.offsetWidth/2
var y =evt.clientY-box.offsetHeight/2
box.style.left=x
"px"
box.style.top = y + "px"
box.onmouseup = function () {
console.log("up")
document.onmousemove = null
}

控制不超出页面边框：

if(y<=0) y=0
box.style.left=x + "px"
box.style.top= y + "px"

DOM事件流

阻止事件传播

function handler(evt){
console.log(this.parentNode)
this.parentNode.remove()
//阻止事件传播 （上文本来有个跳转，通过这个取消跳转）
evt.stopPropagation
（）
}

阻止默认行为

// domo return false 阻止默认行为
// document.oncontextmenu = function(){
console.log("右键单击.自定义右键菜单")
//
return false
//
//}
//dom2 evt.preventDefault()
//dom2 ie evt.returnValue = false
document.addEventListener("contextmenu",function(evt){
console.log("右键单击.自定义右键菜单")
// return false
evt.preventDefault()
｝）

自定义菜单笔记

document.addEventListener("contextmenu",function(evt)
evt.preventDefault()
list.style.display = "block"
var × = evt.clientX
var y = evt.clientY
if(x >= document.documentElement.clientWidth-list.
offsetWidth)
x = document.documentElement.clientWidth-list.offsetWidth
list.style.left =x + "px"
list.style.top = y + "px"
})

事件委托

获取属性