BOM与DOM操作（js的控件增删等绑定方法）

BOM（Browser Object Model）是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”。

DOM （Document Object Model）是指文档对象模型，通过它，可以访问HTML文档的所有元素。

语法可以参考：http://www.cnblogs.com/Dominic-Ji/p/9121560.html
本文主要介绍几个例子。

计时相关

计时器启动以及销毁例子：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<script> 
//		定义一个测试函数
	function func(){
		alert('hello,world!')
	}
//		定义clear函数
	function clear() {
//		把循环计时器对象赋给t，以便于后面用clearInterval清除它。
		let t = setInterval(func,3000);
//		定义一个inner函数，用于终止循环计时器interval工作
		function inner() {
//			终止循环计时器 t
			clearInterval(t);
//			因为t只是被终止了，但是t本身仍旧指向计时器，此处应把它归为null
			t = null;
		}
//		设置inner函数9秒后启动，这是个标准计时器
		setTimeout(inner,9000);
	}
//		启动clear函数
	clear();
	</script>
</head>

<body>

</body>
</html>

DOM（文档对象模型，用于查找对象）

查找标签

直接查找

以下获取的都是一个数组，用在后面加上[0]的话可以取出第一个匹配条件的对象。

document.getElementById 根据ID获取一个标签，获
document.getElementByClassName 根据class属性获取
document.getElementsByTagName  根据标签名获取标签合集

注意：涉及到DOM操作的JS代码应该放在文档的尾部，因为在对element 元素进行操作的时候，对象可能会还没产生，这样会引起报错！！

间接查找

parentElement  父子节点标签元素
childrene   所有子标签
firstElementChild 	第一个子标签元素
lastElementChild  最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSbling  上一个兄弟标签元素

节点操作

案例1：appendchild用法

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>

</head>

<body>
<span id='d1'>我是div上面的id</span>
	<div id='d2' class="c1">
	我是div
		<span id='d3'>我是div里面的第一个span标签</span>
		<p id='d4'>我是div中的span下的p标签</p>
	</div>
	<span id='d5'>我是div下面的span</span>
</body>
	<script> 
//		创建对象
		var imgEle = document.createElement('img');
//		给对象设置属性，可以直接用 对象. 的方式添加
		imgEle.src = '1.jpg';
//		设置自定义对象属性
		imgEle.setAttribute('xxx','111');
//		创建一个变量指向文档中id='d2'的标签
		var d1Ele = document.getElementById('d2');
//		向这个标签中添加刚才创建的图片对象imgEle
		d1Ele.appendChild(imgEle);
		
	</script> 
</html>

例子2：insertBefore用法

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>

</head>

<body>
<span id='d1'>我是div上面的id</span>
	<div id='d2' class="c1">
	我是div
		<span id='d3'>我是div里面的第一个span标签</span>
		<p id='d4'>我是div中的span下的p标签</p>
	</div>
	<span id='d5'>我是div下面的span</span>
</body>
	<script>
		var a1Ele = document.createElement('a');
		a1Ele.href = 'http://www.baidu.com';
		a1Ele.innerText = "this is text  in label-a.v";
		alert(a1Ele);
//		下面要在div下面，p标签前面插入一个a标签。
		var d2Ele = document.getElementById('d2');
		var pEle = document.getElementById('d4');
//		往d2Ele里面添加元素，元素的内容是a标签,元素的位置在P标签前面。
		d2Ele.insertBefore(a1Ele,pEle);

	</script>
</html>

innerText和innerHTML的区别

标签变量在处理标签时,例如<h1>标题<h1>，innerText 的处理结果是<h1>标题<h1>

而 innerHTML的处理结果为

标题

总结：innerHTML可以把给的HTML标签转化为HTML可识别的标识。

获取元素类名，以及remove类用法

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	.red {
		background-color:red;
	}
	.green {
		background-color:green;
	}
	.c1 {
		height:400px;
		width:400px;
		border-radius: 50%;
	}
</style>
</head>

<body>
<div class="c1 red green"></div>
</body>
<script>
	var d1Ele = document.getElementsByClassName('c1')[0];
	alert(d1Ele)
//	删除green类
    d1Ele.classList.remove('green');
// 对比在jQuery中：
// !!!!!!!!!!!!!!!!!!!!!!!!!!
 $d1Ele.removeClass('green')
 // !!!!!!!!!!!!!!!!!!!!!!!!!!
	alert(d1Ele);
//	添加green类
	d1Ele.classList.add('green')
//	返回值为True
	d1Ele.contains('c1')；
//	toggle有这个属性就移除，没有就加上
	d1Ele.toggle('green')
</script>
</html>

JS控件的按钮事件绑定

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>

</head>
<body>
<!--	将方法绑定在函数中-->
	<button onclick='func()'>点我</button>
<!--	将方法与id或类对应，推荐此种-->
	<button id='d1'>点我2</button>
</body>
	<script>
//		将方法绑定在函数中
	function func(){
		alert('!!!!')
	}
//		将方法与id或者类等属性绑定
		let b1 = document.getElementById('d1')
		b1.onclick = function(){
			func();
		}
		
	</script>
</html>

JS代码写在head内的处理方式

在这里插入图片描述

计时器（JS按钮空间的时间绑定）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题</title>

</head>
<body>
<input type="text" id='i1'>
	<button id='b1'>buuton1开始</button>
	<button id='b2'>button2结束</button>
</body>



	<script>
//		定义一个标志位
		let t;
//		获取各个标签的控件信息赋值给变量
		let i1Ele = document.getElementById("i1");
		let b1Ele = document.getElementById("b1");
		let b2Ele = document.getElementById("b2");
		function showtime(){
//			把当地事件作为字符串传入currenttime
			let currentTime = new Date().toLocaleString();
//			input框传入当前时间
			i1Ele.value = currentTime;
		}
		b1Ele.onclick = function(){
			if (!t){
//				启动间隔计时器，来不断刷新文本框内的时间。
				t =setInterval(showtime,1000)
			}
		}

		b2Ele.onclick = function(){
			clearInterval(t);
			t = null;
		}
	</script>
</html>

省市联动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<select name="" id="d1">
    province:
</select>


<select name="" id="d2">
    city:
</select>


<script>
    let data = {"河北省": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]};
    // 先获取省市的select标签对象
    let proEle = document.getElementById('d1');
    let cityEle = document.getElementById('d2');
    // for循环获取省,并动态添加到第一个select框中
    for (let pro in data){
        // 创建option标签
        let opEle = document.createElement('option');
        // 设置文本
        opEle.innerText = pro;
        // 追加到第一个select框中
        proEle.appendChild(opEle)
    }
    proEle.onchange = function () {
        // 获取第一个select框的省信息
        let currentPro = proEle.value;
        // 获取省对应的市信息(数组)
        let aboutCityList = data[currentPro];
        // 先清空第二个select框中的标签
            cityEle.innerHTML = '';
        // for循环市信息
        for (let i=0;i<aboutCityList.length;i++){
            // 获取单独的市
            let currentCity = aboutCityList[i];
            // 动态创建option标签
            let optEle = document.createElement('option');
            // 设置文本值
            optEle.innerText = currentCity;
            // 添加到第二个select框中
            cityEle.appendChild(optEle)
        }
    }
</script>
</body>
</html>

posted @ 2019-04-08 20:27 不会玩python 阅读(6) 评论(0) 收藏举报

刷新页面返回顶部

不会玩python