前端基础之《JavaScript（6）—JS DOM对象》

csj50

已于 2022-10-19 09:19:09 修改

阅读量560

点赞数

分类专栏：前端基础文章标签： javascript 前端 html

于 2022-10-13 10:59:24 首次发布

本文链接：https://blog.csdn.net/csj50/article/details/127297285

版权

前端基础专栏收录该内容

55 篇文章 0 订阅

订阅专栏

一、已经用过的js dom对象

document //文档流
document.documentElement //html标签
document.head
document.title
document.body

二、获取元素对象方法

document.getElementById()
document.getElementsByTagName()
document.getElementsByClassName()
document.getElementsByName()

三、元素对象常用属性

<h1 id="hid"><span>test</span></h1>

属性都是可读可写，拿到标签：

var obj=document.getElementById("hid");

obj.id
obj.className
obj.style
obj.title
obj.textContent //获取元素标签内的text内容
obj.innerHTML //获取元素标签内的html内容
obj.outerHTML //获取元素标签外的html内容
obj.tagName //获取元素对象的标签名

获取元素对象的属性：
obj.getAttribute("class");
因为点不包含很多属性

设置元素对象的属性：
obj.setAttribute("class", "hclass");

四、遍历集合对象设置事件

1、objs[i]
获取objs这个集合的属性
注：for循环里i是属性，objs[i]是属性的值

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>document对象属性</title>
<script src="funs.js"></script>
<style>

</style>
</head>

<body>
	<h1>aaa</h1>
	<h1>bbb</h1>
	<h1>ccc</h1>
	<hr/>
</body>

<script>
	var objs=document.getElementsByTagName("h1");
	for(var i in objs){
		document.write("<h2>",i,"===>",objs[i],"</h2>");
	}
	
</script>

</html>

执行结果：
0===>[object HTMLHeadingElement]
1===>[object HTMLHeadingElement]
2===>[object HTMLHeadingElement]
length===>3
item===>function item() { [native code] }
namedItem===>function namedItem() { [native code] }

2、this
遍历数组不要用for in因为它会遍历到对象的其他属性上去

	var objs=document.getElementsByTagName("h1");
	for(var i=0;i<objs.length;i++){
		objs[i].onclick=function(){
				alert(this.innerHTML);
		}
	}

五、文档内常用集合

这些都是元素集合，页面上与生俱来就有

1、forms集合
document.forms

2、elements集合
document.elements

3、options集合
document.options

4、rows集合（表里的行）
document.rows

5、cells集合（行里的格）
document.cells

6、images集合
document.images

7、links集合
document.links

8、anchors集合
document.anchors

9、frames集合
document.frames

10、elements集合.html

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>elements集合</title>
<script src="funs.js"></script>
<style>

</style>
</head>

<body>
	<form style="display:inline">
		请选择水果：
		<br/>
		<select name="s1" id="" size="10" style="width:60px;height:200px;" multiple>
			<option value="苹果">苹果</option>
			<option value="香蕉">香蕉</option>
			<option value="橘子">橘子</option>
			<option value="桃子">桃子</option>
			<option value="西瓜">西瓜</option>
			<option value="香瓜">香瓜</option>
			<option value="葡萄">葡萄</option>
		</select>
	</form>
		<button onclick="sct()">>></button>
	<form style="display:inline">
		<select name="s2" id="" size="10" style="width:60px;height:200px;">
		
		</select>
	</form>
</body>

<script>
	var forms=document.forms;  //两个form表单
	
	function sct(){
		var select=forms[0].elements; //第一个form表单，里面就一个select元素
		var select2=forms[1].elements;
		var opts=select[0].options;  //select元素里面的options
		
		for(var i=0;i<opts.length;i++){
			if (opts[i].selected){ //后面删了，前面人会往上挤
				//alert(opts[i].value);
				//我们要自己创建一个option
				var newopt=document.createElement("option");
				newopt.value=opts[i].value;
				newopt.innerHTML=opts[i].value;
				
				//塞到第二个select里面
				select2[0].add(newopt);
				
				//删除第一个下拉菜单的元素
				select[0].remove(i);
				
				i--; //删除后元素个数变了，要减回去
				
			}
		}
		
	}
</script>

</html>

11、rows和cells集合.html

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>rows和cells集合</title>
<script src="funs.js"></script>
<style>

</style>
</head>

<body>
	<h1 id="hid" class="hcls"><span>test</span></h1>
	<table width="500px" border="1" id="tid">
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</table>
</body>

<script>
	var tabobj=document.getElementById("tid");
	//alert(tabobj.rows.length);
	//alert(tabobj.rows[0].cells.length);
	
	tabobj.insertRow(0); //插入一行
	tabobj.rows[0].insertCell(0); //插入一列
	tabobj.rows[0].insertCell(1);
	tabobj.rows[0].insertCell(2);
	
	tabobj.rows[0].cells[0].innerHTML="aaa";
	tabobj.rows[0].cells[1].innerHTML="bbb";
	tabobj.rows[0].cells[2].innerHTML="ccc";
</script>

</html>

csj50

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端基础之《JavaScript（6）—JS DOM对象》

document.documentElement //html标签。obj.textContent //获取元素标签内的text内容。obj.innerHTML //获取元素标签内的html内容。obj.outerHTML //获取元素标签外的html内容。obj.tagName //获取元素对象的标签名。document //文档流。一、已经用过的js dom对象。二、获取元素对象方法。三、元素对象常用属性。因为点不包含很多属性。
复制链接

扫一扫