DOM操作

1. 获取元素的方式

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.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]);

  }

1. 通过选择器的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)

1. 通过选择器的querySelectorAll获取元素

querySelectorAll():获取指定选择器的所有的元素，参数就是选择器的名称

 var boxList = document.querySelectorAll(".box1");

  console.log(boxList);

  var listLi = document.querySelectorAll("ul li");

  console.log(listLi);

事件：触发-响应机制

Event接口表示在DOM中发生的任何事件，一些是用户生成的（例如鼠标或键盘事件），而其他由API生成。

(1)、事件三要素

事件源:触发(被)事件的元素

事件类型:事件的触发方式(例如鼠标点击或键盘点击)

事件处理程序:事件触发后要执行的代码(函数形式)

(2)、事件的基本使用

<script>

var box = document.getElementById('box');

box.onclick = function () {

console.log('代码会在box被点击后执行');

};

</script>

鼠标单击事件：onclick    浏览器加载完成事件：onload

(3)、事件触发的多种写法

HTML内部书写所有

HTML行内触发方法

HTML外部书写

1. 非表单元素的属性操作

href、title、id、src、className width height等等

1. 添加src属性值显示图片

imgBox.src = "images/jie.jpg";

1. 改变图片大小

imgBox.width = 750;

    imgBox.height = 500;

1. 通过style改变宽高

imgBox.style.width = 750 + "px";

imgBox.style.height = 500 + "px";

//通过样式属性设置宽高、位置的属性类型是字符串，需要加上px

凡是css中这个属性是多个单词的写法,在js代码中DOM操作的时候.把-干掉,后面的单词的首字母大写即可

1. 通过类名改变宽度

  imgBox.className = "imgCl";

//className 会覆盖之前设置好的类名！

1. 隐藏元素

1、src=""

2、display=none; 不占位置的

3、visibility="hidden

1. this的指向问题

   1.  普通函数中，this指向window

      1.   构造函数中，this指向实例化对象

      2.   对象函数中，this指向当前的对象

      3.  事件函数中，this指向事件源

      4. 表单元素属性操作

      5. value 用于大部分表单元素的内容获取(option除外)

         type 可以获取input标签的类型(输入框或复选框等)

         disabled 禁用属性checked 复选框选中属性

         selected 下拉菜单选中属性

         checked 

         .文本内容属性

         (1)、innerText和textContent

         设置标签中的文本内容,应该使用textContent属性,谷歌,火狐支持,IE8及以下不支持

         设置标签中的文本内容,应该使用innerText属性,谷歌,火狐,IE8都支持

         返回被选元素的文本内容

          var p1 = document.getElementById("p1");

           console.log(p1.innerText);

         设置被选元素的文本内容

         btn1.onclick = function () {

             // 设置文本

             p1.innerText = "文本改变了哈";

             console.log(p1.innerText);

           }

         (2)、innerText和innerHTML的区别

         使用innerText主要是设置文本的,设置标签内容,是没有标签的效果的

         innerHTML是可以设置文本内容

         innerHTML主要的作用是在标签中设置新的html标签内容,是有标签效果的

         想要设置标签内容,使用innerHTML,想要设置文本内容,innerText或者textContent,或者innerHTML,推荐用innerHTML