html中js 代码书写问题

  1. 节点及其类型:
    1). 元素节点
    2). 属性节点: 元素的属性, 可以直接通过属性的方式来操作.
    3). 文本节点: 是元素节点的子节点, 其内容为文本.

  2. 在 html 文档的什么位置编写 js 代码?

    0). 直接在 html 页面中书写代码.

     	<button id="button" onclick="alert('hello world');">Click Me!</button>
    

    缺点:
    ①. js 和 html 强耦合, 不利用代码的维护
    ②. 若 click 相应函数是比较复杂的, 则需要先定义一个函数, 然后再在 onclick 属性中完成对函数的引用, 比较麻烦

    1). 一般地, 不能在 body 节点之前来直接获取 body 内的节点, 因为此时 html 文档树还没有加载完成,
    获取不到指定的节点:

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<script type="text/javascript">
			var cityNode = document.getElementById("city");
			//打印结果为 null.
			alert(cityNode);
		</script>
	</head>
	<body>
	......

2). 可以在整个 html 文档的最后编写类似代码, 但这不符合习惯

3). 一般地, 在 body 节点之前编写 js 代码, 但需要利用 window.onload 事件, 
该事件在当前文档完全加载之后被触发, 所以其中的代码可以获取到当前文档的任何节点.

	    <head>
			<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
			<title>Untitled Document</title>
			<script type="text/javascript">
				window.onload = function(){
					var cityNode = document.getElementById("city");
					alert(cityNode);
				};
			</script>
		</head>
		<body>
		......
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值