DOM常用几种获取元素属性方式
DOM常用几种获取元素属性方式
1.DOM 提供的方法（API）获取
1.1 H5新增获取元素方式
-
document.getElementsByClassName 根据类名获得某些元素集合
-
document.querySelector 返回指定选择器的第一个元素对象
-
document.querySelectorAll()返回指定选择器的所有元素对象集合
案例代码：
<body>
<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div id="nav">
<ul>
<li>首页</li>
<li>产品</li>
</ul>
</div>
<script>
// 1. getElementsByClassName 根据类名获得某些元素集合
var boxs = document.getElementsByClassName('box');
console.log(boxs);
// 2. querySelector 返回指定选择器的第一个元素对象 切记 里面的选择器需要加符号 .box #nav
var firstBox = document.querySelector('.box');
console.log(firstBox);
var nav = document.querySelector('#nav');
console.log(nav);
var li = document.querySelector('li');
console.log(li);
// 3. querySelectorAll()返回指定选择器的所有元素对象集合
var allBox = document.querySelectorAll('.box');
console.log(allBox);
var lis = document.querySelectorAll('li');
console.log(lis);
</script>
</body>1.2 获取特殊元素方式（html和body)
1.获取html元素
document.documentElement 返回html元素对象
2.获取body元素
document.body 返回body元素对象
1.3 自定义属性操作
1.获取属性值
(1) element.属性
获取内置属性值（元素本身自带的属性）
(2) element.getAttribute('属性');
主要获得自定义属性（标准）程序员自定义的属性
案例代码：
<div id="demo" index="1" class="nav"></div>
<script>
var div = document.querySelector('div');
// 1. 获取元素的属性值
// (1) element.属性
console.log(div.id);
//(2) element.getAttribute('属性') get得到获取 attribute 属性的意思 我们程序员自己添加的属性我们称为自定义属性 index
console.log(div.getAttribute('id'));
console.log(div.getAttribute('index'));
</script>2.设置属性值
（1）element.属性= '值' 设置内置属性值
（2）element.setAttribute('属性', '值'); 主要针对于自定义属性
案例代码：
<div id="demo" index="1" class="nav"></div>
<script>
// 2. 设置元素属性值
// (1) element.属性= '值'
div.id = 'test';
div.className = 'navs';
// (2) element.setAttribute('属性', '值'); 主要针对于自定义属性
div.setAttribute('index', 2);
div.setAttribute('class', 'footer'); // class 特殊 这里面写的就是class 不是className
</script>3.移除属性
element.removeAttribute(属性)
案例代码：
<div id="demo" index="1" class="nav"></div>
<script>
// 3 移除属性 removeAttribute(属性)
div.removeAttribute('index');
</script>
2.通过节点获取
2.1父级节点
node.parentNode
-
parentNode属性可返回某节点的父节点，注意是最近的一个父节点
-
如果指定节点没有父节点则返回null
案例代码：
<body>
<div class="father">
<div class="son">儿子
<div class="grandson">孙子</div>
</div>
</div>
</body>
<script>
var son = document.querySelector('.son');
var father = document.querySelector('.father'); //以前通过获取元素的方式得到father
// 得到的是离元素最近的父级节点(亲爸爸) 如果找不到父节点就返回为 null
console.log(son.parentNode); //现在可以通过父节点获取元素的father
</script>2.2子节点
1.子元素节点
parentNode.children(非标准)
parentNode.children是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回（重点掌握）。
虽然children是一个非标准，但是得到了各个浏览器的支持，因此可以放心使用。
案例代码：
<body>
<div class="father">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>
</body>
<script>
// 1.DOM 提供的方法（API）获取
var father = document.querySelector('.father');
var p = document.querySelectorAll('p');
//2.children 获取所有的子元素节点 也是我们实际开发常用的
console.log(father.children);
</script>
</body>1.如果想要第一个子元素节点，可以使用以下两种 :
第一种：parentNode.children[0]
第二种：firstElementChild
2.如果想要最后一个子元素节点，可以使用以下两种:
第一种：parentNode.children[parentNode.children.length-1]
第二种：lastElementChild
案例代码：
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
<script>
var ul = document.querySelector('ul');
// 实际开发的写法 既没有兼容性问题又返回第一个子元素
console.log(ul.children[0]);//第一个
console.log(ul.children[ul.children.length - 1]); //获取最后一个
</script>
</body>
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
3
0- 0
已为社区贡献1条内容
所有评论(0)