DOM-获取标签文本及属性操作

标签的内容属性

innerText和innerHTML属性都是用来获取和设置标签的内容的。但是二者还是有区别的。

innerHTML可以用于获取和设置标签的所有内容，包括标签和文本内容

// innerHTML:内部的HTML
//  获取标签内容的时候，不管标签还是文本，都能获取到
//  innerHTML设置内容的时候，覆盖原来内容，标签也能生效，浏览器能解析这个标签。

innerText可以用于获取和设置标签的文本内容，会丢弃掉标签

//innerText:内部文本
//  获取标签内容的时候，只会获取文本，标签扔掉了
//  设置标签内容的时候，覆盖原来内容，对标签进行转义（目的：把标签直接当文本来用）

二者的区别：

• innerHTML能够识别标签，标签能够生效
• innerText只识别文本，标签会被转义

表单属性操作

常见的表单属性有：disabled、type、value、checked、selected

对于disabled、checked、selected三个属性来说，比较特殊。

在标签中，只要指定了disabled属性，无论有值没值，都代表这个input是被禁用的。注意，标签的disabled仅仅是默认值。
在DOM对象中，disabled的属性是一个布尔类型的属性，值只有true或者false

获得焦点与失去焦点案例

onfocus:获得焦点时触发
onblur:失去焦点时触发	

【案例：表格全选案例.html】

样式操作（style属性）

标签不仅可以通过class属性操作样式，还可以通过style属性操作样式。同样的DOM对象可以通过className操作样式，也可以通过style属性操作样式。

//1. style属性是一个对象，里面存储了所有行内样式对应的键值对。
//2. 如果样式的名字带了-，比如background-color,到了style对象中，变成了驼峰命名法，backgroundColor（因为-在js中不是一个合法的标识符）
//3. style属性只能获取和设置行内样式，在类样式中定义的样式通过style获取不到。

style设置的样式是行内样式，因此优先级要高于className设置的样式

document常用属性：

1. document.body  : body比较常用，并且在页面中时唯一的，因此可以使用document.body直接获取。
2. document.documentElement  : 可以获取html元素
3. document.head :  可以直接获取head元素
4. document.title :  可以直接获取title的文本

获取元素的方法

根据id获取

//参数：元素的id
//返回值：一个元素，如果id不存在，返回null
document.getElementById("id");

根据标签名获取

//参数：标签名
//返回值：伪数组，无论有几个元素，返回都是伪数组
document.getElementsByTagName("tagName");
box.getElementsByTagName("tagName");

根据类名获取

//参数：字符串类型的类名
//返回值：伪数组
document.getElementsByClassName("class")

注意：这个方法ie678不支持

根据name获取

//只适用于表单元素
var ps = document.getElementsByName("aa");

根据css选择器获取

//参数：是一个css选择器，，   如果是类选择器，  .demo   如果是id选择器：  #aa
//返回值：只会返回一个对象，如果有很多个，会返回第一个
document.querySelector();

//参数：是一个css选择器
//返回值：会返回伪数组，不管有多少个，都会返回伪数组
document.querySelectorAll();

标签的自定义属性

我们之前讨论的属性，都是HTML规范中，标签本来就有的属性，对于标签自定义的一些属性，比较特殊。

在html页面中，定义一个自定义属性

<div id="box" aa="bb"></div>

在对应的DOM对象中是不存在的，在DOM对象中只会存在固定的那些属性。

var box = document.getElementById("box");
console.log(box.aa);//undefined

attribute方法

attribute系列方法用于设置标签的属性，不管是自定义的还是固有的属性。
jquery中通过attr()和prop()拿属性，prop()适合拿布尔值类型属性，比如表单的checked、disabled等等

jquery中通过data()拿data-开头的属性。<div calss="box" data-id="2"></div>

//获取标签的属性
box.getAttribute(name);
//设置标签的属性
box.setAttribute(name, value);
//移除标签的属性
box.removeAttribute(name);