获取属性节点对象:
getAttributeNode(不常用)
增加属性节点:
节点对象.setAttribute('属性名','属性值')
删除属性节点:
节点对象.removeAttribute('属性名')
修改属性节点:
节点对象.setAttribute('属性名','属性值')
获取属性节点:
节点对象.getAttribute('属性名')
输入框内容的操作:
表单元素.value
表单元素单选多选时 .checked属性 表示获取和设置当前选中状态
.selected 判断哪个option是被选中的
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
输入框相关的一些事件
失去焦点:
onblur
一般用来进行输入框内容的检查(配合正则表达式(后面讲))
获取焦点
onfocus
在输入框获取焦点事件里面 绝对不要使用alert()
否则会使得弹窗关不掉
输入事件
输入框对象.oninput
每次输入 不管是新增还是删除 只要内容改变就会触发
内容改变事件
输入框对象.onchange
从获取焦点到失去焦点内容发生改变时 触发的事件
增加：
创建新节点：
var 变量=document.createElement('标签名')
在内存中创建一个内容为空的新标签对象 页面没有反应
拼接节点：
父节点.appendChild(子节点对象)
在父节点的最后拼接子节点对象 childre[0]
父节点.insertBefore(新节点对象,从参考的纠结点)
在旧结点之前插入新节点
删除节点：
父节点.removeChild(子节点对象)
修改；
父节点.replaceChild(新节点对象,被替换的旧节点对象)
克隆：
节点对象.cloneNode(布尔值) 参数默认为false 传入true表示克隆内部的内容
简单事件绑定：
元素.on事件名称=function(){
}
存在事件的层叠覆盖的问题
如果针对一个元素绑定的两次或者两次以上的同一个事件那么最后绑定的事件生效 之前的会被覆盖掉
元素对象.addEventListener('不带on的事件名称',事件驱动函数)
这种绑定事件的方式不存在层叠覆盖的问题
传统方式删除事件
divs[0].οnclick=null
事件监听的方式绑定的事件如何删除？
removeEventListener(删除的事件)
divs[1].addEventListener('click',fn)
function fn(){
alert(2)
divs[1].removeEventListener('click',fn)
}
事件对象：
就是一个事件的对象 只要有事件的地方就有事件对象
写到我们的事件驱动函数的小括号里面的
事件对象里面是我们事件的一系列的相关数据的集合 包括和事件相关的
比如鼠标点击的位置 事件类型 target。。。
e.target返回的是触发事件的对象(点击了哪个元素就返回哪个元素)
this返回的是绑定事件的那个对象(哪个元素绑定了这点击事件 就返回哪个元素)
组织默认行为(事件) 让超链接不跳转 或者让提交按钮不提交
var a=document.querySelector('a');
a.addEventListener('click',function(e){
e.preventDefault();
})
所谓的事件冒泡指的就是：
当子元素和父元素绑定同一个类型的事件时
子元素该事件被触发 父元素的该事件也会被触发
这种状态就称之为事件冒泡
事件会一直冒泡到dom树的最上层
部分事件不支持事件冒泡
onm ouseenter onm ouseleave
阻止冒泡
e.stopPropagation()