JS DOM基础----

最新推荐文章于 2024-09-16 08:47:17 发布

哈哈成

最新推荐文章于 2024-09-16 08:47:17 发布

阅读量87

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_60838883/article/details/127910465

版权

Js DOM

DOM简介

文档类型（Document Object），W3C组织推荐的处理可扩展标记语言（指HTML或XML）的标准编程接口
作用：通过DOM接口可以改变网页的内容，结构，样式
DOM树：HTML DOM模型被结构化为对象树
- 文档：整个页面是一个文档，DOM中使用document表示
- 元素：页面中的所有标签都是元素，在DOM中使用element表示
- 节点：网页中的多有内容都是节点（标签，属性，文本，注释等），DOM中使用node表示

HTML DOM方法

概念：HTML DOM 方法是能够（在 HTML 元素上）执行的动作
HTML DOM 属性是能够设置或改变的 HTML 元素的值

操作元素

element.innerText:
- 从起始位置到终止位置的内容，去除html和空格换行符
- 不识别HTML标签，加入标签会被直接显示非标准
- 可读写
element.innerHTML
- 从起始位置到终止位置的全部内容，包括HTML标签，同时保留空格和换行符
- 识别HTML标签 w3c标准
- 可读写可以获取元素里的内容
操作元素修改表单属性
- value属性改变表单文字内容 input.value = ‘’
- type属性
- checked默认选择
- disabled 禁用
- selected

dom重点核心

创建：
- document.write
- innerHTML
- createElement
增加
- appendChild 可向节点的子节点列表的末尾添加新的字节点
- insertBefore insertBefore() 方法可在已有的子节点前插入一个新的子节点
- document.createElement(element)创建 HTML 元素
- document.removeChild(element)删除 HTML 元素
- document.appendChild(element)添加 HTML 元素
- document.replaceChild(element)替换 HTML 元素
- document.write(text)写入 HTML 输出流
删
- removeChild
改
- 修改元素的属性：src ，href ，title
- 修改普通元素内容：inner HTML，innerText
- 修改表单元素：value,type,disabled
- 修改元素样式：style，className
- 改变HTML元素的属性值 element.attribute = new value
- 改变HTML元素的属性值 element.setAttribute(attribute , value)
- 改变HTML元素的样式 element.style.property
查
- 获取DOM元素：API方法：
- getElementById()通过元素id来查找元素
- getElementGyTagName()通过标签名来查找元素
- getElementByClassName()通过类名来查找元素
- H5提供的新方法：querySelector，querySeletorAll
- 利用接待你操作元素：父（parentNode），子（children）,兄（previousElementSibling），（nextElementSibling）
属性操作
- setAttribute：设置dom的属性值
- getAttribute：得到dom的属性值
- removeAttribute：移除属性
- getAttributeNode：获取属性

事件操作

注册事件，采取事件源.事件类型 = 事件处理程序

鼠标事件	触发条件
onclick	点击触发
onmouseover	鼠标经过触发
onmousout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发
dbclick	鼠标双击

事件基础

简单理解：触发响应的一种机制
事件组成：事件源，事件类型，事件处理程序
- 事件源：事件被触发的对象谁被触发
- 事件类型：如何让触发，什么事件：如点击鼠标（onclick）
- 事件处理程序：函数赋值的方式完成如何完成

<button id = btn>dianji </button>
<script>
var btn = document.getElementByid('btn')
btn.onclick =function(){
alert('')
}
</script>

事件执行步骤

获取事件源
注册事件（绑定事件）

添加事件处理程序(采取函数赋值形式)

<div>123</div>
<script>
//获取事件源
var div = document.querySEelector('div')
//注册事件
div.onclick =  myFunction；
 //添加事件处理程序
function myFunction(){
    alert('123')
}
</script>

事件

