<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="box" a="10" b=20 id="cont" title="这是一个div">
<span>hello</span>
</div>
</body>
<script>
var obox = document.querySelector(".box");
// 属性的操作：
// 可见：看得见
// 内置：系统提供，对象的操作方法；系列专属方法：get/set/remove Attribute()
console.log(obox.title) //这是一个div
obox.title = "1231321";//将title里面内容改为1231321
console.log(obox.title) //1231321
console.log(obox.className)
obox.className = "hahah"
console.log(obox.getAttribute("title"))//1231321
console.log(obox.getAttribute("class"))//hahah
// 非内置：自定义的，系列专属方法：get/set/remove Attribute()
console.log(obox.getAttribute("a")) //10
obox.setAttribute("a","hello") //将10换成了hello
console.log(obox.getAttribute("a")) //hello
obox.setAttribute("c","world") //null，但是可以在元素中看到这个属性。搞不懂
obox.removeAttribute("a") //删除属性a
console.log(obox.getAttribute("a")) //null
// obox.removeAttribute("b")
// obox.removeAttribute("c")
// 不可见：看不见
// 内置：对象的操作
console.log(obox.innerHTML); //可以解析标签 // <span>hello</span>
console.log(obox.innerText); //不可以解析标签 //hello
console.log(obox.tagName);//DIV
console.log(obox.style)
// 所有的css属性
// obox.style.width = "300px"
// obox.style.height = "300px"
// obox.style.background = "red"
// obox.style.display = "none"
obox.style.cssText = "100px;height:100px;background:red;position:absolute;left:100px;"
// 非内置：对象的操作
// 元素本身的类型，对象
// 对象，作为真正的对象操作
obox.abc = "hahahah"
console.log(obox.abc)
</script>
</html>