DOM 理解以及操作

最新推荐文章于 2022-01-19 13:21:45 发布

和东同学

最新推荐文章于 2022-01-19 13:21:45 发布

阅读量753

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/nglasds/article/details/110833484

版权

理解DOM

Dom是什么，在查阅了大量的资料后，总结自己问题，得出了结论，列出乳腺问题和对应的思考解答。（个人）

问题：dom是一个服务吗？dom在客户端还是服务端？dom与javascript和html的关系是怎样的？

1、首先dom它不是一个服务，特意找的windows服务看里一眼。
2、客户端和服务端其实没什么区别，客户端有的东西难道服务端会没
有吗要不然怎么进行沟通当时想瞎想的😁。
3、最后Javascript与Dom本身没什么关系的，DOM并不是JavaScr
ipt规范中的一部分，只是浏览器提供了Dom这个API，使得其他语言
可以通过这个API去操作dom所以浏览器会将DOM转换成Javascript
对象，通过(^接口^)的形式提供给Javascript使用

DOM是什么？

1、通过查找资料加上自己的理解dom是浏览器的一个功能（浏览器是下载的如google，ie等通过tmd服务器下载所以会有tmd功能），通过浏览器的专用的服务器在http通讯协议的基础上（http通讯协议建立在tcp/ip的基础之上）将客户端请求到的代码传递到客户端的浏览器之上，html页面代码则通过dom解析成dom树再以文档流的规则（什么块级元素行内元素）排列，布局渲染效果到客户端的浏览器之上，dom树🌲存储在内存当中。

2、联系上一串问题便可理解。
上面👆提到了接口接口是什么英文（API）是一个接收数据的路由个人理解在DOM对象模型接口规范中，有四个基本的接口：Document，Node，NodeList以及NamedNodeMap。

DOM的一系列操作

1⃣️内置函数（文档就绪函数）

