element属性总结

最新推荐文章于 2025-10-09 11:34:21 发布

原创最新推荐文章于 2025-10-09 11:34:21 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

HTML 专栏收录该内容

4 篇文章

订阅专栏

本文深入探讨了DOM操作的基本方法，包括如何使用add(), remove()和toggle()方法修改元素的class属性，以及如何利用querySelectorAll和children属性选择和获取元素。同时，介绍了jQuery在DOM操作上的应用，如addClass(), removeClass()和hasClass()等。

**element.classList*

element.classList 本身是只读的，但是你可以使用 add() 和 remove()方法修改它。
add( String [, String] )添加指定的类值。如果这些类已经存在于元素的属性中，那么它们将被忽略。

remove( String [,String] )删除指定的类值。

let self = event.target
       
 self.classList.add('active')

remove(class1, class2, ...) //

toggle(class, true|false)

contains(class)

Jquery中,class

$(this).removeClass('u2-l1')  //删除class 本身是class 不用加 .
 $(this).addClass('u2-l1')  // 增加class
 if ($(this).is('.u2-l1'))  // 是否包含class
 else if ($(this).not('.u2-l1'))
 $("p").toggleClass("main") //切换toggle

element中拿到祖先元素

Element.closest(“element”) 方法用来获取：匹配特定选择器且离当前元素最近的祖先元素（也可以是当前元素本身）。如果匹配不到，则返回 null

Jquery中查找祖先元素

使用方法一样 $(当前元素).closest(’.祖先元素’)

element.id/tagName/classList

css选择器类选择器 element.className 可以拿到element元素中所有class的name
element.classList是对class的操作
元素选择器 element.tagName 可以拿到element元素的标签名（拿到的为大写）//html标签浏览器不区分大小写，一般用小写
id选择器 element.id 可以拿到element元素中唯一id

Jquery中拿到ID tagname classList

$('article').eq(1).attr('id')
 $('article').eq(1).prop('tagName') // 此处拿到为大写
 $('div').attr('class')  //此处拿到class的内容

选择器querySelectorAll

let a = document.querySelecot(element)
 
a[i]   当element=元素和类时候有效  当为id无效  因为id是唯一的 只有一个

element.children

可以拿到父元素的所有子元素

获取的是当前元素的所有子节点元素（不包括文本元素），children返回的是HTMLCollection类型

document.body.children[1].children[0]
element.children.length