dom给元素添加多个clasname,dom获取属性名的值

问题一：我们后期如果需要给一个节点新增加一个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对象，不可以这样获取