主要三板斧
- 页面元素的操作 添加节点（动态生成列表），删除节点
- 页面元素属性的操作 改变style 、或者直接改变class 实现不同页面效果，改变图片的路径src 链接的地址herf 内容innerHTML 、innerText，
- 页面元素事件的处理 鼠标 点击、移动、经过、离开等，键盘：输入的字符、按下、松开等
一般流程
- 得到节点 查
- 给节点绑定事件 事件
- 处理程序。里面可以是 插入新节点，删除某个节点（自己或者其他），修改节点的一些东西（自己或者其他）
插入新节点
- 创建节点，
var new=document.createElemnet('tagName') - 给新节点加入内容
new.innerHTML='想放的东西'或者new.nodeValue='想放的东西' - 把节点放到对应位置，
父节点.appendChild(new)父节点. insertBefore(new，父节点.children[i])，在第几个的前面插入新节点
ps：可以配合数组里面放数据对象，遍历数组得到要创建多少个大的节点，然后遍历对象的得到要创建多少个小的元素节点和对应的值
删除节点
- 给某个按钮绑定事件，实现删除功能
- 获得要删除的节点，
var node=document.querySelector('xxxx') - 删除节点
node的父节点.removeChild(node)
查找节点
- 通过使用
getElementById()、getElementsByTagName()、getElementsByClassName() querySelector()、querySelectorAll()
var buttonDatas2 = document.querySelectorAll('span[data-flag="2"]');.parentNode、children[i]、.previousElementSibling、.nextElementSibling，分别对应父节点，子节点（多个），上一个兄弟节点，下一个兄弟节点
修改——用的最多
- 获得节点，可以是只获得一个节点，也可以获得节点数组的形式
-
- 修改属性，
src、title、herf，属性都是可读写的，我们直接赋值修改即可，例如，node.src='新的src' - 修改内容 ，
innerHTML、innerText修改显示的内容node..innerHTML='想放的东西' - 修改表单元素
value、type、disable。 - 修改样式，可以直接修改
style.某个css属性直接加一个class或者减一个class ，列如node.classList.remove('active');node.classList.add('active');
- 修改属性，
自定义属性—以data- 开头
- setAttribute 设置属性值
- getAttribute 得到属性值
- removeAttribute 移除这个属性
事件
主要就是给某个节点绑定事件，比如点击事件 onclick 鼠标经过事件 onmouseover 鼠标离开事件 onmouseout 等
- 绑定方式1：
节点.事件类型=function（）{事件处理程序，你想干的事}
node.onclick=function(){node.innerHTML='我变了'} - 绑定方式2：
节点.事件类型=solve; 不带()
function solve（）{事件处理程序，你想干的事}这种方式默认传递了事件对象这个参数
node.onclick=change;
function change(){node.innerHTML='我变了';console.log(event);
}
- 绑定方式3：
节点.addEventListener('事件类型',solve); 不带()
function solve（）{事件处理程序，你想干的事}这种方式默认传递了事件对象这个参数
node.addEventListener('click',change);
function change(event){node.innerHTML='我变了';console.log(event);
}
本人更喜欢把函数单独出来，event可以简写为 evt 或 e
处理函数需要带参的办法
事件处理函数不能带参 ，定义一个传入参数的普通函数，在事件处理函数里面调用该函数，并传入参数
node.addEventListener('click',change);
function output(str){console.log(str)
}
function change(event){node.innerHTML='我变了'; //改变其他节点this.innerHTML='我变了'; //改变自己outoput('我调用输出函数了');console.log(event);output('我绑定的元素是'+event.target)
}
本文链接：https://my.lmcjl.com/post/2531.html
展开阅读全文
4 评论