DOM元素对象拥有很多的内置的键值对】

DOM操作就是对象的键值对操作

• className:”” 存储/操作元素的样式类名 【class=’xxx’】
• id:”box”
• innerHTML：存储当前元素的所有内容，包含标签
• innerText：存储当前元素的文本内容
• onclick:null 后期可以基于这个属性实现点击事件绑定
• tagName:”DIV” 存储元素的标签名{大写的}
• style：{….} 存储/操作元素的“行内样式”
• onmouseover：鼠标滑过事件
• onmouseout：鼠标离开事件

  var b=document.getElementById("box");
  console.log(typeof b);//"object" 结果是一个对象
  b.className='clearfix';//设置样式类
  b['className']='box';
  console.log(idlist.className);//获取样式类
  b.style.width="100px";
  b.style.backgroundColor="pink";

  在计算机内存中的运转

  

获取元素的方法进阶

1.基于元素的ID获取对象

在整个文档中【获取的范围“上下文”】 我们基于元素的ID获取"一个"对象<br />    "上下文"只能是document<br />   var box=documenet.getElementById("box3");

2.基于元素的标签名获取对象

[context].getElementsByTag(标签名) 在指定的上下文中 基于元素的标签名 获取一组元素集合 上下文可以是document,也可以是其他的容器

• @1 获取的结果是一个集合HTMLCollection
  • 属于对象数据类型，结构很像数组,但是不是数组 所有它被称为”类数组集合”
  • 索引0 存储的第一个获取的DOM元素对象
  • length 存储的是一共获取了多少个
  • divList[索引]：获取其中的某一项 “标准的对象键值对操作”

var divlist=document.getElementsByTagName(‘div’);

3.基于元素的类名获取对象

在指定上下⽂中，基于元素的样式类名「class=’xxx’」获取⼀组元素集合， 结果也是⼀个类数组集合
var boxList = document.getElementsByClassName(‘box’);
console.log(boxList);