<head>
	<meta charset='utf-8'>
	<title>获取元素</title>
	<script>
	// 1.文档就绪函数，当整个页面加载✅完成之后，在执行js代码
	window.onload = functin(){
		var div = document.getElementById('d1');
		console.log(div) // 在控制台上输出当前内容
	</script>
</head>

2⃣️设置（style）样式

<head>
	<meta charset='utf-8'>
	<title>获取元素</title>
<body>
	<div id='d1'> 我是div</div>
</body>
<script>
	window.onload = functin(){
	// 首先获取div对象 id等于d1的标签
	var div = document.getElementById('d1');
	console.log(div)  // 打印当前对象
	div.style.color = 'red';  // 将div对象进行样式的赋值
	div.style.backgroundColor = 'blue'; // 将div对象进行背景颜色的赋值
	}
</script>
</head>

// 隔行变色案例
<head>
	<meta charset='utf-8'>
	<title>获取元素</title>
<body>
	<ul>
		<li>🌈红色</li>
		<li>黄色</li>
		<li>你看啥sai儿2⃣️</li>
		<li>你看啥塞儿</li>
	</ul>
</body>
<script>
	window.onload = functin(){
		// 首先获取li对象
		var list = document.getElementsByTagName('li');
		// 其次 设置样式
		for (var i=0; i<list.length; i++){
			if (i%2 == 0){
			list[i].style.backgroundColor = 'red';
			}else{
				list[i].style.backgroundColor = 'yellow';
			}
		}
	}
</script>
</head>

3⃣️属性（class）操作

<head>
	<meta charset='utf-8'>
	<title>获取元素</title>
<body>
	<div id='d1' class='c1' > 我是div</div>
	<span>标签🏷️</span>
</body>
<script>
	window.onload = functin(){
	// 首先获取div对象 id等于d1的标签
	var div = document.getElementById('d1');
	// 操作一 hasAttribute: 是否有🈯️定属性没有返回false 否则True
	var b = div.hasAttribute('class')
	// 操作二 如果用的是获取标签那么就要指明是第几个标签 否则则会在显示 unidfind未找到
	var span = document.getElementsByTagName('span')[0];
	var b = span.hasAttribute(); // false 
	// 操作三 设置属性 
	div.setAttribute('style', 'color:red;'); 
	div.style.color = 'green';
	// 设置style属性，值为‘color:red;'（方法方式） 或者用属性方式
	// 操作四 获取属性
	var attrValue = div.getAttribute('class');
	console.log(attrValue);  //c1
	// 操作五 删除属性
	div.removeAttribute('class')
	}
</script>
</head>

4⃣️文本操作

<head>
	<meta charset='utf-8'>
	<title>获取元素</title>
<body>
	<div id='d1' > hello word（你好世界）</div>
</body>
<script>
	window.onload = functin(){
	// 首先获取div对象 id等于d1的标签
	var div = document.getElementById('d1');
	// 操作一 innerText ：表示获取元素中的内容
	var content = div.innerText;
	// 操作二 innerText=值； 表示设置元素中的内容。
	div.innerText = 'hello world';
	
	// 操作三 innerHTML 既可以展示文本内容也可展示标签内容
	var content = div.innerHTML;
	div.innerHTML = '<span style='color:red;'>我是span</span>;
	div.innerHTML = '我是span‘；
	}
</script>
</head>

5⃣️元素操作

<head>
	<meta charset='utf-8'>
	<title>获取元素</title>
<body>
	<div id='d1' > 我种地 </div>
	<div class='c1'> 我是div</div>
	<div id='d2'>
		<div>我是div1</div>
		<div>我是div2</div>
	</div>
</body>
<script>
	window.onload = functin(){
	// 操作一 奥力给⛽️
	// 首先获取div对象 id等于d1的标签
	var div = document.getElementById('d1');
	// 首先创建元素
	var p = document.createElement('p');
	// 其次才是创建内容
	var p_content = document.createTextNode('我是p标签当🀄️的内容；
	// 最后才是将内容添加到标签当中
	p.appentChild(p_content);
	div.appendChild(p_content); // 在已有的标签后填入内容
	
	// 操作二儿 克隆元素 ⛽️
	var div = document.getElemensByClassName('c1')[0];
	var div1 = div.cloneNode(true); // 克隆
	// 获取目标元素
	var div2 = document.getElementById('d1')
	div2.appendChild(div1);  // 在种地不是当中而是在它下面添加克隆节点
	// 删除元素
	var div = document.getElementById('d2');
	console.log(div)
	var allChild = div.childNodes;
	console.log(allChild); // [text, div, text, div ,text] 
	// 打印所有占地方的东西 空白是text一个div是一个div
	//eg： <div>1</div> ... <div>2</div> 三个点在这里代表空格或者是换行都可以
	// 空格或者换行就算一个东西 在这里按text算🧄
	var resultDiv = allChild[1];
	div.removeChild(resultDiv);
	}
</script>

6⃣️事件操作

6.1、onclick 事件 onclick：点击事件，当出发了点击操作，就执行onclick中的js代码 ⚠️ 不仅仅🔘按钮能设置，其他的标签也可以设置，但是一般情况下给按钮设置点击事件居多。

<head>
	<meta charset='utf-8'>
	<title>获取元素</title>
<body>
	<input type='button' value='我是🔘按钮‘ οnclick="alert('我是弹框 ao力给吧一起')">
	<div onclick='alert("我是div🀄️的弹框奥力给..");'>我是div</div>
	<div id='d1'>我是div2</div>
	<ul>
		<li> DNF </li>
		<li> CF </li>
		<li> LOL </li>
	</ul>
</body>
<script>
	window.onload = functin(){
		// 首先获取div对象 id等于d1的标签
		var div = document.getElementById('d1');
		div.onclick = function(){
			alert('我是div2ao力给');
			}
		// 案例: 给每一个li设置点击的事件
		var list = document.getElementsByTagName('li');
		for (var i=0; i<list.length; i++) {
			list[i].onclick = function(){
			// this 表示当前对象 因为事件具有不确定性
	//  所以for 指向的是最后一个 so 要用到this
			var content = this.innerText;
			alert(conetn);
			}
		}
	}
</script>

6.2、 onblur事件（失去焦点） onfocus事件（获得焦点）

<head>
	<meta charset='utf-8'>
	<title>获取元素</title>
<body>
	<p>
		用户名： <input id='username' type='text' placeholder='用户名‘>
	</p>
	<p>
		密码： <input id='password' type='password' placeholder='密码‘>
	</p>
</body>
<script>
	window.onload = functin(){
		// 失去焦点事件
		var move = document.getElementById("username");
		move.onblur = function(){
			console.log('Im 失去了焦点');
			};
		move.onfocus = function(){
			console.log('我是获取了焦点..');
			};
			
	}
</script>
</head>

6.3、键盘事件

<head>
	<meta charset='utf-8'>
	<title>获取元素</title>
<body>
	<p>
		<input type='text' id='jb' placeholder='请输入内容'>
	</p>
</body>
<script>
	window.onload = functin(){
		// ⌨️键盘事件
		var gan = document.getElementById('jb');
		// duang ⌨️键盘按下是触发此函数
		gan.onkeydown = function(event){
			console.log('我被按下了...');
			console.log(event.key);
			};
	}
</script>
</head>

7⃣️定时器（下期预告：–之「定时炸弹」）

7.1、计时器

<html>
<body>
	<button id='btn'>我是🔘按钮</button>
	<br/>
	<img id='d1' src='image/1.png' alt='' width='200px' height='100px';>
</body>
<script>
// 1、设置计数器
// 第一个参数：执行的内容
// 第二个参数：时间间隔，单位是毫秒， 1s=1000毫秒（ms）
var interval = setInterval(function(){
	console.log('我是计数器...');
	var img = document.getElementById('d1');
	img.setAttribute('src', 'image/aoligei.png');
	}; 1000);
	}
var btn = document.getElementById('btn');
btn.onclick = functin(){
	// 停止🤚
	clearInterval(interval);
	};
</html>

7.2、不太常用的延时器

<script>
	// 隔制定时间后执行一次函数
	var timeout = setTimeout(function(){
		alert('我是弹框');
		}, 2000);
	// 清空延时器
	clearTimeout(timeout);

8⃣️数组

// 1 语法 、new + 对象
// 通常情况下， 放一种数据类型。
// 当保存多个相同数据类型的值的时候，放到数组🀄️	
<script>
	var team = new Array('zs', 18, '男');
	console.log(team);
	console.log(arr.length);
	console.log(arr[0]);
	// 直接创建
	team_one = ['奥力给', '德鲁大叔‘, ‘朝阳冬泳', '怪鸽'];
	console.log(team_one.length)
	for (var i=0; i<team_one.length; i++){
		console.log(team_one[i])
		}
	for (var i in team_one){
		console.log(i, team_one[i]);
		}
	// 增加数据
	team_one.push('尼古拉斯东少'); // 在末尾增加
	console.log(team_one);
	team_one.unshift('尼古拉斯舞王‘）； // 在开头增加
	// 获取数据 通过索引
	console.log(team_one[0]);  // 通过索引
	// 删除数据
	team_one.pop()  // 弹出数组当🀄️的最后一个
	team_one.shift(); // 删除最开始位置元素
	team_one.splice(1, 1, 'a', 'b', 'c');
	// 第一个参数： 开始替换的索引位置
	// 第二个参数： 从开始替换的索引位置开始计算往后依次替换的个数
	// 第三个参数：‘a'，’b'，‘c' 表示新增的元素

	// 数组中保存函数
	var team_jjb = [
		function(a,b){
			console.log(a+b);
			},
		function(a,b){
			console.log(a-b)
			}
		];
		// 调用函数
		team_jjb[0](10, 5);
</script>

9⃣️数学对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数学对象</title>
</head>
<body>

</body>
<script>
    window.onload = function () {
        console.log(Math.round(3.4));// 四舍五入
        console.log(Math.floor(-3.8));// 向下取整
        console.log(Math.ceil(-3.1)); // 向上取整
        console.log(Math.max(1, 2, 3, 5, 6, 7));// 取最大值。
        console.log(Math.min(1, 2, 3, 4, 5, 6)); // 最小值
        console.log(Math.abs(-123));// 绝对值
        console.log(Math.random());// 随机小时 （0~1）
        console.log(Math.random() * 10);// 随机小时 （0~10）
        console.log(Math.pow(2, 3));// 2的3次方
        console.log(Math.sqrt(9));// 开平方
    }

</script>
</html>

🔟js正则

10.1、正则表达式用来匹配符合某个语法的字符串。

<script>
	window.onload = function(){
	// 1、创建正则表达式
	// 方式一：new RegExp（正则表达式）
	var str_one = 'jjb';
	console.log(reg.test(str_one)); 
	// test()是测试方法，有则🔙返回True，否则False。
	
	// 方式二： /正则表达式/
	var alg = /JJB/;
	var str_two = 'JB';
	console.log(str_two.test(str_two));
</script>

// 转义字符
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title></title>
</head>
<body>


</body>
<script>
    window.onload = function(){
        
        var rge = /\w/;  // 匹配数字字母下划线 ☝️一个
        var str_three = 'A#@_!';
        console.log(rge.test(str_three));  // true


    }
</script>
</html>

--------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title></title>
</head>
<body>


</body>
<script>
    window.onload = function(){

        // 元字符
        var rgx = /./; // 匹配任意字符串(除去换行)
        var str = 'abc';
        console.log(rgx.test(str)); // true 

		var rgx1 = /z*/; // * 出现0次或者多次 z*
        var str1 = 'a';
        console.log(rgx1.test(str1)); // true
        
        var rgx2 = /z+/; // + 表示出现一次或者多次
        var str2 = 'azzzz';
        console.log(rgx2.test(str2));  // true
        
        var rgx3 = /z+?/;// 禁止贪婪匹配
        var str3 = 'abzzzz';
        console.log(rgx3.exec(str3));  // Array(1)
        // Array(1)
		// 0: "z"
		// groups: undefined
		// index: 2
		// input: "abzzzz"
		// length: 1
		// __proto__: Array(0)
		
        var rgx4 = /z{2}/; // z 必须连续出现2次
        var str4 = 'azbz';
        console.log(rgx4.test(str4));  // false

        var rgx5 = /z{2,4}/; // z 必须连续出现2到4次
        var str5 = 'azbz';
        console.log(rgx5.test(str5));  // false 

        var rgx6 = /[0-9]/; // 0-9 出现一次
        var str6 = 'azb1z';
        console.log(rgx6.test(str6));  // true

    }
</script>
</html>
// end
---------------------------------------------------------

11 时间对象

<script>

    var d = new Date();
    console.log(d);// Mon Dec 07 2020 14:58:04 GMT+0800 (中国标准时间)
    console.log(d.toLocaleString()); // 2020/12/7 下午3:01:14
    console.log(d.getTime())// 1607324517490 时间戳
    console.log(d.getFullYear());// 年
    console.log(d.getMonth() + 1); // 月，少一个月
    console.log(d.getDate());// 日
    console.log(d.getHours());
    console.log(d.getMinutes());
    console.log(d.getSeconds());
    console.log(d.getMilliseconds());// 毫秒
    
</script>

和东同学

关注

0
点赞
踩
1

收藏

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

理解DOMDom是什么，在查阅了大量的资料后，总结自己问题，得出了结论，列出乳腺问题和对应的思考解答。（个人）问题：dom是一个服务吗？dom在客户端还是服务端？dom与javascript和html的关系是怎样的？1、首先dom它不是一个服务，特意找的windows服务看里一眼。2、客户端和服务端其实没什么区别，客户端有的东西难道服务端会没有吗要不然怎么进行沟通当时想瞎想的????。3、最后Javascript与Dom本身没什么关系的，DOM并不是JavaScript规范中的一部分，只是浏览
复制链接

扫一扫