document其它属性

document其它属性：

1、charset：获取当前文档的字符编码格式

2、readyState：代表当前文档所处的一个状态

• loading：代表html页面处于加载状态
• interactive：代表外部资源加载的过程
• complete：页面加载完成

3、anchors：获取到带有name属性的a标签。返回的是一个集合，不是数组，拥有length属性，可以通过下标去访问

4、links：获取到带有href属性的a标签

5、forms：获取到当前页面的所有表单

6、images：获取所有的image标签

7、scripts：返回所有的script标签

8、document.title：用于获取或设置文档的标题。如果存在，它的默认为 <title> 的值。

 

document.xxx去获取页面中的元素

1、document.getElementById()　获取到一个具体的元素，如果没有获取到对应的元素返回null；当id在html中重复出现（html并不会给我们报错），我们只能获取到第一个id为对应值的元素获取到的DOM节点

2、document.getElementsByName()　根据name属性来获取元素；获取的是一个nodeList的集合（类数组对象）

3、document.getElementsByTagName()　根据标签名（元素名）来获取页面中的元素；获取的是一个nodeList的集合（类数组对象）

4、document.getElementsByClassName()　根据class名获取元素，这个东西在ie8及以下不支持（不考虑IE低版本的可以放心使用）

5、document.querySelector(cssquery)　只能找到符合要求的第一个元素

console.log(document.querySelector("form input"));

6、document.querySelectorAll(cssquery)　返回符合选择器的所有元素的集合

console.log(document.querySelectorAll("form input"));

jq连缀写法：

console.log(document.getElementsByTagName("form").item(0).getElementsByTagName("button"));

获取当前元素的class属性值（可读可写）

className：获取元素的class属性值

所有的浏览器都支持该属性

如果没有该属性值则返回“”

注意：在写入的时候是一个覆写操作，会覆盖原本的值

document.getElementById("box").className += "pox";

 

获取元素的属性

tagName：获取标签名，以大写字母的形式返回

var pox = document.getElementById("pox");
console.log(pox.tagName);
console.log(pox.className);
console.log(pox.id);
console.log(pox.title);

 

获取节点属性（可读可写）（获取class值都使用className）

className：获取元素的class属性值

　　　　　　所有的浏览器都支持该属性

　　　　　　如果没有该属性则返回""

id：获取当前元素的id值

style：不管有没有设置，都会返回一个对象（该对象中的所有属性都是可读可写的）

title：元素节点的title属性值

 

对于自定义属性

注意：在ie9以下可以以< 节点.属性名 >的形式进行获取

在ie9及以上、谷歌、火狐等浏览器不支持< 节点.属性名 >该方式

我们需要以< 节点.getAttribute(属性名) >该方式获取，以< 节点.setAttribute(属性名, 属性值) >该方式设置属性

 

innerHTML与innerText

innerHTML：返回标签内所包裹的所有内容

innerText：返回的是文本，不包含任何标签

都是以string的形式进行返回

console.log(oTab.item(0).innerHTML);
console.log(oTab.item(0).innerText);

当我们去操作某个元素的innerHTML时会覆盖它原有的所有内容

oTab.item(0).innerHTML = oTab.item(0).innerHTML + "<small>我是比较小的</small>";
oDiv.innerHTML = "<h1>标题一</h1>";
oDiv.innerText = "<h1>标题一</h1>";

 

innerHTML与innerText

相同：可以获取标签之间的内容

　　　当对其赋值时都是一个覆写操作

不同点：innerHTML可以解析HTML标签

　　　　innerText不会解析HTML标签