*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