JS教程四部分

内容三十四，获取元素

通过JS代码来获取页面中的标签
获取到以后就可以操作这些标签了

获取节点的方式

1，非常规

html，head，body是非常规的标签

console.log(document.documentElement)//html
console.log(document.head)//head
console.log(document.body)//body

2，id和class 的常规方法

（1）id方法

    <div id = "box"></div>
    <script>
     var obox = document.getElementById("box")
        obox.innerHTML = "111wfaawawg"
    </script>        

通过id方法可以实现在div标签内部添加JS样式

（2）class方法

    <ul>
        <li class="newsitem"></li>
        <li class="newsitem"></li>
        <li class="newsitem"></li>
        <li class="newsitem"></li>
        <li class="newsitem"></li>
    </ul>
    <script>
        var items = document.getElementsByClassName("newsitem")
        console.log(items.filter)
        for(var i = 0;i < items.length;i++){
            items[i].innerHTML = "news-"+i
        }
    </script>

其中， console.log(items.filter)是伪数组
也可以将这个伪数组转换成一个真数组，如下：

        var newsitem = Arry.from(items)

（3）通过标签

可以选择所有相同标签名的统一添加JS样式

        var items = document.getElementsByTagName("li")
        console.log(items)

（4）标签的赋值名

例如一般input框会存在赋值名

    <input name="user" type="text">
    <script>
        var item = document.getElementsByName("user")
        console.log(item[0])
        item[0].value = "xiaoming"
    </script>

因此我们可以通过赋值的name属性以添加JS属性

querySelector

返回一个对象

        var item = document.querySelector("ul li")
        console.log(item)
        item[0].value = "xiaoming"

就算遇到多个，只会返回遇到的第一个对象

querySelectorAll

与上面相同，会返回遇到的所有对象

操作元素属性

操作原生属性

例如，使用JS改变img标签的属性

    <img src="" alt="" id="photo" >
    <script>
        photo.src = "./京东/素材/cpu图标.webp"
    </script>

自定义属性

创建自定义属性
方法一：

    <script>
            box.setAttribute("tiechui","2222")
            console.log(box.getAttribute("tiechui"))
    </script>

方法二：

setAttribute.tiechui='2022'

操作元素文本内容

innerHTML

    <div id="box">
        hello world
        <div>xiaoming</div>
    </div>
    <input type="text" id="username" value="hello">
    <script>
        console.log(box.innerHTML)
        box.innerHTML = "<h1>11111</h1>"
        </script>

innerHTML会改变页面的内容

innerText

也可以改变页面，但是获取的只有文本

        console.log(box.innerText)
        box.innerText = "<h1>11111</h1>"

value

        console.log(box.value)
        username.value = "2222"

value属性可以改变例如输入框的value值
也可以改变下拉列表等其他的value值

操作元素样式

内部样式

    <div id="box" style="width: 100px;color: black;background-color: yellow;">1111 </div>
    <script>
        console.log(box.style.width)
        console.log(box.style["background-color"])
 		console.log(box.style.backgroundColor)
	</script>

一般可以通过console.log(box.style.width)获取元素的属性样式
但是例如background-color这样的复合型属性不能直接获取

1，["background-color"]在外部加上中括号

2，backgroundColor驼峰式的写法

外部样式

外部样式通过行内getComputedStyle获取，不能赋值写样式

    <script>
        var obox = document.getElementById("box")
        var res = getComputedStyle(obox).width
        console.log(res)
    </script>

操作元素类名

className属性

可以改变元素标签的classname属性

        box.className = "item item1 item2"

classList属性

	console.log(box.classList)

可以检查元素的class名

	box.className = "item item1 item2"
	console.log(box.classList)
	box.classList.add("item3")
	box.classList.remove("item1")

classList.add就是增加，classList.remove就是删除

toggle切换

        btn.onclick = function(){
            box.classList.toggle("item")
        }

此属性可以切换样式（同一元素）

DOM节点

DOM的节点一般分为三大类：元素节点/文本节点/属性节点
分类就是我们在获取元素的时候，通过各种方法获取到的我们叫做元素节点（标签节点）
例如标签上的文字就是文本节点
写在每一个标签上的属性就是属性节点

元素节点

通过getElementBy…获取到的都是元素节点

指的都是标签

属性节点

通过getAttribute获取的就是元素的属性节点

文本节点

通过innerText获取到的就是元素的文本节点

标签内的文本

Document

Document是页面最大的节点
但它不是一个元素节点，而是作为承载使用的节点，被称为根节点

html

是页面最大的元素节点，包含着页面所有的元素节点，被称为根元素节点

head/body/div/ul

都是普通的元素节点，只是所处的位置不一样，各自的功能不一样都可能是父元素，也都可能是子元素，被称为元素节点

文本内容

文本包含换行和空格，也是一个节点，被包含于大部分标签内

元素属性

也是一个元素身上的特性，用来描述和修饰这个元素

注释内容

是一段注释，也是一个节点，是单独书写的，不会显示在页面，被称为注释节点

获取节点的方式

        console.log(box.childNodes)
        console.log(box.children)

