js DOM元素获取的方法(8种)

您所在的位置：网站首页 › js获取文字内容 › js DOM元素获取的方法(8种)

js DOM元素获取的方法(8种)

2024-07-14 23:14| 来源: 网络整理| 查看: 265

# js DOM元素获取的方法(8种)

DOM: Document object model 文档对象模型，描述整个html页面中节点关系的谱图

# document.getElementById('id')

通过id获取元素，如果id重复了，获取到的是第一个，区分大小写（在 IE 6,7中不区分）

在 IE 6,7 中会把元素的 name 当作 id 来使用

如果没有获取到则返回 null,可以用id直接代表这个对象，而不去提前获取。上下文只能是 document

// html js中可以直接通过id拿到我 // js console.log(test); 1234# context.getElementsByTagName('li')

通过元素的标签名获取一组元素，有几个获取几个。可以根据上下文(context)获取我们获取元素的范围。

document.getElementsByTagName('li'); oDIv.getElementsByTagName('li'); 12# document.getElementsByName('text')

通过元素的name属性获取一组元素

注意在 IE浏览器下只对表单元素起作用。这个方法常用于获取具有相同name的表单元素

# context.getElementsByClassName('class')

在 IE 6~8 会报错

# document.documentElement,document.body

分别获取 html,body 元素，通常用来获取文档属性

var winW = document.documentElement.clientWidth || document.body.clientWidth // 兼容所有的浏览器获取当前浏览器宽度 1# document.querySelector,document.querySelectorAll

在移动端常用的方法，IE6～8不支持。同时不存在映射关系

前者只获取一个元素，后者获取全部

document.querySelector('#id') document.querySelector('.class') document.querySelector('li') document.querySelectorAll('#id li') // 后代选择器 document.querySelectorAll("input[type='text']") // 属性选择器 12345# DOM 中的节点和关系属性

w3chool的文档

# 获取关系的属性

节点：node 一个html页面中的元素标签、文本、注释。。。都是节点。在标准浏览器下，空格和Enter（回车）都是文本节点

oBox.childNodes // 获取所有的子节点 oBox.children // 获取所有的元素子节点 oBox.parentNode // 获取元素的父亲节点 oBox.previousSibling // 获取元素位于相同节点树层级的前一个元素，注意空格回车文本节点也会获取。(哥哥) oBox.nextSibling // 获取元素位于相同节点树层级的后一个元素。(弟弟) oBox.firstChild // 获取第一个子元素 oBox.lastChild // 获取元素的最后一个 1234567# 节点

主要的节点类型及其属性。

节点类型 nodeType nodeName nodeValue 元素节点（元素标签） 1 大写的标签名 null 文本节点（文字） 3 #text 文字内容注释节点 8 #comment 注释内容 document 9 #document null # 小案例，模拟children方法

模拟children方法，实现获取指定元素下所有的元素子节点

// 1. 获取 children 标签元素可以设置筛选 function getChildren(ele,tagName) { var ary = []; var nodes = ele.childNodes; // 拿到元素下所有的子节点 for (var i = 0; i

【本文地址】

js DOM元素获取的方法(8种)

js DOM元素获取的方法(8种)

今日新闻

推荐新闻