DOM-基本概念及使用

1、获取元素的方式总结

1、根据 id 的属性的值获取元素，返回值是一个元素对象

document.getElementById("id属性的值");

2、根据标签名获取元素，返回值是包含多个元素对象的伪数组

document.getElementsByTagName("标签名字");

下面的几个，有的浏览器不支持。

3、根据 name 属性的值获取元素，返回值是包含多个元素对象的伪数组

document.getElementsByName("name属性的值");

// 通过 name 属性获取元素适用于表单标签，基本标签没有 name 属性

//基本标签：div,p,h1,ul,li,br等

//表单标签：input, select,option,form,textarea,datalist,label等

4、根据 class 类样式的名字获取元素，返回值是包含多个元素对象的伪数组

document.getElementsByClassName("class类样式的值");
ie8等低版本浏览器不支持此方法。此方法属于 h5 的

5、根据 CSS 选择器获取元素，返回值是一个元素对象

document.querySelector("#id属性的值");

document.querySelector("标签的名字");

document.querySelector(".class类样式的值");

6、根据 CSS 选择器获取元素，返回值是包含多个元素对象的伪数组

document.querySelectorAll("#id属性的值");

document.querySelectorAll("标签的名字");

document.querySelectorAll(".class类样式的值");

注意：以上方法获取的元素的集合都是伪数组。

判断伪数组的方式是伪数组不能调用数组的方法。（Boolean(list.sort) == false）或者使用instanceof （list instanceof Array）。

伪数组怎么变为真数组？

定义一个空数组，把伪数组的所有内容复制过去即可。

注意点知识点：

1，innerText 常用于双标签里面的文本获取，而 value 常指的是单标签如 input 里面得的文本。

2，阻止 a标签跳转在点击事件里面添加 return false；可以 a标签被点击事件，也可以是 a标签里面的标签被点击事件。在事件里面添加 return false；

3，document.body 可以选中 body 标签，document 指的是整个 html 包括的页面。而 body 是html 下面的一个子元素。

4，css 中的样式如：background-color 在 js 下面操作样式时，要改写成第一个字母大写的形式如：backgroundColor。

5，通过对象.className = “” 来设置样式。而不是对象.class 。不像其他属性的设置。

6，input 标签的 disabled ，文本框禁止被操作。

2，innerText 和 textContent innerHTML

1、设置成对标签中文本内容：

innerText 属性是 IE8 标准属性，chrome，fireFox，IE8都支持。低版本火狐不支持

textContent 是W3C标准属性，chrome，firefox支持，IE8不支持。

2、获取成对标签中文本内容：

在 IE8 下使用 textContent 获取成对标签中文本内容，返回值为 undefined。

那么说明，浏览器不支持的属性的类型都为 undefined.

通过判断元素有无 textContent 属性（没有则元素的 textContent 属性为 undefined）来决定用 innerText 还是 textContent。

**innerText 属性：**设置和获取只能得到文本内容。

**innerHTML 属性：**不仅可以获得文本内容，还可以设置和获取 html 标签，让其显示或得到对应标签的格式。且任何浏览器都支持。

innerText textContent 和 innerHTML 都可以设置文本内容，推荐使用 innerHTML。

innerHTML 和 innerText 是获取某个元素内部的内容，而outerHTML 和 outerText不仅获取某个元素内部的内容还包括这个元素本身内容。


内容摘录自：https://github.com/Daotin/Web/tree/master/04-DOM