分别返回所有节点和所有元素

---

        console.log(box.firstChild)
        console.log(box.firstElementChild)

分别返回第一个节点和第一个元素节点

---

        console.log(box.lastChild)
    console.log(box.lastElementChild)

分别返回最后一个节点和最后元素节点

---

        console.log(box.previousSibling)
        console.log(box.previousElementsSibling)

上一个兄弟节点和上一个元素兄弟节点

---

        console.log(box.nextSibling)//下一个兄弟节点
        console.log(box.nextElementsSibling)//下一个元素兄弟节点

下一个兄弟节点和下一个元素兄弟节点

---

        console.log(box.parent)
        console.log(box.parentElement)

寻找父元素

---

        console.log(box.attributes[1])

返回所有的属性值

操作DOM节点

所谓操作就是增删改查

创建一个节点

这些元素原先不存在，是根据需求动态生成的

document.createElement('div')

---

向页面中增加一个节点

box.appendChild(child)

这是在某个节点的前面插入

box.inisertBefore(child)

这是在某个节点的后面插入

---

删除页面中的某一个节点

box.removeChild(child)

删除指定的节点对象

box.remove()

删除自己以及后代

---

替换页面中的某一个节点

box.replaceChild(odiv,child)

---

克隆页面中的某一个节点

box.cloneNode()

---

节点属性

节点有不同的种类，他们的属性也有区别

obox.nodetype

这是节点属性

标签节点—1
属性节点—2
文本节点—3
注释节点—8

获取元素尺寸

就是获取元素的“占地面积”

offsetWith和offsetHeight

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

clientWidth和clientHeight

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

注意

1，单位值是数字类型的

2，box-sizing不会有影响

3，display的值是无法拿到的

获取元素的偏移量

参考点：定位量的父级
如果父级没有定位，偏移量相对于body

获取可视窗口的尺寸

        console.log(document.documentElement.clientWidth)

此种方法计算是不含滚动条的宽度的

事件

事件的组成

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

事件的绑定

想要在点击div后面以后做什么事情，就把我们要做的事情写在事件处理函数里面
当我们点击div以后做什么事情，就把我们要做的事情写在事件处理函数里面

dom0类型

后面的会覆盖前面的

box.onclick = function(){
console.log("2022")
}

dom2

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

        box2.addEventListener("click",function(){console.log("2022")
            })
        box2.addEventListener("click",function(){console.log("3033")
            })
        box2.addEventListener("click",function(){console.log("4044")
            })

事件的解绑

dom0解绑

btn.onclick = function(){
console.log("谢谢惠顾")
this.onclick = null
}

dom2解绑

function handler(){
console.log("谢谢惠顾")
this。removeEventListener("click"，header)
}
btn.addEventListener("click",header)

事件类型

鼠标事件

click

btn.onclick = function(){
console.log("单机执行")
}

这是单机执行

btn.andblclick = function(){
console.log("双机执行")
}

这是双击执行

---

contextmenu 右键单击

document.contextmenu = function(){
console.log("右键单击")
}

---

mousedown–mousemove–mouseup

mousedown：鼠标按下
mousemove：鼠标移动
mouseup：鼠标抬起

---

移入与移出

移入与移出1

第一种会带其后代一起进行移入与移出

box.onmouseover = function(){
console.log("移入")
}

这是移入的样式

box.onmouseout = function(){
console.log("移入")
}

这是移出的样式

移入与移出2

这种移入与移出只会改变当前元素的属性，不会改变子代元素

box.onmouseenter = function(){
console.log("移入")
}

---

输入框

username.onkeydown = function(){
console.log("按下键盘","判断是不是回车键")
}

username.onkeyup = function(){
console.log("抬起键盘","判断是不是回车键")
}

表单事件

change：表单内容改变事件
input：表单内容输入事件
submit：表单提交事件
。。。

触摸事件

touchstart：触摸开始事件
touchend：触摸结束事件
touchmove：触摸移动事件

事件对象

事件对象就是触发事件以后，对该事件的一些描述信息
每一个事件都会有一个相应的对象来描述这些信息，被称为事件对象
浏览器给了我们一个黑盒子，叫做window.event,就是对事件信息的所有描述

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

鼠标事件

实现记录浏览器可视窗口的左上的坐标值
clientX与clientY

box.onclick = function(evt){
	console.log(evt.clientX,evt.clientY)
	console.log(evt.pageX,evt.pageY)
}

实现记录页面文档流的坐标值
pageX与pageY
距离触发元素的左上角的坐标值
offsetX与offsetY

DOM事件流

标准的DOM事件流
捕获：window→document→body→outer
目标：inner
冒泡：outer→body→document→window

默认情况：只在冒泡触发
按照dom2事件绑定，并进行配置，才能看到捕获的回调函数被触发

阻止事件流传播

function handler(evt){
evt.cancelBubble = true
this.parentNode.parentNode.removeChild(this.parentNode)}

阻止默认行为

document.addEventListener("contextmenu",function(evt){console.log("右键单击，自定义右键菜单")
evt.preventDefault()
})