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

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

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

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

---

2：DOM常用属性

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

console.log(document.title);   //打印网页标题—读
document.title="hello world";  //更改网页标题—写

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

　console.log(document.all);//输出网页的所有元素

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

console.log(document.forms['formone'])

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

1.通过下标的形式。

2.通过name形式。

---

 3：DOM查询方法

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

console.log(document.getElementById('box'))

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

console.log(document.getElementsByTagName('div'));

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

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

console.log(document.getElementsByName('form1').length);

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

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

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

document.write('下雪啦！');

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

console.log(document.getElementsByClassName('pink'))

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

// 通过class名获取元素集合
function byClassName(sClassName) {
	if(document.getElementsByClassName) {
		return document.getElementsByClassName(sClassName);
	} else {
		// 获取所有的元素
		var allTags = document.getElementsByTagName('*');
		var result = [];
		for(var i = 0; i < allTags.length; i++) {
			if(allTags[i].className == sClassName) {
				result.push(allTags[i]);
			}
		}
		return result;
	}
}
console.log(byClassName('pink').length)

---

 4：操作内容

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

console.log(oBox.innerHTML);//输出内部的标签及文字

 

 oBox.innerHTML = '<i>我是测试数据</i>';  //文字倾斜，不显示标签

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

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

console.log(oBox.innerText);  //只输出文字

 

oBox.innerText = '<i>我是测试数据</i>'; //文字不倾斜，标签当文字输出

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

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

// 写入的区别
 oBox.outerHTML = '<i>测试数据</i>';
 oBox.outerText = '<i>测试数据</i>';
//outerHTML 替换该标签插入html标签i文字发生倾斜
//outerText  替换该标签插入文字不发生倾斜标签当文字处理

 

---

 5：操作属性

1.直接操作

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

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

//通过属性的方式操作读写
oBox.id = 'snow';
oBox.age = '24';
console.log(oBox.id);
console.log(oBox.age);

2.通过方法

      getAttribute(“属性”)。  

console.log(oBox.getAttribute('id'));
console.log(oBox.getAttribute('age'));

     setAttribute(“属性”,“值”)。 

Box.setAttribute('id', 'snow');
oBox.setAttribute('age', 24);

 　　　removeAttribute(“属性”)。    

// 删除属性
oBox.removeAttribute('color');

---

6：操作样式

1.行内样式

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

// 只能读取行内样式
console.log(oBox.style.width)
console.log(oBox.style.height)
console.log(oBox.style.color)
console.log(oBox.style.backgroundColor)

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

// 只能设置行内样式
oBox.style.width = '400px';
oBox.style.backgroundColor = 'blue';

     注： 遇到属性是“-”链接的，要将“-”去掉，后面的单词的首字母大写，采用驼峰式命名的方法进行书写。

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

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

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

注：只能获取不能设置。

封装获取样式通用方式：

// 获取元素样式值
function getStyle(obj, attr) {
	if(obj.currentStyle) {
		return obj.currentStyle[attr];
	} else {
		return getComputedStyle(obj, false)[attr];
	}
}

console.log(getStyle(oBox, 'width'));

 

---

 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(“列位置”);

        // 创建LI标签
	var oLi = document.createElement('li');
	oLi.innerHTML = '这是第' + Math.round(Math.random() * 1000 + 10) + '条新闻';

	// 将新的标签追加到元素的末尾
	 oList.appendChild(oLi);

	// 将新的元素放到第一个位置
	oList.insertBefore(oLi, aLi[0]);

	// 替换节点
	oList.replaceChild(oLi, aLi[0]);

	// 删除节点
	 oList.removeChild(aLi[0]);

	// 创建属性节点
        oList.className = 'aaa';
	oList.sex = '男';

	var oHeight = document.createAttribute('height');
	oHeight .value = '180cm';
	oList.setAttributeNode(oHeight );

	// 创建文本节点
	var oText = document.createTextNode('新创建的文本节点');
	oList.appendChild(oText);

	// 表格的操作
	var oTable = document.getElementById('table');

	// 获取tBody
	var tBody = oTable.tBodies[0];

	// 获取tr
	 var oTr = tBody.rows[2];

	// 获取td
	 var oTd = oTr.cells[1];


	// 读取
	 console.log(oTd.innerHTML);

	// 修改
	oTd.innerHTML = 'second';

	// 添加新的一行
	// var oNewTr = tBody.insertRow(5);

	//  创建四列
	 var oNewTd = oNewTr.insertCell(0);
	 oNewTd.innerHTML = 5;
	 var oNewTd = oNewTr.insertCell(1);
	 oNewTd.innerHTML = '你猜五';
	 var oNewTd = oNewTr.insertCell(2);
	 oNewTd.innerHTML = 0;
	 var oNewTd = oNewTr.insertCell(3);
	 oNewTd.innerHTML = '女';

	// 删除一行
	var oDeleteTr = tBody.rows[tBody.rows.length - 1];
	tBody.removeChild(oDeleteTr);