123-方法调用和元素操作

最新推荐文章于 2024-12-04 22:41:33 发布

原创最新推荐文章于 2024-12-04 22:41:33 发布 · 212 阅读

0 ·

CC 4.0 BY-SA版权

web 同时被 2 个专栏收录

50 篇文章

订阅专栏

30 篇文章

订阅专栏

本文深入讲解JavaScript的基础操作，包括方法调用、变量预解析、函数定义及返回值处理。同时，详细介绍了如何使用getElementById获取页面元素，以及如何通过修改元素属性、class和innerHTML来动态更新网页内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >




js方法调用

<script>

	fnAlert();

	function fnAlert(){
	 alert("hello world")
	};

	fnAlert();

</script>

在前面调用也可以
在后面调用也可以

前面调用叫做 预解析


变量也可以预解析,但是是undefined
alert(iNum)
var iNum=100;
这样的话
打印出来就是undefined

所以一般使用方法的预解析,
变量的预解析就不要用了,也没什么用




函数
function fnAdd(iNum01,iNum02){
	var iRes=iNum01+iNum02;
	return iRes;
}

var iRes=fnAdd(1,2);
alert(iRes);




获取元素方法
使用getElementById方法来获取页面上设置了id的元素
获取到html对象
将这个对象赋值给一个js变量



注意了
<script>
	var oDiv=document.getElementById('div01');
</script>

<div id="div01">abc</div>
如果我们这样写
是不行的
因为文件从上往下读
上面找元素的时候,还没有加载div


如何解决
我们可以把script标签放在body尾部
<body>
	<div></div>
	<script>
	</script>
</body>


第二种方法
<script>
	window.onload=function(){
		document.getElementById
	}
</script>

window.onload的意思就是等窗口加载完毕后
再加载这个方法



操作元素属性
window.onload=function(){
	var oDiv=document.getElementById('div01');

	var sId=oDiv.id;
	
	oDiv.style.color='green';
}
这样就修改了div的color,
也就是修改了字体颜色


window.onload=function(){
	var oDiv=document.getElementById('div01');
	
	oDiv.className='link01';
}
这样的话可以修改div的class
这样的话可以实现div的样式改变




如何修改标签中包裹的内容
window.onload=function(){
	var oDiv=document.getElementById('div01');

	oDiv.innerHTML='新的内容';
}
这样就可以修改标签内的内容

我们还可以试一下增加一个标签进去

window.onload=function(){
	var oDiv=document.getElementById('div01');

	oDiv.innerHTML='
	<a href="http://baidu.com">百度</a>
	';
}
这样的话,
就在里面直接增加了一个a标签




我们再试试
直接增加一个列表
window.onload=function(){
	var oDiv=document.getElementById('div01');

	oDiv.innerHTML='
	<ul>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	';
}