Dom常用方法

简介: Dom常用方法

文章目录


Dom 常用方法

Dom

定义:文档对象模型;
作用:通过JS操作网页;

获取元素节点

getElementById()

通过Id属性获取一个元素节点对象
//获取Id为btn01属性元素节点对象
var btn01 = document.getElementById("btn01");

getElementsByTagName()

通过标签名获取一组元素节点对象
//获取所有标签名为li的元素节点对象,并以数组的方式进行返回
var lis = document.getElementsByTagName("li");
//遍历lis数组
for(var i=0;i<lis.length;i++){
  alert(lis[i].innerHTML);
}

getElementsByName()

通过name属性获取一组元素节点对象
//获取name属性为gender的元素节点对象,并以数组的方式进行返回
var gender = document.getElementsByName("gender");

getElementsByName()

通过name属性获取一组元素节点对象
//获取name属性为gender的元素节点对象,并以数组的方式进行返回
var gender = document.getElementsByName("gender");

获取元素节点的子节点

getElementsByTagName()

获取当前节点的指定标签名后代节点
var city = document.getElementById("city");
//获取city节点的li节点
var lis = city.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
  alert(lis[i].innerHTML);
}

childNodes

获取包括文本在内的所有子节点
//获取Id为city属性元素节点对象
var city = document.getElementById("city");
//返回#city下所有的子节点
var cns = city.childNodes;
for(var i=0;i<cns.length;i++){
  alert(cns[i].innerHTML);
}

children

获取当前元素的子元素(标签)
//获取Id为city属性元素节点对象
var city = document.getElementById("city");
//返回#city下所有的子节点
var cns = city.children;
for(var i=0;i<cns.length;i++){
  alert(cns[i].innerHTML);
}

firstChild

获取当前元素的第一个子节点
var phone = document.getElementById("phone");
var fir = phone.firstChild;
alert(fir.innerHTML);

firstElementChild

获取当前元素的第一个子节点
var phone = document.getElementById("phone");
var fir = phone.firstElementChild;
alert(fir.innerHTML);

lastChild

当前节点的最后一个子节点
var phone = document.getElementById("phone");
var fir = phone.lastChild;
alert(fir.innerHTML);


获取父节点和兄弟节点

parentNode

获取父节点
var bj = document.getElementById("bj");       
var pn = bj.parentNode;
alert(pn.innerText);

previousSibling

获取当前节点的前一个兄弟节点(可能会获取到空白的文本)
//获取id为android的元素
var and = document.getElementById("android");
var ps = and.previousSibling;
alert(ps.innerHTML);

previousElementSibling

获取前一个兄弟元素(不包括空白文本)
var and = document.getElementById("android");
var pe = and.previousElementSibling;
alert(pe.innerHTML);

nextSibling

获取后一个兄弟元素(不包括空白文本)
var and = document.getElementById("android");
var pr = and.nextSibling;
alert(pr.innerHTML);

nextSibling

获取后一个兄弟元素(不包括空白文本)
var and = document.getElementById("android");
var pr = and.nextSibling;
alert(pr.innerHTML);

扩展

innerText

获取内容没有标签
alert(btn01.innerText);

innerHTML

获取内容有标签
alert(btn01.innerHTML);
目录
相关文章
|
17天前
|
JavaScript
怎么判断两个文档节点、网页元素(element)是否相同?判断两个DOM节点是否相等、相同的4种方法
怎么判断两个文档节点、网页元素(element)是否相同?判断两个DOM节点是否相等、相同的4种方法
|
8月前
|
JavaScript
Layui 内置方法 - layer.getChildFrame( 获取iframe页的DOM)
Layui 内置方法 - layer.getChildFrame( 获取iframe页的DOM)
144 0
|
5天前
|
XML JavaScript 前端开发
属性和方法向 XML DOM 定义了编程接口
XML DOM 提供编程接口,通过属性和方法操作XML结构。使用JavaScript等语言,可访问和修改节点。属性如nodeName、nodeValue揭示节点信息,方法如getElementsByTagName、appendChild、removeChild实现查找、添加和删除节点功能。节点对象x的应用示例贯穿其中。
|
17天前
|
XML JavaScript 前端开发
XML DOM - 属性和方法
XML DOM通过属性(如nodeName、nodeValue、parentNode、childNodes和attributes)和方法提供编程接口,让开发者用JavaScript等语言以节点方式交互XML。属性描述节点信息,方法执行操作,如删除节点。
|
22小时前
|
XML JavaScript 前端开发
XML DOM - 属性和方法
**XML DOM 提供编程接口,将XML转换为节点对象,便于通过JS等语言操作。属性如 nodeName、nodeValue、parentNode、childNodes 和 attributes 描述节点详情。方法用于执行操作,如删除节点。**
|
17天前
|
JavaScript 前端开发
JavaScript 提供了多种方法来操作 DOM(文档对象模型)
【5月更文挑战第11天】JavaScript 用于DOM操作的方法包括获取元素(getElementById, getElementsByClassName等)、修改内容(innerHTML, innerText, textContent)、改变属性、添加/删除元素(appendChild, removeChild)和调整样式。此外,addEventListener用于监听事件。注意要考虑兼容性和性能当使用这些技术。
16 2
|
17天前
|
JavaScript 前端开发 安全
javascript操作DOM的方法
javascript操作DOM的方法
15 0
|
17天前
|
XML JavaScript 前端开发
XML DOM - 属性和方法
XML DOM 提供编程接口,让开发者用JavaScript等语言操作XML文档。接口包含属性和方法,属性如nodeName、nodeValue、parentNode和childNodes,用于查询节点信息;方法如getElementsByTagName、appendChild和removeChild,执行增删操作。示例中,JavaScript代码`txt=xmlDoc.getElementsByTagName(&quot;title&quot;)[0].childNodes[0].nodeValue`从books.xml获取第一个&lt;title&gt;元素的文本内容,赋值给变量txt。
|
17天前
|
JavaScript 前端开发
JavaScript Dom方法
JavaScript Dom方法
41 2
|
17天前
|
JavaScript
Vue中如何获取dom元素?vue方法
Vue中如何获取dom元素?vue方法