<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM元素操作</title>
<style>
div{
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<!--onxxx=""：on的意思就是监听，onclick监听点击事件，onmove监听移动事件，只要发生这个事件，就是执行相应的操作。-->
<div onclick="myclick()"></div>
<a href="https://www.baidu.com" id="bd" class="baidu text a">百度</a>
<script>
function myclick() {
//alert('你点击div了？');
var a = document.getElementById('bd');
a.style.fontSize = '10px';
}
//js如何操作dom元素：dom元素指的就是标签，只不过每一个标签在js中就变成了一个dom对象，所以js操作标签就是在操作这个标签对应的dom对象。
//通过id获取一个dom元素
//document: 这个对象只存在于js代码中，它是默认生成的，代表了整个页面标签结构的对象。(文档树对象)
var a = document.getElementById('bd');
//获取a标签所有的属性
attrs = a.attributes;
console.log(attrs);
for (var i = 0; i < attrs.length; i++){
//以i为索引，从属性集合attrs中遍历出每一个属性
var att = attrs[i];
console.log(att.name, '=', att.value);
}
// 获取一个dom元素的一个属性，如果属性值不存在的话，返回null。
var href = a.getAttribute('href');
console.log(href);
//给一个dom设置/添加属性
a.setAttribute('name', '百度');
//给一个dom删除属性
a.removeAttribute('name');
//判断一个dom元素是否拥有一个属性
alert(a.hasAttribute('id'));
//js操作class属性
//className：会直接覆盖原有的class属性值
a.className = 'baidu.com';
//添加一个新的class值，不会覆盖原有的class的值；
a.classList.add('bd');
a.classList.add('bbdd');
//从classList移除一个class的值
a.classList.remove('bbdd');
//判断classList中是否拥有某一个class属性值
//alert(a.classList.contains('bd'));
// document.getElementsByClassName();
// document.getElementsByName();
// document.getElementsByTagName();
//修改dom元素的属性
a.style.color = 'black';
//font-size:
a.style.fontSize = '50px';
</script>
</body>
</html>