低级事件：无条件触发例如鼠标按下按键事件的键盘按下
高级事件：有条件触发单价及双击按下弹起
注册事件
- 传统：on开头的事件注册事件的唯一性同一元素同一事件只能设置一个处理函数后边覆盖前边的
- 监听事件：addEventListener（type，listener，useCapture）可以添加多个事件处理程序
- type：事件类型
- listener：事件处理函数
- useCapture：
- ```
btns.addEventListener('click',function(){//事件类型是字符串 且不带on
    alert(123)
})
```
- ```
btns.attachEvent('onclick',function(){
    alert(123)
})//i9以前支持
detachEvent//删除
```

删除事件

传统方式: ‘onclick = null’

监听事件

btns.removeEventListener('click',fn)   //不需要些函数调用                 
function fn(){//事件类型是字符串 且不带on
    alert(123)
}

DOM事件流

事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流
DOM事件流分为三个阶段：
- 捕获阶段：网景提出由DOM的顶层节点开始，逐级向下传播到最具体的元素接受的过程
- 当前目标阶段
- 冒泡阶段：IE提出事件开始由具体元素接收，然后逐级向上传播到DOM的最顶层节点的过程

验证

<div class = father>
    <div class = son></div>
</div>

true捕获阶段
btns.addEventListener('click',function(){//事件类型是字符串 且不带on
    alert(123)
} true)//有父元素绑定才会显示  true捕获阶段
false捕获阶段
btns.addEventListener('click',function(){//事件类型是字符串 且不带on
    alert(123)
} false) false//冒泡阶段

事件对象

event 事件对象当作形参来看有了事件才会存在系统自动创建不需要传参数

事件对象时一系列事件的相关集合

div.addEvenrListerner('click',function(event){
    log(event)
})
window.event//ie678
兼容性写法:
e = e || window.event;

可简写 evt，e
target 和 this的区别
- e.target:返回触发时间的属性和元素指向点击的对象
- this返回绑定事件的对象
- e,srcElement//ie678
常用事件对象属性
- 和this相似的属性currentTarget 指向绑定事件者
- e.type:返回事件类型
阻止默认行为
- e.preventDefault（）: 阻止默认行为
- returnValue//低版本做法
- return false //后边的代码不再执行
阻止冒泡
- stopPropagation（）：//停止传播 canceelBubble//取消泡泡 ie678使用
事件委托
- 事件冒泡带来的好处
- 不给没个子节点设置事件监听器，而是事件监听器设置在父结点上，利用冒泡原理设置每个字节点
- 只操作一次dom 程序性能提高
- e.target.style.color = pink

禁止选中文和禁止右键

contextmenu

document.addEventLisener('contextmenu',funciton(e){
 e.preventDefault//禁止右键
                         })

selectstart:开始选中

document.addEventLisener('selectstart',funciton(e){
 e.preventDefault//禁止选中文字
                         }）

鼠标点击事件

天使跟随鼠标移动

<style>
    img{
        position:absolute；
        top:2px；
    }
</style>
<div>
    <img>
</div>
<script>
    var pic = document.querySelectoe('img')；
document.addEventLisener('mousemove',function(e){//移动1px触发一次
    var x = e.padeX；
    var y = e.pageY；
    pic.style.left = x - 50 + 'px'；//鼠标在中间
    pic.style.top = y - 40 + 'px'；
})
</script>

常用键盘事件

document.addEventLisener('keyup',funvtion(){
  alert()
 })

上述三个都写执行顺序down ==》press ==》up
键盘事件对象
- ```
document.addEventLisener('keyup',funvtion(e){
   console.log(e.keyCode)
   console.log(e.keypress)
//keyCode 返回ASCll值
if(e.ketCode == 65){
    alert('按了a')
}else{
    alert('没有按a')
}
 })
```
- keyup和keydown不区分字母大小写 keypress区分大小写
- 利用keyCode判断用户按下哪个键 e.charCode e.which 取字符的编码
- keydown和keypress在文本框的特点：事件触发时文字还没有落入文本框中可以在这里阻止字符输入最好keypress中禁用
- event.altkey e.ctrlkey e.shiftkey 返回布尔值，检测对应功能键是否被按下