JavaScript——DOM（二）

Element对象：元素对象，在JavaScript代码中使用html的标签就是元素。

(Element)属性和方法

属性：

（1）innerHTML：设置或返回元素开始和结束标签之间的HTML（包括HTML标签）

（2）innerText：设置和返回开始和结束标签之间的文本（不能解析标签）

（3）textCOntent：设置或返回指定节点的内容（不识别换行）

方法：

（1）document.write('html内容')：在文档中写入指定的内容

（2）document.writeln('html内容')：在文档中写入指定的内容后换行

标签的属性：

（1）attributes：返回标签的所有内置属性名称

（2）setAttribute(name,value):设置标签的属性值。参数name表示属性名，参数value表示属性值

.dt{
    color: red;
    font-size: 25px;
}
.dd{
    color: skyblue;
    font-size: 35px;
}
<div class="dt" id="dt" title="woniu" name="mydiv">
        天安门广场
</div>
<button id="btn">更改文字</button>
document.getElementById('btn').addEventListener('click',function(){
    document.getElementById('dt').setAttribute('class','dd');
})

（3）getAttribute(name) 获取指定标签的指定属性值 参数name代表属性名

（4）removeAttribute(name) 删除标签的某个属性   name代表属性名

DOM操作元素的样式

用法 

（1）元素名.style.样式属性名  

注：样式属性名在使用时需要将单词之间的‘-’删除，并且需要将第二个单词的首字母大写。

<div id="demo"></div>
<script>
    let div = document.getElementById('demo');
    div.style.width = '200px';
    div.style.height = '200px';
    div.style.backgroundColor = 'skyblue';
</script>

 

 （2）HTML5对象样式的操作

1、一个元素的class属性有多个值 作用：在保留原有样式的基础上，添加新的样式

2、在js程序运行过程中动态添加class属性值

ClassList属性：是元素的class属性的列表

属性：length ：指定标签的class属性值的个数（即数组长度）

方法：

（1）add('字符串')：给元素添加类名  注：一次只可添加1个

（2）remove('字符串')：删除元素的类名 注：一次只可删除1个

（3）toggle('字符串')：若类名存在则删除，不存在则添加

（4）item(index)：根据接收的索引参数，获取元素的类名

（5）contains('类名')：判断元素是否包含指定类名  有true 无false

<div class="box box1 box2 box3 box4"></div>
<button class="auto_btn">居中</button>
<button class="remove_btn">恢复</button>
<button class="toggle_btn">交替</button>
<button class="item_btn">获取类名</button>
<button class="c_btn">判断</button>

// 添加类名  add()
document.querySelector('.auto_btn').addEventListener('click',function(){
    document.querySelector('.box').classList.add('boxauto');;
});
// 删除类名 remove()
document.querySelector('.remove_btn').addEventListener('click',function(){
    document.querySelector('.box').classList.remove('boxauto');
});
// 交替出现  toggle() 切换 
document.querySelector('.toggle_btn').addEventListener('click',function(){
    document.querySelector('.box').classList.toggle('boxauto');
})  
//item() 根据索引获取类名
document.querySelector('.item_btn').addEventListener('click',function(){
    let i = document.querySelector('.box').classList.item(3);
    console.log(i);
})
//contains() 判断元素是否包含指定类名
document.querySelector('.c_btn').addEventListener('click',function(){
    let flag = document.querySelector('.box').classList.contains('box');
    console.log(flag);
})