当前位置: 萬仟网 > IT编程>开发>JavaScript > 从零开始学习前端JAVASCRIPT — 6、JavaScript基础DOM

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

643  人参与 | 时间:2018-01-26 | 我要评论

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);                

  

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

◎已有 0 人评论

Copyright © 2019  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com