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  #navvar 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 属性的意思 我们程序员自己添加的属性我们称为自定义属性 indexconsole.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// 得到的是离元素最近的父级节点(亲爸爸) 如果找不到父节点就返回为 nullconsole.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>

DOM常用几种获取元素属性方式相关推荐

java获取项目中的路径_java中几种获取项目路径方式
转自http://caodaoxi.iteye.com/blog/1234805 在jsp和class文件中调用的相对路径不同. 在jsp里,根目录是WebRoot 在class文件中,根目录是Web ...
原生js获取html元素属性,JS（原生js和jq方式）获取元素属性（自定义属性），删除属性（自定义属性）...
JS(原生js和jq方式)获取元素属性(自定义属性),删除属性(自定义属性) 以下内容: 一.获取元素的属性二.设置元素的属性三.删除元素的属性一.获取元素的属性 1-原生JS 获取属性 .ge ...
JS DOM获取元素属性+操作方法
JS DOM获取元素属性+操作方法文章目录 JS DOM获取元素属性+操作方法基础属性 title属性 tagName属性 : 获取标签名 className属性 : 获取类名 Nodelist. ...
两种获取connectionString的方式
两种获取connectionString的方式 1. public static string connectionString = ConfigurationManager.ConnectionSt ...
JS获取元素属性和自定义属性
昨天有同事问我,怎么获取自定义元素的属性,我意识到这个确实是个问题,所有总结一下自己的心得. 获取元素的属性分为两种类型: 1-获取元素常见的属性(class,id,type,value-) 2-获 ...
Selenium自动化测试-7.获取元素属性信息
------·今天距2020年76天·------ 这是ITester软件测试小栈第60次推文大家好我是vivi小胖虎做自动化测试往往避免不了获取元素信息获取元素属性获取元素状态今天就 ...
Hibernate中两种获取Session的方式
转自:https://www.jb51.net/article/130309.htm Session:是应用程序与数据库之间的一个会话,是hibernate运作的中心,持久层操作的基础.对象的生命周期 ...
DOM——获取元素的方式
document.getElementById("id属性的值"): //可以通过元素的 id 来获取元素,返回的是一个元素对象 document.getElementByName ...
js 获取元素的方式
js 获取元素5种的方式 1.标签获取元素 getElementsByTagName()方法返回一个动态的包含所有指定标签名的元素的集合. 语法: document.getElementsByTagN ...

DOM常用几种获取元素属性方式

1.DOM 提供的方法（API）获取

1.1 H5新增获取元素方式

1.2 获取特殊元素方式（html和body)

1.3 自定义属性操作

1.获取属性值

2.设置属性值

3.移除属性

2.通过节点获取

2.1父级节点

2.2子节点

DOM常用几种获取元素属性方式相关推荐

最新文章

热门文章