您的位置：首页 > Web前端 > JavaScript

JavaScript 的 BOM对象与DOM对象

2020-04-26 09:19 218 查看

文章目录

BOM

（Browser Object Model），浏览器对象模型。

1.一次性定时器
setInterval()和setTimeout()的区别：setInterval(表达式，交互时间)；是多次周期内延时；setTimeout(表达式，延迟时间);是延时一次。
方法1：使用setInterval()、clearInterval()

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
var id;
function run1() {
alert("run1");
//只要执行一次run1，清楚对应的定时器
clearInterval(id);
}
id = setInterval("run1()",2000);
</script>
<head>
<body>
</body>
</html>

方法2：使用setTimeout()、clearTimeout()

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function run1() {
alert( "run1");
}
//希望两秒执行一次run1方法
id=setTimeout("run1()",2000);
//			clearTimeout(id);	//解除定时器，不会弹框
</script>
</head>
<body>
</body>
</html>

2.location：返回URL、跳转到指定URL

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
//var  str = location.href;	//获取地址信息
//alert(str);
location.href = "demo1.html";	//跳转到内部HTML
//location.href = "https://www.baidu.com/"; //跳转到外部网络地址
</script>
</head>
<body>
</body>
</html>

DOM

Document Object Model，文档对象模型；
文档：标记型文档（html等）；

DOM是吧文档中的所有内容（标签，文本，属性）都封装成对象，
通过操作对象的属性或方法来达到操作或改变HTML展示效果的目的。

一个html文档最终形成一个DOM对象…

1.getElementById();
——通过元素ID获取对应元素对象
2.getElementsByName();
——通过元素的那么属性获取符合要求的所有元素，若找到获取元素节点对象的数组，若找不到返回空数组
3.getElementByTagName();
——通过元素的元素名属性获取符合要求的所有元素
4.getElementsByClassName();
——通过元素的class属性获取符合要求的所有元素

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<head>
<body>
<input type="text" id="t1" />
<input type="checkbox" name="hobby" value="read"/>
<input type="checkbox" name="hobby" value="code"/>
<input type="checkbox" name="hobby" value="run"/>
<ul>
<li>javaee</li>
<li>android</li>
<li>ios</li>
<li>php</li>
</ul>

<input type="radio" name="sex" value="man" class="h1"/>
<input type="radio" name="sex" value="woman" class="h1"/>
<script>
//！！	1.通过元素id获取对应的元素对象
var t1=document.getElementById("t1");
alert(t1);

//！！	2.t通过name属性获取需要的元素,
//若找到返回元素节点对象的数组，
//若未找到，返回0
var arr2=document.getElementsByName("hobby");
alert("name属性长度为：" +arr2.length)

//！！  3.通过标签名，获取所需要的的元素
var arr3= document.getElementsByTagName("li");
alert("标签元素长度为：" +arr3.length);

//！！	4.通过class属性值，获取所有需要的元素
var arr4 = document.getElementsByClassName("h1");
alert("class元素长度为：" + arr4.length);
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航