DOM操作

最新推荐文章于 2022-12-05 18:11:26 发布

wusiye_123456

最新推荐文章于 2022-12-05 18:11:26 发布

阅读量131

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/wusiye_123456/article/details/78687885

版权

js 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

节点属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script >
			onload = function () {
			//常见的节点属性
			// nodeValue 表示节点的值，所有的节点都有该属性，一般文本节点才使用该属性
		//var txt = document.body.lastChild.nodeValue
		//alert("|" + txt + "|");
		
		//alert( document.body.nodeValue );
		//将body 中的文本修改为：‘我是唯一的文本’
		//document.body.lastChild.nodeValue = '我是唯一的文本';
		
		//nodeName  表示节点的名字，虽然所有的节点都有该属性，但一般元素节点才使用
		//元素节点打印的元素名称均为大写字母
		//alert(document.body.nodeName);
		
		//var div = document.createElement( 'div' );
		//alert(div.nodeName);
		
		//属性节点与文本节点使用该属性得到什么
		//attriutes[..]
		//var attr1 = document.body.getAttributeNode('itcast');
		//var attr2 = document.body.attributes[0];
		
		//alert (document.body.lastChild.nodeName);
		
		
		//nodeType  节点类型
		//js 高程 dom 节点
		//1元素节点
		//2属性节点
		//3文本节点
		// 11，9 了解一下
		
		//alert(document.nodeType);
		//alert(document.createDocumentFragment().nodeTyoe);
		
		var attr = document.body.getAttributeNode('itcast');
		var body = document.body;
		var txt = document.body.lastChild;
		alert ('属性：' + attr.nodeType + '\n' + 
				'标签：' + body.nodeType + '\n' + 
				'文本：' + txt.nodeType);
		
		};
	</script>
	</head>
	<body>
		你好，我是一个文本节点
	</body>
	
</html>

如何操作节点属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			onload = function () {
				//操作属性节点就是属性的增删改查
				var div = document.querySelectorAll( '#dv' )[0];
				
				//使用setAttribute   添加属性
				//添加自定义， 非标准的属性(DOM-Core)
				div.setAttribute('itcast','传智播客');
				
				//使用 .xxx = vvv  添加属性
				//添加的标准属性（HTML-DOM）
				div.className = 'c';
				
				//第三种（了解）使用DOM节点的方法
				//纯DOM-Core的做法
				var attr = document.createAttribute('test');
				attr.nodeValue = '测试';
				div.setAttributeNode(attr);
				
				
				
				//删除
				var ck = document.querySelectorAll('#ck')[0];
				//ck.removeAttribute( 'checked' );
				//var attr = ck.getAttributeNode('checked');
				//ck.removeAttributeNode( attr );
				
				ck.checked = false;
				//ck.checked = 'abc';//将字符串转到boolean再赋值
				//ck.checked = ''; 先转换成boolean值，在赋值
				//一定要使用true和false
				
				
				
				//修改
				//查询
				
			};
			
			
		</script>
	</head>
	<body>
		<div id = 'dv'></div>
		<input type="checkbox" checked="checked" id = "ck" />
	</body>
</html>

节点操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			/*
			onload = function () {
				
				//需求，创建一个4*3的一个表格table
			function c( tagName ) {
				return document.createElement(tagName);
			}
			
			var table = c('table');
			var tbody = c('tbody');
			table.appendChild( tbody );
			for( var i = 0;i < 4;i++) {
				var tr = c('tr');
				for ( var j =0;j<3;j++) {
					var td = c('td');
					//在td中放置文本
					var txt = document.createTextNode('');
					td.appendChild(txt);
					tr.appendChild(td);
					
					td.width = 200;
					td.height = 50;
					
				}
				tbody.appendChild(tr);
			}
			table.setAttribute('border','1');
			document.body.appendChild(table);
				
			};
			*/
			
			var data = [
				{ name: 'jim1', age: 19, gender: 'male'},
				{ name: 'jim2', age: 29, gender: 'female'},
				{ name: 'jim3', age: 39, gender: 'male'},
				{ name: 'jim4', age: 49, gender: 'male'},
				{ name: 'jim5', age: 59, gender: 'male'}
			
			];
			//创建表格
			//1.创建 table + tbody + thead
			//2.创建 tr + th
			//3.创建每一行的 hr + td
			//4.加到页面中
			
			
			// 1
			var table = document.createElement( 'table' );
			var thead = document.createElement( 'thead' );
			var tbody = document.createElement( 'tbody' );
			table.appendChild( thead );
			table.appendChild( tbody );
			
			// 2 
			var trHead = document.createElement( 'tr' );
			thead.appendChild( trHead );
			
			for ( var k in data[0] ) {
				//k就是th的内容
				var th = document.createElement( 'th' );
				th.appendChild( document.createTextNode( k ) );
				trHead.appendChild( th );
			}
			
			// 3 
//			 for ( var i = 0; i < data.length; i++ ) {
//			 	var tr = document.createElement( 'tr' );
//			 	for ( var k in data[ i ] ) {
//			 		var td = document.createElement( 'td' );
//			 		td.appendChild(document.createTextNode(data[i][k]));
//			 		tr.appendChild(td);
//			
//			 	}
//			 	tbody.appendChild(tr);
//			 }
			
			//table.border = 1;
			
			document.body.appendChild( table );
			
		</script>
	</head>
	<body>
	</body>
</html>

DOM操作绘制表格

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
	<script>
		var data = [
				{ name: 'jim1', age: 19, gender: 'male'},
				{ name: 'jim2', age: 29, gender: 'female'},
				{ name: 'jim3', age: 39, gender: 'male'},
				{ name: 'jim4', age: 49, gender: 'male'},
				{ name: 'jim5', age: 59, gender: 'male'}
			
			];
			//创建表格
			//1.创建 table + tbody + thead
			//2.创建 tr + th
			//3.创建每一行的 hr + td
			//4.加到页面中
			
			
			// 1
			var table = document.createElement( 'table' );
			var thead = document.createElement( 'thead' );
			var tbody = document.createElement( 'tbody' );
			table.appendChild( thead );
			table.appendChild( tbody );
			
			// 2 
			var trHead = document.createElement( 'tr' );
			thead.appendChild( trHead );
			
			for ( var k in data[0] ) {
				//k就是th的内容
				var th = document.createElement( 'th' );
				th.appendChild( document.createTextNode( k ) );
				trHead.appendChild( th );
			}
			
			// 3 
			 for ( var i = 0; i < data.length; i++ ) {
			 	var tr = document.createElement( 'tr' );
			 	for ( var k in data[ i ] ) {
			 		var td = document.createElement( 'td' );
			 		td.appendChild(document.createTextNode(data[i][k]));
			 		tr.appendChild(td);
			
			 	}
			 	tbody.appendChild(tr);
			 }
			
			table.border = 1;
			
			document.body.appendChild( table );
			
	</script>
</html>

wusiye_123456

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM操作

节点属性<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script > onload = function () { //常见的节点属性 // nodeValue 表示节点的值，所有...
复制链接

扫一扫

专栏目录