DOM操作

获取元素的方式
1.根据id获取元素
var div1 = document.getElementById(“box1”);
2.通过类名获取元素
var p1Arr = document.getElementsByClassName(“p1”);
console.log(p1Arr instanceof Array);//false
console.log(Array.isArray(p1Arr));//false
console.log(p1Arr.length);
console.log(p1Arr[0]);
console.log(p1Arr[1]);
伪数组定义：
1、拥有length属性，其它属性（索引）为非负整数(对象中的索引会被当做字符串来处理，这里你可以当做是个非负整数串来理解)
2、不具有数组所具有的方法
伪数组，就是像数组一样有 length 属性，也有 0、1、2、3 等属性的对象，看起来就像数组一样，但不是数组
常见的参数的参数 arguments，DOM 对象列表（比如通过 document.getElementsByTags 得到的列表）

/*  p1Arr.push(100);
   console.log(p1Arr); */
  /*  p1Arr.forEach(function (value, index) {
     console.log(value);
   }) */

3.通过标签名获取元素
var tag1 = document.getElementsByTag
var tag1 = document.getElementsByTagName(“div”);
console.log(tag1);
console.log(tag1[0]);
4.通过name名获取元素
var userList = document.getElementsByName(“user”);
console.log(userList);
for (var i = 0; i < userList.length; i++) {
console.log(userList[i]);
}
5.获取选择器的querySelector获取元素
querySlector():获取指定选择器的第一个元素，参数就是选择器的名称

  var div1 = document.querySelector(".box1");
  console.log(div1);
  var li1 = document.querySelector("ul>li");
  console.log(li1);
  var user_1 = document.querySelector("#user_1");
  console.log(user_1)

6.6、通过选择器的querySelectorAll获取元素

querySelectorAll():获取指定选择器的所有的元素，参数就是选择器的名称
 var boxList = document.querySelectorAll(".box1");
  console.log(boxList);
  var listLi = document.querySelectorAll("ul li");
  console.log(listLi);

5.事件初始
事件：触发-响应机制
Event接口表示在DOM中发生的任何事件，一些是用户生成的（例如鼠标或键盘事件），而其他由API生成。
(1)、事件三要素
事件源:触发(被)事件的元素
事件类型:事件的触发方式(例如鼠标点击或键盘点击)
事件处理程序:事件触发后要执行的代码(函数形式)
(2)、事件的基本使用

<script>
var box = document.getElementById('box');
box.onclick = function () {
console.log('代码会在box被点击后执行');
};
</script>

鼠标单击事件：onclick
浏览器加载完成事件：onload
(3)、事件触发的多种写法
HTML内部书写所有
HTML行内触发方法
HTML外部书写
补充：绑定事件的是事件对象
触发事件的是事件源对象
演示示例：事件
6. 非表单元素的属性操作
href、title、id、src、className width height等等
1、添加src属性值显示图片
imgBox.src = “images/jie.jpg”;
2、改变图片大小
imgBox.width = 750;
imgBox.height = 500;
3、通过style改变宽高
imgBox.style.width = 750 + “px”;
imgBox.style.height = 500 + “px”;
//通过样式属性设置宽高、位置的属性类型是字符串，需要加上px
凡是css中这个属性是多个单词的写法,在js代码中DOM操作的时候.把-干掉,后面的单词的首字母大写即可
4、通过类名改变宽度
imgBox.className = “imgCl”;
//className 会覆盖之前设置好的类名！
5、隐藏元素
1、src=""
2、display=none; 不占位置的
3、visibility="hidden
6、this的指向问题
① 普通函数中，this指向window
② 构造函数中，this指向实例化对象
③ 对象函数中，this指向当前的对象
④ 事件函数中，this指向事件源
演示示例：DOM的非表单元素的属性操作
7. 表单元素属性操作
value 用于大部分表单元素的内容获取(option除外)
type 可以获取input标签的类型(输入框或复选框等)
disabled 禁用属性checked 复选框选中属性
selected 下拉菜单选中属性
checked
演示示例：表单元素的属性操作
课堂练习：点击按钮显示和隐藏div
课堂练习：点击按钮设置div的样式
8. InnerText
返回被选元素的文本内容
var p1 = document.getElementById(“p1”);
console.log(p1.innerText);
设置被选元素的文本内容
btn1.onclick = function () {
// 设置文本
p1.innerText = “文本改变了哈”;
console.log(p1.innerText);
}