问题一:我们后期如果需要给一个节点新增加一个calssname,如何进行操作呢?
var dom = document.getElementById("dom")
dom.className = 'classname1 classname2'
在类名之间加个空格即可。
如果类名需要动态添加如何修改?
只需要使用新语法``即可
var clasname = 'classname3'
var dom = document.getElementById("dom")
dom.className = `classname1 classname2 ${clasname}`
问题二:如何获取节点上的属性值呢?
场景
我们需要使用父节点的事件委托的时候
<ul id='parent'>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
var dom = document.getElementById('parent')
dom.addEventListion('click',e=>{
let target = e.target
console.log(target)
})
</script>
当我们点击到lI
标签的时候输出的是<li>1</li>
我们可以通过判断innerHtml
内容,也可以判断节点的标签名nodeName
我这里比较推荐在节点绑定一个clickType
属性,这样能够实现更多的功能。
<ul id='parent'>
<li clickType='1'>1</li>
<li clickType='2'>2</li>
<li clickType='3'>3</li>
<li clickType='4'>4</li>
</ul>
<script>
var dom = document.getElementById('parent')
dom.addEventListion('click',e=>{
let target = e.target
let clickType = target.getAttribute('clickType')
if(clickType==''){
// 业务逻辑
}
})
</script>
注意 不能使用 e.target.atrribute.clickType
因为e.target.atrribute是一个node对象,不可以这样获取