JavaScript--DOM介绍及应用

DOM

DOM 全称 document object model 文档对象模型 操作 html

html文档由 html+css 组成 DOM利用js操作 html+css的

操作元素节点 element Element 元素节点对象

查 获取元素节点的方式

通过选择器获取

id选择器

通过id属性来获取元素 里面的参数为 string类型的id 返回值是一个htmlElement
var box = document.getElementById("box");  //获取id值为box的元素
console.log(box);

class选择器

通过class属性名来获取对应的元素 他传入的参数为string类型的class名字
返回值是一个htmlCollectionof<Element>返回的是一个集合 这个集合里面存储了Element
htmlCollection是类似数组的一种结构  具备下标同时具备length属性 可能会有多个数据
但是htmlCollection 并不是一个数组 他不具备数组的方法 只是存在对应的下标和length属性

var content = document.getElementsByClassName('content')
console.log(box);

所以我们可以通过下标来获取对应的htnmlCollection里面的元素
 console.log(content[0]);

标签选择器

里面传入的是一个标签名字的string字符串 返回的也是一个htmlCollection
var div = document.getElementsByTagName('div')
console.log(div); // 这里是一个htmlCollection

通过下