JS-Dom

最新推荐文章于 2024-10-11 17:39:47 发布

一杯甜咖啡

最新推荐文章于 2024-10-11 17:39:47 发布

阅读量121

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/db19981999/article/details/104806104

版权

DOM对象：

概述：
DOM就是把整个html封装成对象，如图：

节点Node:
文档节点：整个html文档
元素节点:各个html标签
属性节点：标签属性
文本节点：html文本内容

var btn=document.getElementById("btn2");//获取到文档元素就能获取整个页面的所有节点属性
btn.onclick=function () {
    alert(1+3);
};
    function fun2(a,b) {
       alert(a+b);
    }

2、各对象及常用方法：
-document对象及方法：
write()----这个向页面输出，就不多讲了
getElementById:通过Id来得到对象，传入标签的Id，得到一个标签的对象：
code：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<input id="Inid" name="Input" value="lalalal">
<script type="text/javascript">
	var Iobject=document.getElementById("Inid");
	alert(Iobject);
	alert(Iobject.value);
</script>
</body>
</html>

-element（元素对象）对象：
首先要获取对象，如上面那样，然后可以使用这些方法获取属性值或者设置值：

getAttribute("<属性名>")	获取元素节点的属性值
setAttribute("<属性名>","<值>")	设置元素节点的属性值

code:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<input id="Inid" name="FirstInput">
<script type="text/javascript">
	var Iobject=document.getElementById("Inid");
	alert(Iobject.name);
	
	Iobject.setAttribute("name","SecondInput");
	alert(Iobject.getAttribute("name"));
</script>
</body>
</html>

-另外，一个是document的方法，但却是唯一用来查找element对象的有效方法—getElementsByTagName():
code：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<ul id="Uid">
	<li>123</li>
	<li>456</li>
	<li>789</li>
</ul>
<script type="text/javascript">
	var l=document.getElementById("Uid");
	var Llist=l.getElementsByTagName("li");
	alert(Llist.length);
</script>
</body>
</html>