元素(dom)获取/增/删/改

本文详细介绍了如何通过JavaScript、HTML5新特性、jQuery以及Vue获取和操作DOM元素,包括getElementById、getElementsByTagName、getElementsByClassName、querySelector和querySelectorAll等方法,以及它们在实际开发中的应用场景和注意事项。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

js获取元素的方法:

根据id获取:

返回的是一个元素对象

document.getElementById('id');

根据标签名获取:

返回的是 获取过来的元素对象的集合 以伪数组的形式储存的

 document.getElementsByTagName('标签名');
 var list = document.getElementsByTagName('li');

 还可以获取某个元素(父元素)内部所有指定的标签名的子元素

 var ul = document.getElementsById('ul');// 必须是指定的单个元素
var list=ul.getElementsByTagName('li');

通过 HTML5 新增的方法获取:

 document.getElementsByClassName(‘类名’);// 根据类名返回元素对象集合 伪数组
 document.querySelector('选择器'); // 根据指定选择器返回第一个元素对象
 document.querySelectorAll('选择器'); // 返回指定选择器的所有元素对象集合  伪数组
注意:
querySelector 和 querySelectorAll里面的选择器需要加符号,比如:
document.querySelector('#nav');

获取特殊元素(body,html):

doucumnet.body // 返回body元素对象
document.documentElement // 返回html元素对象

利用节点层级关系获取元素:

//父级节点
node.parentNode   // 返回 最近的一个父节点  如果指定的节点没有父节点则返回 null
// 子节点
parentNode.childNodes(标准)  // 包含指定节点的子节点的集合(包含文本,元素,空格等),该集合为即时更新的集合。

如果只需要元素节点:
var ul = document. querySelector(‘ul’);
for(var i = 0; i < ul.childNodes.length;i++) {
if (ul.childNodes[i].nodeType == 1) {
 // ul.childNodes[i] 是元素节点
 // nodeType 节点类型  1是元素节点 2是属性节点 3是文本节点(包含文字、空格、换行等)
 console.log(ul.childNodes[i]);
}
}

parentNode.children(非标准) // 返回所有的子元素节点 (是一个集合,伪数组)。它只返回子元素节点,其余节点不返

parentNode.firstChild  //firstChild 返回第一个子节点,找不到则返回null。(包含文本,元素,空格等)。

parentNode.lastChild //lastChild 返回最后一个子节点,找不到则返回null。(包含文本,元素,空格等)。

以下这两个方法有兼容性问题,IE9 以上才支持:
parentNode.firstElementChild  // firstElementChild 返回第一个子元素节点,找不到则返回null
parentNode.lastElementChild  // lastElementChild 返回最后一个子元素节点,找不到则返回null。
获取兄弟节点:
node.nextSibling // 返回当前元素的下一个兄弟节点,找不到则返回null。包含文本,元素,空格等
node.previousSibling // 返回当前元素上一个兄弟节点,找不到则返回null。包含文本,元素,空格等
以下两个方法有兼容性问题, IE9 以上才支持:
node.nextElementSibling // 返回当前元素下一个兄弟元素节点,找不到则返回null
node.previousElementSibling  // 返回当前元素上一个兄弟元素节点,找不到则返回null。

创建节点(动态创建元素节点 ):

document.createElement('tagName')  //  tagName 元素名称例如:li,ul,div,a等

添加节点:

node.appendChild(child)  // 将一个节点添加到指定父节点的子节点列表末尾。类似于 CSS 里面的
after 伪元素。
node.insertBefore(child, 指定元素) // 将一个节点添加到父节点的指定子节点前面。类似于 CSS 里面的 before 伪元素。

例如:
var ul = document.querySelector('ul');
 var li = document.createElement('li'); // 先创建节点
ul.appendChild(li);  // 再添加节点  往后添加

ul.insertBefore(li, ul.children[0]);  // 添加节点  往前添加

删除节点:

node.removeChild(child) // 从 DOM 中删除一个子节点,返回删除的节点

复制节点(克隆节点):

 node.cloneNode() // 返回调用该方法的节点的一个副本。 也称为克隆节点/拷贝节点
如果括号参数为空或者为 false ,则是 浅拷贝 ,即只克隆复制节点本身,不克隆里面的子节点。
如果括号参数为 true ,则是 深度拷贝,会复制节点本身以及里面所有的子节点。

修改dom的元素属性:

修改元素属性: src、href、title等

dom.src=''

修改普通元素内容: innerHTML 、innerText

两个属性是可读写:

innerText 不识别 html 标签 非标准 会自动去除空格和换行

innerHTML 识别 html 标签 W3C标准 保留空格和换行

修改表单元素: value、type、disabled等

修改元素样式: style、className

className 会直接更改元素的类名,会覆盖原先的类名

var text = document.getElementById('txt');
text.className = 'text';

jQuery基本和层级选择器

$("选择器") // 里面选择器直接写css选择器即可,但要加引号

基础选择器重点使用:id,类名,标签名。

名称用法描述
id选择器$("#id")获取指定id的元素
全选选择器$("*")获取所有元素
类选择器$(".class")获取同一类名的class元素
标签选择器$("div")获取同一类标签的所有元素
并集选择器$("div,p,ul,li")获取多个元素
交集选择器$(“ul.thisul”)获取类名为thisul的ul元素

 

层级选择器中后代和子代

名称用法描述
子代选择器$("ul>li");获得最近层级子元素,不会获得下下层级元素
后代选择器$("ul li");使用空格,代表后代选择器,获取ul下的所有元素,包含下下层级元素等

vue 获取元素:

<template>
  <div>
    <div ref="mydiv" @click="clickParent">点击获取元素</div>
  </div>
</template>

<script>
 
  export default {
    methods: {
      clickParent() {
        console.log(this.$refs.mydiv);
      }
    }
  }
</script>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值