DOM文档对象模型入门基础知识

    <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>