JavaScript 、dom操作

一、Dom 概括

DOM又称为文档树模型

文档：一个网页可以称为文档

节点：网页中的所有内容都是节点（标签、属性、文本、注释等）

元素：网页中的标签

属性：标签(元素)的属性

二、获取元素的方式

（1）、根据id获取元素

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

（2）、通过类名获取元素

 var p1Arr = document.getElementsByClassName("p1");

console.log(p1Arr instanceof Array);

  console.log(Array.isArray(p1Arr));

  console.log(p1Arr.length);

  console.log(p1Arr[0]);

  console.log(p1Arr[1]);

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

  }

（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）、通过选择器的querySelectorAll获取元素

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

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

  console.log(boxList);

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

  console.log(listLi);

（7）、伪数组定义：

        1、拥有length属性，其它属性（索引）为非负整数(对象中的索引会被当做字符串来处理，这里你可以当做是个非负整数串来理解)
        2、不具有数组所具有的方法

伪数组，就是像数组一样有 length 属性，也有 0、1、2、3 等属性的对象，看起来就像数组一样，但不是数组

        如：除querySelector、getElementById其余都是伪数组

三、事件初识

     (1)、事件三要素

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

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

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

      (2)、事件的基本使用

        <script>

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

        box.onclick = function () {

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

        };

        </script>

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

四、非表单元素的属性操作

（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

1. this的指向问题
   • •  普通函数中，this指向window
     •   构造函数中，this指向实例化对象
     •   对象函数中，this指向当前的对象
     •  事件函数中，this指向事件源

五、表单元素属性操作

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

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

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

selected 下拉菜单选中属性

(2)、innerText和innerHTML的区别

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

innerHTML是可以设置文本内容

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

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