DOM
DOM:Document Object Model,文档对象模型。是js提供的,用来访问网页里所有内容的(标签,属性,标签的内容)
DOM树
当网页被加载时,浏览器会创建页面的DOM对象。DOM对象模型是一棵树形结构:网页里所有的标签、属性、文本都会转换成节点对象,按照层级结构组织成一棵树形结构。
- 整个网页封装成的对象叫document
- 标签封装成的对象叫Element
- 属性封装成的对象叫Attribute
- 文本封装成的对象叫Text
操作标签
document.getElementById(id) 根据id获取标签 返回值:Element对象
document.getElementsByName(name) 根据标签name获取一批标签 返回值:Element类数组
document.getElementsByTagName(tagName) 根据标签名称获取一批标签 返回值:Element类数组
document.getElementsByClassName(className) 根据类名获取一批标签 返回值:Element类数组
document.createElement(tagName) 创建标签 Element对象,创建元素节点
parentElement.appendChild(sonElement) 插入标签
element.remove() 删除标签
document.createTextNode()创建文本,创建文本节点
操作标签体
- 获取标签体内容:标签对象.innerHTML
- 设置标签体内容:标签对象.innerHTML = "新的HTML代码";
操作属性
1. getAttribute(attrName) 获取属性值
2. setAttribute(attrName, attrValue) 设置属性值
3. removeAttribute(attrName) 删除属性