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

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

阅读量：4445 次

发布时间：2019-06-07

本文共 13800 字，大约阅读时间需要 46 分钟。

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 = '我是测试数据';  //文字倾斜，不显示标签

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

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

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

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

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

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

// 写入的区别 oBox.outerHTML = '测试数据'; oBox.outerText = '测试数据';//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(“列位置”);

    
          动态操作表格        
      
                                            序号                      属性                      属性值                      操作                 
                                                                         增加一行三列                                            
                                     1                      location.href                      指向网页的链接地址                      删除                 
                                     2                      location.search                      指向网页的链接地址                      删除

动态创建表格的两种方式

// 创建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);

8：DOM节点简介

根据 DOM规定，HTML 文档中的每个成分都是一个节点。

DOM 是这样规定的：

整个文档是一个文档节点。

每个 HTML 标签是一个元素节点。

包含在 HTML 元素中的文本是文本节点。

每一个 HTML 属性是一个属性节点。

注释属于注释节点。

9：如何获取DOM节点

1：旧的获取节点引用方式。

getElementById()

getElementsByTagName()

getElementsByName()

缺点：浪费内存，逻辑性不强。

10：通过节点的关系属性来获得节点的引用。

对象.parentNode 获得父节点的引用。

parentNode

对象.childNodes 获得子节点的集合，包括空白节点。IE7/8不包含空文本节点，但IE7包含首个注释节点（前面没有元素节点），IE8包含所有的注释节点。

childNodes

对象.children 获得子节点的集合，不包含空白节点。但IE7包含首个注释节点（前面没有元素节点），IE8包含所有的注释节点。

children

对象.firstChild 获得第一个子节点。（IE7/8非空白节点，可能是注释节点）

firstChild

对象.firstElementChild 获得第一个非空白的子节点。（IE7/8不支持）

firstElementChild

对象.lastChild 获得最后一个子节点。（IE7最后一个元素节点，IE8最后一个非空白节点，可能是注释节点）

lastChild

对象.lastElementChild 获得最后一个非空白的子节点。（IE7/8不支持）

lastElementChild

对象.nextSibling 获得下个兄弟节点的引用。（包括空白节点和注释。IE7/8包括注释节点，不包括空白节点。）

nextSibling

对象.nextElementSibling 获得下个兄弟节点的引用。（IE7/8不支持）

nextElementSibling

对象.previousSibling 获得上个兄弟节点的引用。（包括空白节点和注释。 IE7/8包括注释节点，不包括空白节点。）

previousSilbling

对象.previousElementSibling 获得上个兄弟节点的引用。（IE7/8不支持）

prviousSibling

　　缺点：兼容性不好。

11：节点其它属性

ownerDocument：获取该节点的文档根节点，相当于 document。

ownerDocument

attributes：获取当前元素节点的所有属性节点集合（IE7下不正常）。

attributes

　　tagName：获取元素节点的标签名。

tagName

id：元素节点的ID名称。

title：元素节点的title属性值（鼠标悬停时提示）。

title

className：元素节点的类名（不可以使用class）。

View Code

扩展：

扩展

12：节点信息（属性）

	节点类型（nodeType(数值)）	节点名字（nodeName）	节点值（nodeVale）
元素节点	1	标签名	null
属性节点	2	属性名	属性值
文本节点	3	#text	文本
注释节点	8	#comment	注释的文字
文档节点	9	#document	null

13：创建文档碎片

语法：var oFragment = document.createDocumentFragment();

//方式一：普通方式 var oList = document.querySelector('#list');console.time('边创建边输出10000个LI执行的时间')for(var i = 1; i<= 10000; i++) {	var oLi = document.createElement('li'); 	oLi.innerHTML = '这是第' + i + '个LI'; 	oList.appendChild(oLi);}console.time('边创建边输出10000个LI执行的时间')//方式二：创建文档碎片var oFragment = document.createDocumentFragment();console.timeEnd('创建10000个文档碎片LI执行的时间')for(var i = 1; i <= 10000; i++) {	var oLi = document.createElement('li');	oLi.innerHTML = '这是第' + i + '个LI';	oFragment.appendChild(oLi);}oList.appendChild(oFragment);console.timeEnd('创建10000个文档碎片LI执行的时间')//普通方式边创建边输出//创建文档碎片，创建放到容器，创建完成后输出

　　经过测试，在ie，firefox下性能明显得以提高。

14：节点计算属性

1：offsetParent：获取元素的最近的具有定位属性（absolute或者relative）的父级元素。如果都没有则返回body。

2：offsetLeft：获取元素相对具有定位属性的父级元素的左侧偏移距离。（子元素的marginLeft + left + 父元素的paddingLeft）

3：offsetTop：获取元素相对就有定位属性的父级元素的顶部偏移距离。（子元素的marginTop + top + 父元素的paddingTop）

4：scrollLeft/scrollTop：滚动条最顶端和窗口中可见内容的最顶端之间的距离。

6：clientWidth/clientHeight：元素视窗宽度/高度。

5：offsetWidth/offsetHeight：元素实际宽度/高度。

6：scrollWidth/scrollHeight：获取对象的滚动宽度/高度。

实时消息窗口滚动案例：

    
          节点计算属性实际应用demo

节点计算属性的应用

15：获取FORM表单

一：通过直接定位的方式来获取

document.getElementById();

document.getElementsByName();

document.getElementsByTagName();

二：通过集合的方式来获取引用

1.通过下标的形式

document.forms[下标]

2.通过name形式

document.forms["name"] document.forms.name

三：通过name直接获取（只适用于表单）

document.name

16：获取FORM表单元素

一：通过直接定位的方式来获取

//前面已经讲过此种方式的用法（不再做实例）

document.getElementById();

document.getElementsByName();

document.getElementsByTagName();

二：通过集合来获取

表单对象.elements // 获得表单里面所有元素的集合

表单对象.elements[下标]

表单对象.elements["name"]

表单对象.elements.name

三：直接通过name的形式

表单对象.name // name指的是元素的name

通过集合获取表达元素

17：表单元素共同的属性和方法

一：获取表单元素的值

表单元素对象.value // 获取或是设置值

二：属性

disabled // 获取或设置表单控件是否禁用 true false

form // 指向包含本元素的表单的引用。(通过表单中元素找到相应的表单)

三：方法表单元素是否获得焦点

blur() // 失去焦点

focus() // 获得焦点

表达元素的共同属性和方法

18：操作FORM表单元素

一：文本域

value属性：设置或者获取值。

二：单选按钮

checked属性：返回或者设置单选的选中状态。true 选中，false 未选中。

value属性：获取选中的值，必须先判断单选按钮是否被选中。

三：多选按钮

checked属性：返回或者设置单选的选中状态。true 选中，false 未选中。

value属性：获取选中的值，必须先判断选中状态。

四：下拉框

selected属性：给option设置或返回下拉框的选中状态。true 选中，false 未选中。

selectedIndex属性：设置或返回下拉框被选中的索引号。

五：文本区域

value属性：设置或者获取值。

六：验证表单

1：事件

onsubmit 当表单提交的时候触发的事件。

onblur 失去焦点。

onfocus 获得焦点。

onchange 下拉框改变值的时候。

2：return false; // 阻止事件的默认行为（适用于所有事件）。

七：提交方法

表单对象.submit();