<div id ="box1" class="box2" name="box3"><b>你好</b></div>
<!-- div 元素节点 任意的标签都是有元素节点
id class 属性节点 任意的属性都是属性节点
你好 文本节点 任意的文本都是文本节点-->
<script>
//Dom document 文档对象模型 操作html文档
//有html+css组成 DOM利用js操作html+css
//DOM节点分类
//操作元素节点 element Element元素节点对象
//查 获取元素节点的方式
//通过选择器获取
//id选择器 通过id属性来获取元素 ()里面的参数是string 返回的是HTMLElement
var box1=document.getElementById("box1") //获取id值为box的元素
console.log(box1)//id具有唯一性
//class选择器 通过class属性名来获取对应的元素
//=传入的参数是string类型的class名字 返回值是一个HTMLCollection(集合)
//意思返回的是一个集合 这个集合里面存储了Element
//HTMLCollection是类似数组的一种集合 具备下标和length属性 不具备数组的方法
var box2=document.getElementsByClassName("box2")
console.log(box2)
//可以通过下标来获取HTMLCollection里面的元素
console.log(box2[0])
//标签选择器 里面传入的是一个标签名的字符串 返回值是一个HTMLCollection(集合)
var div =document.getElementsByTagName("div")
console.log(div)
//可以通过下标来获取HTMLCollection里面的元素
console.log(div[0])
//通过name值获取(要有name属性) 返回的类型是一个nodelist 同样具备下标和length属性
//nodelist的方法比htmlcollection多 用不了数组的方法
var box3=document.getElementsByName("box3")
console.log(box3)
//可以通过下标获取
console.log(box3[0])
//nodelist和htmlcollection的区别
//都具备下标和length属性
//nodelist的方法比htmlcollection多
//nodelist可以排序 可以遍历 htmlcollection不能进行排序
//nodelist具备键值对的划分 htmlcollection没有,只能获取元素内容
//复合选择器 queryselector 返回第一个匹配选择器的元素element
// var fuhe=document.querySelector("div")
// var fuhe=document.querySelector("#box1")
// var fuhe =document.querySelector(".box2")
var fuhe =document.querySelector("box3")
console.log(box3)
// queryseletorall 返回所有匹配选择器元素 接受的是一个nodelist
var SelectorAll=document.querySelectorAll("#box1")
console.log(SelectorAll)
console.log(SelectorAll[0])
//操作属性节点 attribute Attr属性节点对象
var fuhe =document.getElementById("box1")
console.log(fuhe.className)
fuhe.className="留个话"
var fuhe =document.getElementById("box1")
console.log(fuhe.id)
fuhe.id="谢胖子"
// var div =document.getElementsByTagName("div")
// console.log(div.className)
// div.className="大瘦子"
// var box2=document.getElementsByClassName("box2")
// console.log(box2.name)
// box2.name="大瘦子"
console.log(box1.title)
box1.title="刘德华"
//style 样式操作 element.style 样式名
box1.style.background="red"
//操作文本节点 text Text文本节点对象
//innerText获取文本显示 赋值就是设置对应的文本
console.log(box1.innerText)//获取里面显示的文本(忽略标签)
// box1.innerText="睡了没"//覆盖之前的所有内容
// box1.innerText="<b>现在十一点</b>"//设置文本 不会解析里面的文本
//innerhtml 获取显示的html内容 赋值就是设置对应的html内容
console.log(box1.innerHTML)//会将里面的所有的html代码全部获取
box1.innerHTML="<b>睡了没</b>"//会显示里面的b标签 显示为html加粗效果
</script>
</body>
</html>