JS第四期

最新推荐文章于 2024-07-26 11:41:15 发布

pe11223

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量372

点赞数

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/pe11223/article/details/128638524

版权

DOM

总结

DOM (Document object Mode1): 文档对象模型其实就是操作 htm1 中的标签的一些能力我们可以操作哪些内容
1.获取一个元素
2.移除一个元素
3.创建一个元素
4.向页面里面添加一个元素
5.给元素绑定一些事件
6.获取元素的属性
7.给元素添加一些 css 样式
……
DOM 的核心对象就是 docuemnt 对象
document 对象是浏览器内置的一个对象，里面存储着专门用来操作元素的各种方法
DOM :页面中的标签，我们通过JS获取到以后，就把这个对象叫做 DOM 对象

获取元素

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

getElementByld

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

<body>
    <div id="box"></div>
    <script>
        var box = document.getElementById('box')
        console.log(box)
    </script>
</body>

获取到的就是页面中的那个id为box的div标签
我们可以获取非常规

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

如果我们有如下

<ul>
    <li class="new">111</li>
    <li class="new">111</li>
    <li class="new">111</li>
    <li class="new">111</li>
    <li class="new">111</li>
</ul>

那么我们怎么获取li节点呢

var items = document.getElementsByClassName("new")
console.log(items)

返回的是伪数组

操作元素属性

<input type="text" value="hello" id="username">

<input type="checkbox" checked id="rember">
<script>
    username.type = "password"

    rember.type = false
</script>

如上就是对输入框改变成密码框
和
复选框的已勾选状态的取消为例子
来展示了原生属性的改变

操作文本内容

<div id="box">
    hello
    <div>kew</div>
</div>
<script>
    console.log(box.innerHTML)
    box.innerHTML = "123"
</script>

如上就解决了文本读取和更改操作

innerHTML
获取节点内所有内容包括标签

innerText
获取只有文本

操作元素样式

<style>
    #box{
        height: 100px;
        background-color: orange;
    }
</style>

<div id="box" style="width: 100px;color: black;">234</div>

<script>
    //行内样式方法 style    --读写
    console.log(box.style.width)
    //如果行内有background-color属性则要
    console.log(box.style["background-color"])
    console.log(box.style.backgroundColor)

    box.style.width = "200px"
    box.style["background-color"] = "red"
    box.style.backgroundColor = "red"
    
    //内部样式、外部样式  getComputedStyle  只能获取，不能赋值写样式
    var obox = document.getElementById("box")
    var res = getComputedStyle(obox)
    var res = getComputedStyle(obox).height
    var res = getComputedStyle(obox)["background-color"]
    var res = getComputedStyle(obox).backgroundColor
    console.log
</script>

操作元素类名

<style>
    .item{
        width: 200px;
        height: 200px;
        background-color: beige;
        color: aqua;
        border-radius: 20%;
    }
</style>

<div id="box" class="item item1 item2"></div>
<script>
    //.className

    console.log(box.className) //读取
    box.className = "item item2"  //赋值

</script>

DOM节点

总结

1.DOM 的节点我们一般分为常用的三大类元素节点/文本节点/属性节点
2.什么是分类，比如我们在获取元素的时候，通过各种方法获取到的我们叫做元素节点(标签节点)
3.比如我们标签里面写的文字，那么就是文本节点
4.写在每一个标签上的属性，就是属性节点

元素节点
我们通过 getElementBy…获取到的都是元素节点
属性节点
我们通过 getAttribute 获取的就是元素的属性节点
文本节点
我们通过 innerText 获取到的就是元素的文本节点

html

获取节点方式

<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum obcaecati animi inventore doloribus temporibus architecto ab ipsa, fuga cupiditate voluptatum labore maiores nesciunt omnis consequatur in asperiores rerum voluptatem non.</div>
<div id="box">
    11
    <p>22</p>
    <!--shu-->
</div>
<div>dd</div>
<script>
    //childNodes属性和children属性
    console.log(box.childNodes) //所有节点
    confirm.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.previousElementSibling)

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

    //parentNode和parentElement
    console.log(box.parentNode)
    console.log(box.parentElement)
</script>

节点操作

1.我们所说的操作无非就是增删改查(CRUD)
2.创建一个节点(因为向页面中增加之前，我们需要先创建一个节点出来)
3.向页面中增加一个节点
4.删除页面中的某一个节点
5.修改页面中的某一个节点
6.获取页面中的某一个节点

创建一个节点

createElement:用于创建一个元素节点

// 创建一个 div 元素节点
var oDiv  document.createElement('div')
console.log(oDiv) // <div></div>

创建出来的就是一个可以使用的 div 元素

插入节点

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

删除节点（节点对象）

box.removeChild(child)

box.remove() //删除自己以及后代

替换节点
replaceChild(新的节点,老的节点)

