持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第3天，点击查看活动详情
前言
JavaScript是基础并且是非常重要的一部分，现在项目基本都靠框架开发，很多原生方法得不到使用就会慢慢忘记，所以借着6月更文好好复习一下基础知识，今天开始DOM的拓展属性。
获取和设置元素的内容
innerHTML、innerText、textContent、outerHTML、outerText获取和设置的区别
innerHTML
- 获取的时候，标签被当做字符串获取到了,能拿到对象里的所有内容，但不包含当前对象本身
- 设置的时候，字符串中的标签直接被解析
outerHTML
- 获取的时候，标签被当做字符串获取到了,能拿到对象里的所有内容，并且包含当前对象本身
- 设置的时候，直接把当前元素替换掉了，字符串中的标签直接被解析
innerText
- 获取的时候，只获取元素中的文本节点内容 但是获取的是浏览器浏览器所显示的内容 比如样式设置display：none就获取不到，与outerText同理，而textContent则可以获取到位none的内容
- 设置的时候，字符串中的标签不会被解析
textContent
- 获取的时候，只获取元素中的文本节点内容，但是获取的文本内容和代码结构有关 如而已获取
- 设置的时候，字符串中的标签不会被解析
- textContent兼容性差 ie9及以上
outerText
- 获取的时候，只获取元素中的文本节点内容
- 设置的时候，直接替换当前外部元素，字符串中的标签不会被解析
代码示例
<body>
<button id="btn">设置</button>
<div class="outer">
<a href="###">当前文本内容</a>
<a href="###">当前文本内容</a>
</div>
</body>
<script>
var oOut = document.querySelector('.outer')
var oBtn = document.getElementById('btn')
oBtn.onclick = function(){
//获取和设置都是同理，不做设置的打印了
console.log(oOut.innerHtml) //只打印当前对象下的所有内容
/*
<a href="###">当前文本内容</a>
<a href="###">当前文本内容</a>
*/
console.log(oOut.outHtml) //打印当前对象下的所有内容并包含对象本身
/*
<div class="outer">
<a href="###">当前文本内容</a>
<a href="###">当前文本内容</a>
</div>
*/
console.log(oOut.innerText) //当前文本内容 当前文本内容
console.log(oOut.outerText) //当前文本内容 当前文本内容
console.log(oOut.textContent) //会打印出下列格式，textContent获取内容和代码结构有关
/*
当前文本内容
当前文本内容
*/
}
</script>
属性操作
简述自有属性和自定义属性的区别
读取属性值 ele.getAttribute(属性名)
-
自有属性
- 可以直接通过 元素对象.属性名 获取到
- 如果某些自有属性和js的关键字冲突了，那么就会把当前自有属性获取的方法修改，比如class属性获取的时候 可以通过className获取
-
自定义属性
- 不能直接通过 元素对象.属性名 获取到，因为他在当前元素的自有属性上没有找到该属性，则会把当前元素对象当作一个js对象，去获取他的属性了
- 自定义属性要通过getAttribute去找，才能去元素的属性上找当前自有属性
设置属性值
- 自有属性：直接设置
- 自定义属性：setAttribute(key,value)
删除属性值
- 自有属性
- 直接设置为空字符串
- 表单的一些属性 直接设置为false
- 自定义属性: removeAttribute
h5自定义属性
- h5自定义属性需要添加data-* 前缀
- h5给每一个元素提供了一个dataset属性，是一个对象，保存的是当前元素所有的自定义属性,只要对 dataset这个对象操作属性 就是给当前元素操作自定义属性
- 获取属性：ele.dataset.key
- 设置属性：ele.dataset = value
- 删除自定义属性：delete ele.dataset.key
下面就用自定义属性来写一个例子
效果图(注意看右边的添加自定义事件)
<body>
<button id="btn">变色</button>
<ul class="box">
<li></li>
<li></li>
</ul>
</body>
<script>
var oBtn = document.getElementById('btn')
var oLi = document.querySelectorAll('.box li')
//遍历绑定所有li 点击时添加标记
oLi.forEach(function(item,index){
item.onclick = function(){
//给被点击的元素添加一个自定义属性作为标记
item.dataset.click = "true"
}
})
oBtn.onclick = function(){
oLi.forEach(function(item,index){
if(item.dataset.click){
item.style.background = "red"
//当效果已经完成后 可以把标记去掉
delete item.dataset.click
}
})
}
</script>
<style>
.box{
display:flex;
}
li{
display:block;
margin: 10px;
width:100px;
height:100px;
background:skyblue
}
</style>
好了，以上就是本篇文章的分享，感谢阅读！
