*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
-------------------------------------------------------------
智一面|前端模拟面试练习提升题