渡一教育公开课web前端开发JavaScript精英课学习笔记(十二)DOM

DOM

DOM是Document Object Model的缩写即文档对象模型。

DOM定义了表示和修改文档所需的方法。DOM对象即为宿主对象,有浏览器厂商,用来操作html和xml功能的一类对象的集合。也有人称DOM是对html以及xml的标准编程接口。

html超文本标记语言:有固定的标签格式,用来定义网页的内容。

xml可扩展标记语言:可自定义标签格式,用来传送自定义数据使用。逐渐被JSON取代。

<div>DOM对象初步认识</div>
<script type = "text/javascript">
	//获取DOM对象,document 代表整个文档
	var div = document.getElementsByTagName('div')[0];
	//设置DOM对象的属性
	div.style.width = "100px";
	div.style.height = '100px';
	div.style.backgroundColor = 'green';
	//DOM对象事件绑定
	div.onclick = function(){
		if(this.style.backgroundColor == 'red'){
			this.style.backgroundColor = 'green';
		}else{
			this.style.backgroundColor = 'red';
		}
	}
 </script>

获取DOM对象的方法:

可通过名称,类型名,样式类名,id,遍历节点树等方式来获取元素。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>获取DOM对象举例</title>
	<style type="text/css">
		.css1{
			border:1px solid #ff0;
		}
	</style>
</head>
<body>
	<div id = 'div1' name = 'only' class = 'css1'>
		<!--注释节点-->
		<strong>DOM对象初步认识</strong>
	</div></body>
</html>
<script type = "text/javascript">
	//获取DOM对象,document 代表整个文档
	//var div = document.getElementsByTagName('div')[0];//通过元素类型名查找
	//var div = document.getElementById('div1');//通过元素ID查找,不常用(整合代码时ID会被后端程序修改)。
	//var div = document.getElementsByName('only')[0];//通过元素名查找。
	//var div = document.getElementsByClassName('css1')[0];//通过CSS类名查找
	//var div = document.querySelector('div.css1');//通过CSS选择器查找匹配的第一个元素。获取的是元素的快照,不实时。
	//var div = document.querySelectorAll('div.css1')[0];//通过CSS选择器查找所有符合的元素。获取的是元素的快照,不实时。
	var body = document.getElementsByTagName("body")[0];
	var strong = document.getElementsByTagName('strong')[0];
	//通过遍历DOM节点树查找元素
	//var div = strong.parentNode;//获取父节点
	var div = strong.parentElement;//获取父元素节点
	console.log(body.childNodes);//获取子节点,换行也算一个文本节点
	console.log(body.children);//获取元素子节点,换行也算一个文本节点
	console.log(strong);
	console.log(body);
	//设置DOM对象的属性
	div.style.width = "100px";
	div.style.height = '100px';
	div.style.backgroundColor = 'green';
	//DOM对象事件绑定
	div.onclick = function(){
		if(this.style.backgroundColor == 'red'){
			this.style.backgroundColor = 'green';
		}else{
			this.style.backgroundColor = 'red';
		}
	}
</script>
  • 节点的属性

    • nodeName - 元素的标签名,以大写形式标识,只读的。
    • nodeValue - Text节点或Comment节点的文本内容,可读写。
    • nodeType - 节点的类型,只读。
    • attributes - Element 节点的属性集合
  • 节点的方法

    • Node.hasChildNodes();是否有子节点。
  • 节点的类型

    • 元素节点 - 1
    • 属性节点 - 2
    • 文本节点 - 3
    • 注释节点 - 8
    • document - 9
    • DocumentFragment - 11
<h1>遍历节点</h1>
<div>
	<!--注释节点-->
	<strong>strong</strong>
	<span>span</span>
	<div name='childName' id ='childId'>div</div>
	<input type="button" value="button"/>
