DOM

最新推荐文章于 2024-02-01 18:17:43 发布

柳LL

最新推荐文章于 2024-02-01 18:17:43 发布

阅读量180

点赞数

本文链接：https://blog.csdn.net/yllmyl/article/details/80849703

版权

1.整体感知

DOM（Document Object Model，文档对象模型）描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。

2 得到元素getElementById

document.getElementById()
document.getElementsByTagName()

现在我们发现，document对象的两个方法getElementById()、getElementsByTagName()

JavaScript通过document对象表示文档，它表示整个页面。它有很多属性和方法，包含了绝大多数多页面的特征和操作。学习DOM，说白了就是学习document对象。

1 <div id="box"></div>

2 <script type="text/javascript">

3 //通过id得到页面中的元素，保存到oBox中，为什么加一个o，习惯

4 //表示这个变量是个对象

5 var oBox = document.getElementById("box");

6 oBox.style.backgroundColor = "red";

</script>

3 更改HTML属性

JS可以更改HTML的任何属性，方法是两种：点语法和 setAttribute()、getAttribute()。

// 获取元素
	var huge = document.getElementById('huge');

	// 取得属性值
	// console.log(huge.src);
	// console.log(huge.getAttribute('src'));
	// console.log(huge.title);
	// console.log(huge.getAttribute('title'));


	// 直接点语法更改属性
	// huge.src = 'img/wyz.jpg';

	// 使用setAttribute更改属性
	// huge.setAttribute('src', 'img/wyz.jpg');


	// 第一 class点语法需要转成className getAttribute不需要转变
	// console.log(huge.class); // undefined
	// console.log(huge.className);
	// console.log(huge.getAttribute('class'));


	// 第二自定义属性点语法获取不到 getAttribute可以获取
	// console.log(huge.haha); // undefined
	// console.log(huge.getAttribute('haha'));

	// 第三点语法.style获取的是对象 .getAttribute('style')获取的是字符串
	console.log(typeof huge.style); // object
	console.log(typeof huge.getAttribute('style')); // string
	console.log(huge.style.width); // 200px

1 getAttribute(); //得到属性

setAttribute(); //设置属性

4 操作元素样式

我们可以通过语法：oBox.style.css样式名得到某一个样式，需要注意的是，所有css中有连字符的样式，都要转成驼峰：

1 console.log(oBox.style.backgroundColor);

2 console.log(oBox.style.borderTopStyle);

也可以通过=来更改css样式，所有更改的样式，也是行内样式。设置的时候，也是驼峰：

1 var oP = document.getElementById("pp");

2 oP.style.backgroundColor = "skyblue";

3 oP.style.fontSize = "100px";

等号右边，就是css的写法，用引号引起来：

1 oP.style.border = "10px solid red";

通过点语法.style读、设都在行内。

5 事件监听

// 获取元素
	var ps0 = document.getElementsByTagName('div')[0].getElementsByTagName('p');
	var ps1 = document.getElementsByTagName('div')[1].getElementsByTagName('p');

	// 批量监听
	for(var i = 0;i < ps0.length;i++){
	// 绑定自定义属性
	ps0[i].idx = i;

	ps0[i].onclick = function(){
	ps1[this.idx].style.background = 'red';
	}
	}

改变盒子的颜色反转

var box = document.getElementsByTagName('div')[0];

	// 声明变量记录当前颜色 0:red 1:blue
	var state = 0;

	box.onclick = function(){
	state = state == 0 ? 1 : 0;
	var nowColor = state == 0 ? 'red' : 'blue';
	box.style.background = nowColor;
	}


	// var state = 'red';

	// box.onclick = function(){
	// if(state == 'red'){
	// box.style.background = 'blue';
	// state = 'blue';
	// }else{
	// box.style.background = 'red';
	// state = 'red';
	// }
	// }

绑定事件


	<script>
	window.onload = function(){
	var box = document.getElementById('box');

	box.onclick = function(){
	console.log('onclick');
	}
	}
	</script>
	</head>
	<body>
	<input type="text" id='ipt'>

	<div id="box">box</div>

	<script>
	var input = document.getElementById('ipt');

	input.onfocus = function(){
	console.log('onfocus');
	}

	input.onblur = function(){
	console.log('onblur');
	}
	</script>

字符串

// 不管中文,英文,数字,空格,标点都算一个长度
	// length:长度
	// charAt(n) : 返回下标为n的字符
	// indexOf() : 查找字符首次出现的位置
	// lastIndexOf(): 查找字符最后出现的位置
	// slice(start,end) 截取字符串 (不能调换顺序)
	// split() 转数组
	// substring(from,to) 截取字符串 (不能使用负值)(可以调换顺序)
	// substr(start,length) 截取字符串(可以使用负值)
	// var str = '楚楚又瘦了都瘦脱相了 haha666!';
	// console.log(str.length);
	// console.log(str.charAt(6));

	// console.log(str.indexOf('楚'));
	// console.log(str.lastIndexOf('楚'));

	// console.log(str.slice(0,5));
	// console.log(str.split(' '));
	// console.log(str.split(''));

	// console.log(str.substring(6,7));
	// console.log(str.substr(6,7));
	// console.log(str.substring(-5));
	// console.log(str.substr(-5));

	// console.log(str.slice(0,5));
	// console.log(str.substring(0,5));
	// console.log(str.slice(5,0));
	// console.log(str.substring(5,0));


	// var newstr = str.concat('都是假的','hahaha');
	// console.log(newstr);

	var str = 'today is a good day!';
	var newstr = str.toUpperCase();
	console.log(newstr);

	var str1 = 'TODAY IS A GOOD DAY!';
	var newstr1 = str1.toLowerCase();
	console.log(newstr1);

onclick 单击

onmouseover 鼠标进入

onmouseout 鼠标离开

ondblclick 双击

onfocus 得到焦点

onblur 失去焦点

onmousedown 鼠标按下

onmouseup 鼠标按键抬起

onload 当页面完全加载成功

window.onload 表示页面中的所有的代码都已经加载完毕了。

柳LL

关注

0
点赞
踩
0

收藏

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

1.整体感知DOM（Document Object Model，文档对象模型）描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。2 得到元素getElementByIddocument.getElementById()document.getElementsByTagName() 现在我们发现，document对象的两个方法getElementById()、getElement...
复制链接

扫一扫