js 元素表单属性 dom节点

♡静

已于 2024-07-04 18:10:12 修改

阅读量960

点赞数 24

文章标签：笔记 javascript 前端

于 2024-04-02 17:27:08 首次发布

本文链接：https://blog.csdn.net/m0_47045804/article/details/137271295

版权

本文详细介绍了HTML和JavaScript中关于元素属性操作、表单属性、隐藏元素方法、样式操作、输入框事件、DOM节点增删改、事件叠加与删除、以及事件对象的使用。涵盖了基础到进阶的技术内容。

摘要由CSDN通过智能技术生成

01 元素属性的操作

获属性节点对象: getAttributeNode（不常用）

增加属性节点: 节点对象.setAttribute('属性名','属性值')

删除属性节点: 节点对象.removeAttribute('属性名)

修改属性节点: 节点对象.setAttribute('属性名','属性值')

获取属性节点: 节点对象.getAttribute('属性名')

02 表单常用属性

输入框内容的操作:

表单元素.value

表单元素单选多选时 .checked属性表示获取和设置当前选中状态

.selected 判断哪个option是被选中的

03 隐藏元素的方法

占位:

opacity:0

visibility:hidden

margin-left:-1000px

不占位:

display:none

width:0 height:0 overflow:hidden

04 js操作元素的样式

js操作页面元素的样式的方式:

1. 元素对象.style.css属性= '属性值' 行内样式(每次只能操作单个样式)

2. 节点对象.className=' '

通过修改class从而改变元素的样式

3.通过attribute系列方法操作class属性实现样式的操作

元素对象.setAttribute('class','类名') 新增class

元素对象.removeAttribute('class') 删除class

元素对象.setAttribute('class','类名') 修改class

元素对象.getAttribute('class') 获取class

4.元素对象.classList属性

元素对象.classList.add('类名') 新增class 每次只能增加一个

元素对象.classList.remove('类名') 删除class

元素对象.classList.toggle('类名') 切换class

元素对象.classList.contains('类名') 判断是否包含指定的class

05输入框相关的事件

失去焦点: 输入框对象.onblur

一般用来进行输入框内容的检查(配合正则表达式(后面讲))

获取焦点: 输入框对象.onfocus

在输入框里面获取焦点事件绝对不要对alert()使用否则会使得弹窗关不掉

输入事件: 输入框对象.oninput

每次输入不管是新增还是删除只要内容改变就会触发

内容改变事件: 输入框对象.onchange

从获取焦点到失去焦点内容发生改变时触发的事件

06 DOM节点的增删改

增加:

创建新节点:

var 变量=document.createElement('标签名')

在内存中创建一个内容为空的新标签对象页面没有反应

拼接节点:

1.父节点.appendChild(子节点对象)

在父节点的最后拼接子节点对象

2.父节点.insertBefore(新节点对象,参考的旧节点)

在旧节点之前插入新节点

删除节点:

父节点.removeChild(子节点对象)

修改节点:

父节点.replaceChild(新节点对象,被替换的旧节点对象)

克隆:

节点对象.cloneNode(布尔值) 参数默认为false 传入true表示克隆内部的内容

07 事件叠加覆盖问题

1.简单事件绑定:(传统事件)

元素.on事件名称=function(){

}

存在事件的层叠覆盖的问题

如果针对一个元素绑定两次或两次以上的同一个事件时,

那么最后绑定的事件生效之前的会被覆盖掉

2.事件监听绑定事件:

元素对象.addEventListener('不带on的事件名称',事件驱动函数)

这种绑定事件的方式不存在层叠覆盖问题

08 删除事件

1.传统方式删除事件

div[0].οnclick=function(){

div[0].onclick = null //将元素对象的点击事件等于null

}

2.事件监听的方式绑定的事件的删除方法

div[1].addEventListener('click', function(){

removeEventListener(删除的事件)

})

09 事件对象

1.事件对象:

就是一个事件的对象只要有事件的地方就有事件对象

写到事件驱动函数的小括号里面的

事件对象里面是我们事件的一系列的相关数据的集合包括和事件相关的

比如鼠标点击的位置事件类型 target....

2.事件对象e.target:

e.target返回的是触发事件的对象(点击了那个元素就返回那个元素)

this 返回的是绑定事件的那个对象(那个元素绑定了这个事件就返回哪个元素)

3.事件对象阻止默认行为:

阻止默认行为(事件) 让超链接不跳转或者让提交按钮不提交

e.preventDefault( );// 想要阻止哪些默认事件就把本行代码放到对应事件的驱动函数中

<a href="http://www.baidu.com">百度</a>
<script>
    //阻止超链接跳转
    var a=document.querySelector('a');
    a.addEventListener('click',function(e){
        e.preventDefault();
    })
    
    //阻止鼠标右击时,显示属性列表
    document.oncontextmenu=function(e){
        alert('哈哈哈')
        e.preventDefault()
        }
</script>

4.阻止事件冒泡

所谓的事件冒泡指的是:

当子元素和父元素绑定同一个类型的事件时,

子元素该事件被触发,父元素的该事件也被触发,这种状态就称之为事件冒泡

事件会一直冒泡到DOM树的最上层

部分事件不支持冒泡:

onmouseenter onmouseleave

阻止冒泡:

e.stopPropagation( )