从零开始学习前端JAVASCRIPT — 6、JavaScript基础DOM

1：DOM（Document  Object  Model）的概念和作用

document对象是DOM核心对象：对html中的内容，属性，样式进行操作。

节点树中节点之间的关系：父子，兄弟。

---

2：DOM常用属性

title：返回或设置当前文档的标题。

all：返回所有元素的集合。

forms：返回对文档中所有form对象的引用。

通过集合来访问相应的对象：

1.通过下标的形式。

2.通过name形式。

---

3：DOM查询方法

1.getElementById(id)：返回拥有指定id的（第一个）对象的引用。

2.getElementsByTagName(tagName)：返回有指定标签名的对象集合。

注：上面两个方法没有兼容性问题。

3.getElementsByName(name)：返回带有指定name指定名称的对象的集合。有兼容性问题。

在IE9及其以下，如果该对象的标准属性包含有name,（比如说input，在input中name是input的默认属性，所以可以正常使用，但是在div中name并不是div的默认属性，所以不能正常显示），那么可以正确的使用。否则不可以使用。在火狐中，该方法可以适用于任何情况。

结论： getElementsByName(name)主要是适用于表单。

4.write：输出内容到页面。（注：网页加载完成后进行输出，则覆盖整个网页，使用时需注意）

5.getElementsByClassName()：返回带有指定className指定名称的对象的集合。有兼容性问题，适用于火狐浏览器，在IE浏览器中不可用（IE8及以下不可用）。

封装获取className值的DOM节点的兼容性的函数。

---

4：操作内容

1.innerHTML：用来设置或获取对象起始和结束标签内（例如div框架，它只会获取div里面的内容，而不会获取div）的内容(识别html标签) 。

2.innerText：用来设置或获取对象起始和结束标签内的内容 (只是获取文字内容)(适用于IE，最新版火狐已支持)。

textContent用来设置或获取对象起始和结束标签内的内容 (只是获取文字内容)(适用于火狐，IE8及其以下不支持)。

3.outerHTML  用来设置或获取包括本对象在内的起始和结束标签内（例如div框架，不仅会获取div里面的内容，也会获取div自身的内容）的内容(识别html标签) 。

4.outerText  用来设置或获取包括本对象在内的起始和结束标签内的内容(只是获取文字内容)（火狐不支持）。

---

5：操作属性

1.直接操作

对象.属性。   // 获取属性。某些属性有兼容性问题，例如name（如果不是标签特有的属性，在chrome/firfox访问不到，在IE8及其以下浏览器能获取的到）。

对象.属性=值  // 设置、添加属性(属性值)。

2.通过方法

getAttribute(“属性”)。                // 获取给定的属性的值。

setAttribute(“属性”,“值”)。  // 设置或是添加属性。

　　　removeAttribute(“属性”)。       // 删除属性。

---

6：操作样式

1.行内样式

对象.style.属性       // 获取样式属性

对象.style.属性=值  // 设置、添加样式属性。

注： 遇到属性是“-”链接的，要将“-”去掉，后面的单词的首字母大写。

2.行内样式和css层叠样式通用的方式

对象.currentStyle.属性                IE   用来获得实际的样式属性。

getComputedStyle((对象,null).属性)   火狐  用来获得实际的样式属性。

注：只能获取不能设置。

---

7：DOM增删改

一：创建节点（注释和文档节点一般不需要创建）

1：创建元素节点

document.createElement("元素标签名");

2：创建属性节点

var oAttr = document.createAttribute(“属性名”);（不常用）

oAttr.value = "attr-name";

oDiv.setAttributeNode(oAttr);

对象.属性=属性值;（常用）

3：创建文本节点

对象.innerHTML = "";

var oText = document.createTextNode(“文本”);  // 文本中的HTML标签实体化

oDiv.appendChild(oText);

二：追加到页面当中

父对象.appendChild(newNode)  // 插入到父对象最后。

父对象.insertBefore(newNode, existsNode)   // 插入到什么对象之前。

三：修改(替换)节点

父对象.replaceChild(newNode,existsNode);  // 前面的替换后面的

四：删除节点

父对象.removeChild(oldNode);

如果确定要删除节点，最好也清空内存  对象=null;

五：表格操作

table.tBodies[0].rows[0].cells[0].innerHTML;

var oNewRow = table.insertRow(“行位置”);

　　 oNewRow.insertCell(“列位置”);