原生js操作dom

最新推荐文章于 2024-10-03 00:49:38 发布

原创最新推荐文章于 2024-10-03 00:49:38 发布 · 309 阅读

0 ·

CC 4.0 BY-SA版权

DOM 专栏收录该内容

3 篇文章

订阅专栏

js一共分为三个部分，分别是ECMAScript，DOM ， BOM。

一，常用的DOM的API

分别有通过id获取标签,通过class获取标签,通过name获取标签,通过标签名获取标签,一般来说都是通过标签名来获取标签
代码展示:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<div id="divs"><div>
	<span class="spans"></span>
	<a></a>
	<input type="text" name="aa">
	<script type="text/javascript">
		var divs = document.getElementById('divs');
		var spans = document.getElementsByClassName('spans');
		var a = document.getElementsByTagName('a');
		var aa = document.getElementsByName('aa');
	</script>
</body>
</html>

二，事件类型

// unload:事件在用户退出页面时发生

　　　　window.onload = function(){

　　　　　　return "页面关闭!";

　　　　};

// onblur:失去焦点发生变化

　　　　window.onblur = function(){

　　　　　　inp.value = inp.value.toUppercase();

　　　　};

// onfocus:点击文本框会获得焦点发生

　　　　inp.focus = function(){

　　　　　　alert('弹出的内容');

　　　　};

// onselect:要选中文本框中的内容会执行的事件

　　　　inp.onselect = function(){

　　　　　　alert('要执行的内容');

　　　　};

// onchange:事件会在域的内容发生改变时发生

　　　　inp.onchange = function(){

　　　　　　alert('要执行的内容');

　　　　};

// onreset:当点击重置的时候才会发生

　　　　form.onreset = function(){

　　　　　　//点击重置,是form;

　　　　};

// onsumbit:点击提交 

　　　　form.onsumbit = function(){

　　　　　　alert('要执行的内容');

　　　　};

// onresize:当窗口发生大小变换的时候就会执行

　　　　window.onresize = function(){

　　　　　　alert('要执行的内容');

　　　　};

// scrollBy、scrollTo:相对于自己之前的位置发生偏移,一个x一个y轴为参数

　　　　function scroll(){

　　　　　　window.scrollBy(100,100);

　　　　　　window.scrollTo(100,100);//绝对，固定

　　　　};

// ondbclick:双击发生变化

　　　　inp.ondbclick = function(){

　　　　　　inp.value = "我双击了"；

　　　　}；

// onclick:点击发生变化

　　　　inp.onclick = function(){

　　　　　　inp.value = "我点击了"；

　　　　}；

// onmouseover:鼠标经过会发生变化，类似hover效果

　　　　inp.onmouseover = function(){

　　　　　　inp.value = "我鼠标滑过了"；

　　　　}；

// onmouseout:鼠标移除会发生变化

　　　　inp.onmouseout = function(){

　　　　　　inp.value = "我鼠标移除来了了"；

　　　　}；

// onmousedown:鼠标按键按下去会发生变化

　　　　inp.onmousedown = function(){

　　　　　　inp.value = "我鼠标按下来了"；

　　　　}；

// onmouseup:按键按下去并释放松开会发生变化

　　　　inp.onmouseup = function(){

　　　　　　inp.value = "我鼠标按下并释放了"；

　　　　}；

// onkeydown:按下键盘去会发生变化

　　　　inp.onkeydown = function(){

　　　　　　inp.value = "我按下键盘了"；

　　　　}；

// onkeyup:按下键盘去会发生变化

　　　　inp.onkeyup = function(){

　　　　　　inp.value = "我松开键盘了"；

　　　　}；

三，创建

一，添加
appendChild
二，替换
replaceChild

四，封装函数 insertAtfer()。功能类似insertBefore() 写在原型上


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!-- 封装函数 insertAtfer()。功能类似insertBefore()  写在原型上 -->
	<div>
		<span></span>
		<i></i>
		<a></a>
		<sub></sub>
	</div>
	<script type="text/javascript">
		Element.prototype.insertAtfer = function (add , index){
           var adds = add.nextElementSibling;
           if(adds == null){
           	 add.appendChild(add);
           }else{
           	 add.insertBefore(add,index);
           }
		}
		var spans = document.getElementsByTagName('span')[0];
		var is = document.getElementsByTagName('i')[0];
        var divs = document.getElementsByTagName('div')[0];
        var b = document.createElement('b');
	</script>
</body>
</html>