5.JS DOM

DOM编程

Document Object Model 文档对象模型
在浏览器中，把加载显示的整个页面封装成一个document对象

---

一.在JS中获取HTML的标签的方式:(通过document对象)

1.通过标签的name来获取标签

document.getElementsByName("标签的name");
获取到的是数组

2.通过标签的id来获取

var varDiv=document.getElementById("div1");

3.通过class值来获取

document.getElementsByClassName("c1");
获取到的是数组

4.通过标签名称获取

document.getElementsByTagName("div")
获取到的是数组

5.通用查询选择器获取

document.querySelector(".c1"); 获取到的是单个的
document.querySelectorAll(".c1"); 获取到的是数组
[注意!!!]:只有此种方式需要写.或者#!!!

6.可以通过层级关系获取标签

---

二.获取、设置标签的值

1.表单标签

赋值:标签对象.value="";
获取:var v= 标签对象.value;

2.非表单标签( 开始标签和结束标签之间的文本信息)

• 获取值:
  标签对象.innerHTML 如果标签值中也包含标签的话，也被获取到
  标签对象.innerText 只获取标签中的文本，子标签不会获取
• 赋值：
  标签对象.innerHTML 如果赋值标签代码（换行符），浏览器会进行解析
  标签对象.innerText 如果赋值标签代码，浏览器不解析，原样输出

例:

3.改变标签的属性和样式和事件

1).获取到标签对象.属性=“值”

2)原生JavaScript改变样式有两种方式：

• 1.标签对象.style.属性="值" 【说明】在JavaScript中-表示的减法计算,如果样式表的属性中带有-，
  把-去掉 ，后面单词的首字母改为大写即可
  font-size fontSize
• 2.标签对象.className="类选择器"；(更为方便)

3)动态添加事件

  标签对象.事件名=function(){
          事件执行的代码
    }

例: