JavaScript DOM编程(如何获取HTML标签的父元素和子元素) |
您所在的位置:网站首页 › 高考完了的文案 › JavaScript DOM编程(如何获取HTML标签的父元素和子元素) |
今天迎来了我们的JS的第四讲,今天就给家人们浅讲一下如何获取JS中的HTML标签的父元素和子元素,大家有什么不懂的可以私信我或者在下方评论,看到了会回复噢,也希望一直跟着我在学JS的家人们,继续坚持下去!!!
目录 一.什么是DOM? 二.动态改变文档内容的原理 三.DOM树中的节点类型和节点关系 四.Element常用属性(如何使用) 五.Element常用方法 六.使用JS操作表格 一.什么是DOM? DOM其实就是文档对象模型,由该三个单词组成Document Object Model。通过DOM可以动态改变文档 二.动态改变文档内容的原理 解析文档(如HTML)并生成DOM树通过DOM标准接口+编程语言改变文档内容 三.DOM树中的节点类型和节点关系document:网页中最大的父级元素 是DOM树的最上级 Element:元素 其实元素就是网页中的HTML标签 Node:节点 就把他理解成和元素是同一种就是HTML标签 四.Element常用属性(如何使用) 1Element.parent获取该元素的父级2Element.children获取该元素中所有的子元素标签3Element.childElementCount获取该元素中的子元素个数4Element.firstElementChild获取该元素的第一个元素5Element.lastElementChild获取该元素的最后一个元素6Element.previousElementSibling拿到该元素的上一个相邻元素7Element.nextElementSibling拿到该元素的下一个相邻元素注:Element:元素 也就是HTML标签,我们通常给标签一个id名,使用id名调用属性 列如:
获得div的子级元素,要写在我们的标签中
这个div是我们的给标签设置的id名 div.Element.children
1.Element.parent 获取元素的父级 // 给img标签的父元素设置背景颜色 // Element.parentElement拿到该元素的父级 // Element:元素(也可以称为标签) 元素就是标签的意思 // 注:这里的img是给标签设置的一个id名 img.parentElement.style.background="yellow"; 2. Element.children 获取该元素中所有的子元素标签 // Element.children:获取该元素中所有的子元素标签 console.log(div.children)3.Element.childElementCount 获取该元素中的子元素个数 // 查询div标签有多少个子元素 // 给我们div标签设置一个id名字也叫div // Element.childElementCount:获取该元素中的子元素个数 console.log(div.childElementCount);4.Element.firstElementChild 获取该元素的第一个元素 // Element.firstElementChild:获取该元素的第一个元素 console.log(div.firstElementChild);5.Element.lastElementChild 获取该元素的最后一个元素 // Element.lastElementChild:获取该元素的最后一个元素 console.log(div.lastElementChild);6.Element.previousElementSibling 拿到该元素的上一个相邻元素 //Element.previousElementSibling 拿到该元素的上一个相邻元素 console.log(img.previousElementSibling);7.Element.nextElementSibling 拿到该元素的上一个相邻元素 //Element.nextElementSibling 拿到该元素的下一个相邻元素 console.log(img.nextElementSibling); 五.Element常用方法 1document.createElement(TagName)根据标签名创建Element元素2Element.setAttribute(name,value)设置标签中的属性3Element.getAttribute(name)获取标签中的属性4Element.appendChild(Node)在内容末尾追加子节点5 Element.cloneNode(blooean)复制节点(是否复制子节点)6Element.removeChild(Node)移出子节点7Element.insertBefore(Node1,Node2)将Node1插入在Node2之前8 Element.insertBefore(Node,null)末尾插入9Element.before(Node)在节点后面添加节点10Element.after(Node)在节点前面添加节点11Element.replaceChild(Node1,Node2)用Npde1替换Node21.document.createElement(TagName) 根据标签名创建Element元素 2.Element.setAttribute(name,value) 设置标签中的属性 3.Element.appendChild(Node) 在内容末尾追加子节点 该三种方法运用在下方 增加图片 // document.createElement根据标签名创建Element元素 function add(){ var i=document.createElement("img"); // Element.setAttribute(name,value)设置标签中的属性 // name:属性名字 value:插入什么内容 i.setAttribute("src","img/4.gif") // Element.appendChild:在内容末尾追加子节点 div.appendChild(i); }4.Element.cloneNode(blooean) 复制节点(是否复制子节点) 复制图片 // 复制元素 function fz(){ // Element.cloneNode(blooean):复制元素 var i=div.cloneNode(true); // 把id设置为"",因为id不能相同 i.setAttribute("id",""); // 追加到body中 document.body.appendChild(i); }5.Element.removeChild(Node) 移出子节点 删除图片 // 删除子节点 function del(){ // 每点击一次删除最后一张照片 // 拿到最后一张 var i=div.lastElementChild // 删除该最后一张图片 // Element.removeChild(Node):移出子元素 // Node 大家理解为和Element一样的意思 div.removeChild(i); }6. Element.insertBefore(Node1,Node2) 将Node1插入在Node2之前 // 在图片二前面插入一张图片 function addBefore(){ // 根据标签创建元素 var i=document.createElement("img"); i.setAttribute("src","img/5.gif"); // Element.insertBefore(Node1,Node2) // 将Node1插入在Node2之前 div.insertBefore(i,img); } 插入7.Element.insertBefore(Node,null) 末尾插入 // 在末尾插入图片 function aAfter(){ // 根据标签创建元素 var i=document.createElement("img"); i.setAttribute("src","img/5.gif"); // Element.insertBefore(Node,null) // 末尾插入 div.insertBefore(i,null); } 末尾插入8.Element.before(Node) 在节点后面添加节点 // 在节点后面添加节点 function bBefore(){ // 根据标签创建元素 var i=document.createElement("img"); i.setAttribute("src","img/5.gif"); // Element.before(Node) // 末尾插入 img.before(i); } 在第二张图片后面插入一个节点9. Element.after(Node)) 在节点前面添加节点 // 在节点前面添加节点 function bAfter(){ // 根据标签创建元素 var i=document.createElement("img"); i.setAttribute("src","img/5.gif"); // Element.after(Node) // 在节点前面添加节点 img.after(i); } 在第二张图片面插入一个节点10.Element.replaceChild(Node1,Node2) 用Npde1替换Node2 只能替换一次,在点击按钮替换会报错 // 把图片二替换成一张新的图片 function replace1(){ // 根据标签创建元素 var i=document.createElement("img"); i.setAttribute("src","img/5.gif"); // Element.replaceChild(Node1,Node2) // 用Npde1替换Node2 div.replaceChild(i,img); } 替换图片 六.使用JS操作表格DOM结构中,table标签中的子节点是Tbody table.rows表格中的行集合row.cells一行中列的集合table.insertRow(i)在表中为i的位置插入一行row.insertCell(i)在行中为i的位置插入一列table.deleteRow(i)删除第i行把代码放在下方大家去看下,自己敲一遍理解如何使用 操作表格数据 商品名字 商品价格 商品操作 香蕉 3.5/一斤 删除 香蕉 3.5/一斤 删除 香蕉 3.5/一斤 删除 香蕉 3.5/一斤 删除 // 题目一: function fn1(cbx){ // 拿到每一个多选框 var is=document.getElementsByTagName("input") // is是一个数组,我们使用foreach循环遍历 // 大家要记住用foreach循环不要使用var 使用我们的let // 因为var会有bug for(let i of is){ i.checked=cbx; } } // 题目二: //1.首先先拿到最后一行数据 function delLast(){ //table.deleteRows删除第几行 // 当该表数据比一行多就删除最后一行 // table. if(table.rows.length>1){ table.deleteRow(-1); } } //题目三: function delAll(){ while(table.rows.length>1){ table.deleteRow(-1); } } function load(){ // 拿到td标签下的button 标签 for(let i of document.querySelectorAll("td button")) // 给按钮点击事件调用删除方法 i.onclick=del; } // 题目四: function del(){ //点击按钮时删除该一行,所有我们要拿到该行进行删除 // this是自己的意思,谁调用这个函数,this就是谁 // 我们要拿到tr该行删除,tr使我们按钮的父级 // Element.parentElement 获得元素的父级元素 // Element是元素的意思,元素我们可以理解为就是我们的html标签 // 这里用了两个,意味着我们是拿他的父级元素 var tr=this.parentElement.parentElement //去除该标签中的内容 // tr.innerHTML=""; // 删除标签+标签的内容 tr.outerHTML=""; } // 题目五: function add(){ // table:是我们给表格的id名 // table.insertRow(i):在表格中为i的位置插入一行 var tr=table.insertRow(); // row.insertCell:在行里面插列 var d1=tr.insertCell(); var d2=tr.insertCell(); var d3=tr.insertCell(); var d4=tr.insertCell(); // 给每一列插内容 // innerHTM可以插html标签也可以插文字 d1.innerHTML='' // textContent 可以插文字,无法插html标签 d2.textContent="西瓜"; d3.textContent="2.22/斤"; d4.innerHTML="删除" // 调用删除方法:让我们新增的数据删除按钮也可以删除数据 load(); } // 调用方法 load(); 删除最后一行 删除表格中所有数据 增加数据今天的课程也到此结束咯,大家跟着代码敲,代码上也打了详细的注释自己好好去理解,有不懂的发私信或者在下方评论,也希望大家要坚持不懈的学下去,不定期更新噢。 |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |