JavaScript DOM编程(如何获取HTML标签的父元素和子元素) |
您所在的位置：网站首页 › js获取父对象 › 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:元素 也就是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替换Node2
1.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(); 删除最后一行 删除表格中所有数据 增加数据今天的课程也到此结束咯，大家跟着代码敲，代码上也打了详细的注释自己好好去理解，有不懂的发私信或者在下方评论，也希望大家要坚持不懈的学下去，不定期更新噢。 |
【本文地址】
今日新闻 |
推荐新闻 |