JavaScript四部分
内容三十四,获取元素
通过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()
})