JavaScript四

1.获取元素

通过js代码获取

getElementById：
通过标签的 id 名称来获取标签的
因为在一个页面中 id 是唯一的，所以获取到的就是一个元素
获取到的就是页面中的那个id为box的div 标签
getElementsByClassName

<script>
  	var box = document.getElementsByClassName('box')
  	console.log(box) 
    console.log(box[0]) 
</script>

getElementsByTagName

<script>
  	var box = document.getElementsByTagName('div')
  	console.log(box)
    console.log(box[0])
</script>

querySelector

<script>
    console.log(document.querySelector())
</script>

querySelectorAll

<script>
    console.log(document.querySelectorAll())
</script>

2.操作元素属性

元素自带（原生）属性
innerHTML获取元素HTML结构
innerText获取元素的文本

自定义属性getAttribute setAttribute removeAttribute
value下拉列表

3.操作元素文本内容

innerHTML获取元素HTML结构（不解析html）

console.log(div.innerHTML)

innerText获取元素文本（只有文本）

console.log(div.innerText)

4.操作元素样式

style：只能行内样式方法

<script>
    console.log(box.style.width)
    console.log(box.style["width"])
</script>

getComputedStyle：内部样式、外部样式

<script>
    var res = getComputed Style(box).height
</script>

5.操作元素类名

.className

<script>
    console.log(box.className)
</script>

.classList

<script>
    console.log(box.classList)
</script>

.toggle切换

<script>
    btn.onclick=function(){
        box.classList.toggle("item")
    }
</script>

6.DOM节点

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

7.获取节点方式

console.log(box.chlidNodes)//所有节点
console.log(box.children)//所有元素
console.log(box.firstChild）//第一个节点
console.log(box.firstElementChild)//第一个元素节点
console.log(box.laststChild）//最后一个节点
console.log(box.laststElementChild)//最后一个元素节点
console.log(box.nextSibling)//下一个兄弟节点
console.log(box.previousSibling)//上一个兄弟节点
console.log(box.previousnextSibling)//下一个元素节点
console.log(box.previousElementSibling)///上一个元素节点

8.操作节点

createElement用于创建一个元素节点
createTextNode用于创建一个文本节点
appendChild插入节点
insertBefore要插入的节点，谁的前面
removeChild删除节点
replaceChild替换节点

9.节点属性

10.获取元素尺寸

就是获取元素的占地面积
offsetWidth获取的是元素内容+padding+border的宽度
offsetHeight获取到是元素内容+padding+border的高度

clientWiidth获取的是元素内容+padding的宽度
clientHeight获取的是元素内容+padding的高度

注意
获取到的尺寸是没有单位的数字
当元素在页面中不占位置的时候，获取的是零

11.获取元素偏移量

offset

<script>
    console.log(child.offsetLeft,child.offsetTop)
</script>

参考点，是定位父级
如果父级元素都有定位，偏移量相对于body

client

<script>
    console.log(child.clientLeft,child.clientTop)
</script>

12.获取可视窗口的尺寸

<script>
    console.log("宽度",innerWidth)
    console.log("宽度",innerHeight)
    console.log("宽度",document.documentElement.clientWidth)
    console.log("高度",document.documentElement.clientHeignt)
</script>

13.事件

dom0类型–后面会覆盖前面的

<script>
   box.onclick=function(){
        box.log("22222")
    }
</script>

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

<script>
    box2.addEventListener('click",function(){
        console.log("22222")
    })
</script>

事件解绑：
dem0 dom节点.οnclick=null

<script>
   btn.onclick=function(){
        console.log("2")
        this.onclick=null
    }
</script>

dem2

<script>
    function handler(){
        console.log("2")
        this.removeEventLisener("click",handler)
     }
        btn.addEventListener('click",handler)
</script>

事件类型

事件对象

事件的传播

目标：点击元素
冒泡：目标开始处理函数
捕获：window开始处理函数

阻止事件传播

<script>
    evt.stopPropageation()
    //ie
    evt.cancelBubble=true
</script>

阻止默认行为

<script>
    return false
</script>

<script>
    evt.preventDefauly()
</script>

事件委托