wordpress打开最快的网站,简单介绍家乡网页html代码,硬件开发文档模板,手机建网站推广基础知识点掌握#xff1a;
1.DOM节点
首先DOM树当做一颗到着生长的树#xff0c;DOM树里面的每一个内容称为节点
节点类型#xff1a;
属性节点元素节点文本节点其他
2.查找节点#xff1a;
查找节点分为3个类型#xff1a;
父节点子节点兄弟节点
#xff08;1
1.DOM节点
首先DOM树当做一颗到着生长的树DOM树里面的每一个内容称为节点
节点类型
属性节点元素节点文本节点其他
2.查找节点
查找节点分为3个类型
父节点子节点兄弟节点
1父节点使用 parentNode 属性
使用模板 子元素.parentNode
div classonediv classtwo我是one的儿子/div/divscript//查找节点const two document.querySelector(.two)console.log(two.parentNode)/script
2子节点使用 children属性
使用模板父元素.children (注意得到的是一个伪数组选择的是亲儿子)
div classstudentsp classone1/pp classone2/pp classone3/pp classone4/pp classone5/p/divscript// 子节点的使用 childNodes可以获取所有子节点包括文本空格换行注释等 或 children仅获取所有元素节点返回的还有一个伪数组const div document.querySelector(div)console.log(div.children) //得到的是伪数组选择的是亲儿子/script
3兄弟节点使用 下一个兄弟节点 nextElementSibing 属性 上一个兄弟节点 previousElementSibing 属性
使用模板同级元素.nextElementSibing 或 同级元素.previousElementSibing div classstudentsp classone1/pp classone2/pp classone3/pp classone4/pp classone5/p/divscript//兄弟关系查找//1.下一个兄弟节点 nextElementSibing 属性//2.上一个兄弟节点 previousElementSibing 属性const one2 document.querySelector(div p:nth-child(2))console.log(one2.previousElementSibling) //上一个兄弟console.log(one2.nextElementSibling) //下一个兄弟/script
3.增加节点很多时候我们需要使用到增加节点的功能比如给一个视频进行评论 其中分为2个步骤1创建一个新的节点(docmennt.createElement(标签名)
const li document.createElementli 2追加节点 插入到父元素里面的最后父元素appendchild(要插入的元素)
ul.appendchild(li) (插入到某个元素的前面当前元素.insertBefore(需要插入元素,元素在哪个前面)
one.insertBefore(div,one.children[0])
整体代码
div classonediv/divdiv/div/divdiv classtwo/divscript// 获取第一个divconst one document.querySelector(.one)//1.创建一个新的节点const div document.createElement(div)//2.追加接地单插入到父元素的最后一个子元素div.innerHTML 我是第一个div的儿子// one.appendChild(div)//插入到某个元素的前面使用 父元素.insertBefore(要插入的元素哪一个元素之前) one.insertBefore(div,one.children[0])/script
4.克隆节点将原有的节点复制放到指定位置
ulli1/lili2/lili3/li/ulscript//1.获得元素const ul document.querySelector(ul)//2.克隆元素const li ul.children[0].cloneNode(true)//3.追加节点ul.appendChild(li)/script
5.删除节点注意删除节点和隐藏节点是不一样的隐藏节点隐藏后它还是占用位置displaynone
// 删除节点 父元素.removeChlid(子元素)const ul document.querySelector(ul)ul.removeChild(ul.children[0]) 学生管理系统管理页面实现增加删除
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /meta http-equivX-UA-Compatible contentieedge /title学生信息管理/titlelink relstylesheet hrefcss/index.css /
/headbodyh1新增学员/h1form classinfo autocompleteoff !-- 禁止自动填充 --姓名input typetext classuname nameuname /年龄input typetext classage nameage /性别:select namegender classgenderoption value男男/optionoption value女女/option/select薪资input typetext classsalary namesalary /就业城市select namecity classcityoption value北京北京/optionoption value上海上海/optionoption value广州广州/optionoption value深圳深圳/optionoption value曹县曹县/option/selectbutton classadd录入/button/formh1就业榜/h1tabletheadtrth学号/thth姓名/thth年龄/thth性别/thth薪资/thth就业城市/thth操作/th/tr/theadtbody!-- trtd1001/tdtd欧阳霸天/tdtd19/tdtd男/tdtd15000/tdtd上海/tdtda hrefjavascript:删除/a/td/tr --/tbody/tablescript// 获取所有带name属性的元素const item document.querySelectorAll([name])// 创建数组const arr []//获取元素 const uname document.querySelector(.uname)const age document.querySelector(.age)const gender document.querySelector(.gender)const salary document.querySelector(.salary)const city document.querySelector(.city)const tbody document.querySelector(tbody)// 表单提交事件const info document.querySelector(.info)info.addEventListener(submit, function(e) {// 阻止表单默认跳转行为e.preventDefault()// 进行表单验证如果不通过直接中断不进行添加元素for(let i 0;i item.length; i) {if(item[i].value ) {return alert(输入内容不能为空)}}// 创建性的对象const obj {stuId:arr.length1,uname:uname.value,age:age.value,gender:gender.value,salary:salary.value,city:city.value}// 追加到数组里面arr.push(obj)// console.log(arr)// 清空表单this.reset()render()})// 渲染函数function render() {// 先清空tbody把最新数组里面得到数据渲染完毕tbody.innerHTML for(let i 0 ;i arr.length; i) {// 生成trconst tr document.createElement(tr)tr.innerHTML td${arr[i].stuId}/tdtd${arr[i].uname}/tdtd${arr[i].age}/tdtd${arr[i].gender}/tdtd${arr[i].salary}/tdtd${arr[i].city}/tdtda hrefjavascript: data-id ${i}删除/a/td// 追加元素tbody.appendChild(tr)}}// 数据删除tbody.addEventListener(click,function(e) {if(e.target.tagName A) {// 使用自己定义属性data-idarr.splice(e.target.dataset.id,1)render()}})/script/body/html