</div>
<script type = "text/javascript">
	var div = document.getElementsByTagName('div')[0];
	for (let index = 0; index < div.children.length; index++) {
		const element = div.children[index];
		console.log(index,element.nodeName,element.nodeType,element.nodeValue);
	}
	//遍历子节点,输出节点的属性
	for (let index = 0; index < div.childNodes.length; index++) {
		const node = div.childNodes[index];
		console.log(index,node.nodeName,node.nodeType,node.nodeValue);
	}
</script>

节点的增删改
 

<h1>节点增删改</h1>
<div>
	<!--注释节点-->
	<strong>strong</strong>
	<span>span</span>
	<div name='childName' id ='childId'>div</div>
	<input type="button" value="button"/>
</div>
<script type = "text/javascript">
	var div = document.getElementsByTagName('div')[0];
	var div1 = document.createElement("div"); //- 创建元素节点
	div1.innerHTML = 'new div';
	var text1 = document.createTextNode("text"); //- 创建文本节点
	text1.nodeValue = "text1";
	var comment1 =  document.createComment("comment"); //- 创建注释
	comment1.nodeValue = 'comment1'
	var doc =  document.createDocumentFragment("fragment");//创建文档碎片
	doc.appendChild(document.createElement("div"));
	// //插入元素节点
	div.appendChild(div1);//如果选中的是已存在的元素,将会移动元素到新位置。
	div.appendChild(text1);
	div.insertBefore(comment1,div1); 
	div.insertBefore(doc,div1); 
	//删除元素节点
	div.removeChild(comment1); //返回删除的节点
	text1.remove(); //无返回
	//替换节点
	var comment2 = document.createComment("comment");
	comment2.nodeValue = "replaceChild div1";
	div.replaceChild(comment2,div1);
</script>

元素节点的属性和方法

<h1>元素节点属性和方法</h1>
<div>
	<!--注释节点-->
	<strong>strong</strong>
	<span>span</span>
	<div name='childName' id ='childId'>div</div>
	<input type="button" value="button"/>
</div>
<script type = "text/javascript">
	var strong = document.getElementsByTagName('strong')[0];
	strong.innerText = "new strong";//设置文本值
	var div = document.getElementsByTagName('div')[0];
	div.innerHTML = 'new div';//设置html代码
	div.setAttribute("id",'only');//设置属性值
	console.log(div.getAttribute('id'));//读取属性值
 </script>

DOM继承树

  • node
    • Document
      • HTMLDocument
  • CharacterData
    • Text
    • Comment
  • Element
    • HTMLElement
    • HTMLHeadElement·
    • HTMLBodyElement
    • HTMLTitleElement
    • HTMLParagraphElement
    • HTMLinputElement
    • HTMLTableElement
    • ...ect.
  • Attr

封装insertAfter();类似insertBefore();

<h1>insertAfter</h1>
<div>
	<!--注释节点-->
	<strong>strong</strong>
	<span>span</span>
	<div name='childName' id ='childId'>div</div>
	<input type="button" value="button"/>
</div>
<script type = "text/javascript">
	//实现在元素节点后添加新节点
	Element.prototype.insertAfter = function(targetNode,afterNode){
		var beforeNode = afterNode.nextElementSibling;
		if(beforeNode == null){
			this.appendChild(targetNode);
		}else{
			this.insertBefore(targetNode,beforeNode);
		}
	}
	var div = document.getElementsByTagName("div")[0];
	var newNode = document.createElement('p');
	var strong = document.getElementsByTagName('strong')[0];
	var input = document.getElementsByTagName('input')[0];
	console.log(strong);
	div.insertAfter(newNode,strong);
 </script>

倒序排列元素节点

<h1>倒序排列节点</h1>
<div>
	<!--注释节点-->
	<strong>strong</strong>
	<span>span</span>
	<div name='childName' id ='childId'>div</div>
	<input type="button" value="button"/>
</div>
<script type = "text/javascript">
	var div = document.getElementsByTagName('div')[0]
	//倒序排列元素节点
	var len = div.children.length;
	for (let i = len-1; i >= 0; i--) {
		div.appendChild(div.children[i]);
	}
 </script>

 

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值