*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
-------------------------------------------------------------