Javascript Dom元素获取和添加详解
1.Dom元素的获取
- document.getElementById():通过id获取一个Dom元素
- document.getElementsByClassName():通过class名字获取一个或多个Dom元素(伪数组)
- document.getElementsByTagName():通过标签名字获取一个或多个Dom元素(伪数组)
- document.querySelector():获取指定 CSS 选择器的一个元素
- document.querySelectorAll():获取指定 CSS 选择器的多个元素(伪数组)
ES6选择器与其他选中器的区别:
document.getElementsByTagName()和document.getElementsByClassName()获取到的都是动态列表
document.querySelectorAll()获取到的是静态列表,Dom结构发生变化要重新获取,不然会出问题
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Test</title> </head> <style> *{padding: 0;margin: 0;} </style> <body> <ul> <li class="test">1</li> <li class="test">2</li> <li class="test">3</li> <li class="test">4</li> </ul> </body> </html> <script> var lis = document.getElementsByTagName('li') var liByQuery = document.querySelectorAll('li') console.log(lis.length) // 4 console.log(liByQuery.length) // 4 // 动态添加li标签 document.querySelector('ul').innerHTML += "<li class='test'>5</li>" console.log(lis.length) // 5 console.log(liByQuery.length) // 4 </script>
document.getElementsByTagName()和document.getElementsByClassName()获取到的是 HTMLCollection,不能使用foreach()遍历
document.querySelectorAll()获取到的NodeList,可以使用foreach()遍历
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=2.0"> <title>Test</title> </head> <body> <ul> <li class="test">1</li> <li class="test">2</li> <li class="test">3</li> <li class="test">4</li> </ul> </body> </html> <script> var li = document.getElementsByTagName('li') var li2 = document.getElementsByClassName('test') var li3 = document.querySelectorAll('li') var li4 = document.querySelector('ul').children console.log(li) // HTMLCollection(4) [li.test, li.test, li.test, li.test] console.log(li2) // HTMLCollection(4) [li.test, li.test, li.test, li.test] console.log(li3) // NodeList(4) [li.test, li.test, li.test, li.test] console.log(li4) // HTMLCollection(4) [li.test, li.test, li.test, li.test] </script>
2.Dom元素节点类型
Dom节点类型分3类:元素节点,属性节点,文本节点
每种节点都有3种属性 nodeName,nodeType,nodeValue
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Test</title> </head> <style> *{padding: 0;margin: 0;} </style> <body> <div id="box" title="我在哪">我是谁</div> </body> </html> <script> // 获取元素节点 var box = document.querySelector('#box') // 元素节点的属性 console.log(box.nodeName);//DIV console.log(box.nodeType); //1 console.log(box.nodeValue); //一律为null // 根据属性名获取单个属性节点 var attrTitle = box.getAttributeNode("title") // 获取元素属性的集合(一个伪数组对象) var box_attributes = box.attributes // 属性节点的属性 console.log(attrTitle.nodeName);//title console.log(attrTitle.nodeType); //2 console.log(attrTitle.nodeValue); //"我在哪" // 获取box的文本节点(没有专门的方法用来获取文本节点,但是这个div的第一个子节点就是文本节点) var textNode = box.childNodes[0]; // 文本节点的属性 console.log(textNode.nodeName);//#text console.log(textNode.nodeType); //3 console.log(textNode.nodeValue); //"我是谁" </script>
3.获取Dom元素的子元素,父元素,兄弟元素
通过children属性可以获取当前Dom元素的子元素
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Test</title> </head> <style> *{padding: 0;margin: 0;} </style> <body> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </body> </html> <script> // 获取ul元素 var ul = document.querySelector('ul') // 获取ul子元素 var ul_children = ul.children // 遍历子元素 for(var i=0;i<ul_children.length;i++){ console.log(ul_children[i].innerHTML) // 1 // 2 // 3 } </script>
获取当前元素的父元素
parentElement/parentNode这两个属性都可以
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Test</title> </head> <style> *{padding: 0;margin: 0;} </style> <body> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </body> </html> <script> // 获取ul元素 var ul = document.querySelector('ul') // 获取父元素(ul的父级就是body) var parent = ul.parentElement var parentNode = ul.parentNode console.log(parent.nodeName) // BODY console.log(parentNode.nodeName) // BODY </script>
获取当前元素的兄弟元素
previousElementSibling属性:上一个兄弟元素
nextElementSibling属性:下一个兄弟元素
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Test</title> </head> <style> *{padding: 0;margin: 0;} </style> <body> <ul> <li>1</li> <li id="test">2</li> <li>3</li> </ul> </body> </html> <script> // 获取id为test的li元素 var li = document.querySelector('#test') // 获取兄弟元素 var preBrother = li.previousElementSibling var nextBrother = li.nextElementSibling console.log(preBrother.innerHTML) // 1 console.log(nextBrother.innerHTML) // 3 </script>
注意:
children与childNodes,前者只包含元素节点,而后者为元素节点+文本节点(回车换行也算是文本节点)
而previousElementSibling与previousSibling,nextElementSibling与nextSibling也一个道理
firstChild和lastChild:firstChild等价于childNodes[0],lastChild相当于childNodes的最后一个元素
4.DOM元素的添加与移除
添加子元素
appendChild():将目标元素作为子元素添加到当前元素的最后面
insertBefore():将目标元素作为子元素添加到当前元素中,位置可以自由选择
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Test</title> </head> <style> *{padding: 0;margin: 0;} </style> <body> <ul> <li>1</li> <li id="test">2</li> <li>3</li> </ul> </body> </html> <script> // 获取ul元素 var ul = document.querySelector('ul') // 创建li元素 var liNode = document.createElement('li') liNode.innerHTML = "4" // 将创建的li元素添加到ul中(最后面) ul.appendChild(liNode) // 再创建li元素 var liNode2 = document.createElement('li') liNode2.innerHTML = "life" var li_test = document.querySelector('#test') // 将创建的li元素添加到ul中(li_test的前面) ul.insertBefore(liNode2,li_test) </script>
运行结果
<ul> <li>1</li> <li>life</li> <li id="test">2</li> <li>3</li> <li>4</li> </ul>
删除子元素和替换子元素
removeChild():删除子元素
replaceChild():替换子元素
语法:parent.removeChild(child)
语法:parent.removeChild(替换的元素, 被替换的元素)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Test</title> </head> <style> *{padding: 0;margin: 0;} </style> <body> <ul> <li>1</li> <li id="test">2</li> <li id="replace">3</li> </ul> </body> </html> <script> // 获取ul元素 var ul = document.querySelector('ul') // 获取要删除的li元素 var li_test = document.querySelector('#test') // 删除子元素 ul.removeChild(li_test) // 获取要替换的li元素 var li_replace = document.querySelector('#replace') // 创建要替换的元素 var newLI = document.createElement('li') newLI.innerHTML = "replace li tag" // 替换元素 ul.replaceChild(newLI,li_replace) </script>
运行结果:
<ul> <li>1</li> <li>replace li tag</li> </ul>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 1702: [Usaco2007 Mar]Gold Balanced Lineup 平衡的队列
- 1455: 罗马游戏
- SQL Server 高性能写入的一些总结
- 3389: [Usaco2004 Dec]Cleaning Shifts安排值班
- 1754: [Usaco2005 qua]Bull Math
- 3377: [Usaco2004 Open]The Cow Lineup 奶牛序列
- 3301: [USACO2011 Feb] Cow Line
- SQL Server 索引和表体系结构(包含列索引)
- TiDB 源码阅读系列文章(七)基于规则的优化
- 博弈论入门之nim游戏
- 1477: 青蛙的约会
- 2045: 双亲数
- 树莓派常用文本编辑器
- BZOJ1299: [LLH邀请赛]巧克力棒(Nim游戏)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法