var ovidx = document.createElement("div")
odivx.innerHTML = "222"
box.replaceChild(odivx,child)

克隆
cloneNode()
false 不克隆后代
true 克隆后代

var oCloneBox = box.cloneNode()

console.log(oCloneBox)

节点属性

我们已经知道节点会分成很多种，而且我们也能获取到各种不同的节点

获取元素尺寸

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

offsetWith和offserHeight

offsetwidth : 获取的是元素内容+ padding + border 的宽度
offsetHeight : 获取的是元素内容+ padding + border 的高度

clientWidth 和 clientHeight

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

获取元素偏移量

<div id="box">
    <div id="mcparent">
        <div id="child"></div>
    </div>
</div>
<script>
    console.log(child.offsetLeft,child.offsetTop)
    console.log(myparent.offsetLeft,myparent.offsetTop)
    console.log(box.offsetLeft,box.offsetTop)

    /*
        参考点：定位父级
        如果父级元素没有定位，偏移量相对于body
    */
</script>

获取可视窗口尺寸

console.log(document.documentElement.clientWidth)
console.log(document.documentElement.clientHeight)

事件

总结

一个事件由什么东西组成
1.触发谁的事件:事件源
2.触发什么事件:事件类型
3.触发以后做什么:事件处理函数

var oDiv = document.queryselector('div')
oDiv.onclick  function() {}
// 谁来触发事件 > oDiv => 这个事件的事件源就是 oDiv
// 触发什么事件 > onclick => 这个事件类型就是 click
// 触发之后做什么 > function ()  {}==> 这个事件的处理函数

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

var odiv = document.querySelector('div')

odiv.onclick = function(){
    console.log('你点击了div')
}

当我们点击div 的时候，就会执行事件处理函数内部的代码
每点击一次，就会执行一次事件处理函数

事件解绑

btn.onclick = function(){
	console.log("Thank")

	this.onclick = null
}

二、

function handler(){
    console.log("Thank")

    this.removeEventListener("click",handler)
}
btn.addEventListener("click",handler)

事件类型

鼠标事件

click
dblclick

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

contextmenu 右键单击

btn.contextmenu = function(){
	console.log("右键单击，自定义右键菜单")
}

mousedown
mousemove
mouseup

btn.onmousedown = function(){
	console.log("鼠标按下")
}

其他的可进行类比
这里就不赘述了

鼠标移入移出
mouseover
mouseout
移入移除
mouseenter
mouseleave

键盘按下

<input type="text" id="username">
<script>
    username.onkeydown = function(){
        console.log("按下键盘")
    }
</script>

获取失去焦点
focus
blur

change 获取焦点，失去焦点的对比里面内容不一样才会触发

提交重置
submit
reset

事件对象

总结

什么是事件对象?
就是当你触发了一个事件以后，对该事件的一些描述信息
例如:
1.你触发一个点击事件的时候，你点在哪个位置了，坐标是多少。
2.你触发一个键盘事件的时候，你按的是哪个按钮
……
每一个事件都会有一个对应的对象来描述这些信息，我们就把这个对象叫做事件对象
浏览器给了我们一个黑盒子，叫window.event，就是对事件信息的所有描述
1.比如点击事件
2.你点在了 0，0位置，那么你得到的这个事件对象里面对应的就会有这个点位的属性
3.你点在了 10，10位置，那么你得到的这个事件对象里面对应的就会有这个点位的属性
……

oDiv.onclick = function(){console.log(window,event,x轴坐标点信息)
console.log(window,event,Y轴坐标点信息)
}

鼠标事件

clientX
clientY
距离浏览器可视窗口的左上角的坐标值
client
pageX
pageY
相对于页面文档流左上角的坐标值
page

offsetX
offsetY
距离触发元素左上角坐标值
offset

鼠标拖拽

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
}

事件的传播

在这里插入图片描述

当元素触发一个事件的时候，其父元索也会触发相同的事件，父元索的父元素也会触发相同的事件
就像上面的图片一样
点击在红色盒子上的时候，会触发红色盒子的点击事件
也是点击在了粉色的盒子上，也会触发粉色盒子的点击事件
也是点击在了 body 上，也会触发 body 的点击事件
也是点击在了 html上，也会触发 html 的点击事件

标准的dom事件流
捕获：window==>documentn=>body=>outer
目标：inner
冒泡:outer=>body=>document=>window

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

阻止事件传播

function handler(evt){
	console.log(this.parentNode)
	this.parentNode.remove()

	evt.stopPropagation() 
	//IE
	evt.cancleBubble = true
	
}

阻止默认行为

dom0 return false 阻止默认行为

document.oncontextmenu = function(){
    console.log("右键单击，自定义右键菜单")
    return false
}

dom2 evt.preventDefault()

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

pe11223

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS第四期

JS学习第四期
复制链接

扫一扫