DOM文档对象模型
DOM 文档==html or xml文档
其核心对象是document
| 属性 | 描述 |
|---|---|
| URL | 网站的url【只读】 |
| documentElement | 获取html标签【只读】 |
| body | 获取body标签【只读】 |
| head | 获取head标签【只读】 |
| charset | 查看字符集【只读】 |
| title | 文档的标题【读写】 |
| images | 文档中所有的img元素【只读】 数组 |
| forms | 文档中所有的form表单元素【只读】 数组 |
方法
| 方法 | 描述 | 返回值 |
|---|---|---|
| document.write() | 页面中输出 | |
| document.getElementsByClassName("类名") | 通过类名获取DOM元素 | 类数组 |
| document.getElementsByTagName("标签名") | 通过标签名获取DOM元素 | 类数组 |
| document.getElementsByName("name属性值") | 通过name属性获取DOM元素 | 类数组 |
| document.getElementById("id名") | 通过id获取DOM元素 | DOM对象 |
| document.querySelector("css选择器") | 通过css选择器获取DOM元素(第一个满足条件) | DOM对象 |
| document.querySelectorAll("css选择器") | 通过css选择器获取DOM元素 | 类数组 |
操作内容
| 属性 | 描述 |
|---|---|
| dom对象.innerHTML | 可访问，可修改，可以识别标签，用来给元素内添加子标签很方便 |
| dom对象.innerText | 可访问，可修改，输出纯文本，无法识别标签 |
操作样式
-
操作类名
dom对象.className="" //添加 dom对象.classList.add(类名1，类名2，...) //移除 dom对象.classList.remove(类名1，类名2，...) //检测类名是否存在，存在true，不存在false dom对象.classList.contains(类名1，类名2，...) //类名存在删除，不存在添加 dom对象.classList.toggle(类名1，类名2，...) -
操作样式
dom对象.style.css属性名=“css属性值”；
//
box.style.width="200px"
//
//由于上的批量操作样式会导致将之前的行内样式替换：
//采取以下操作
box.style.cssText+="background:red";
-
获取样式
-
获取行内样式
dom.对象.style.css属性名 -
嵌入式/行内/外部
windou,getComputedStyle(dom对象).css属性 //window. getComputedStylee(dom对象).css属性
-
操作属性
-
操作原生属性-dom对象自带的属性
dom对象.属性=属性值 -
操作自定义属性
-
设置/添加属性
dom对象.setAttribute("属性名","属性值"); -
获取属性
dom对象.getAttribute("属性名"); -
移除属性
dom对象.removeAttribute("属性名"); -
检测属性是否存在
dom对象.hasAttribute("属性名");
-
