变量，获取元素以及操作元素

最新推荐文章于 2023-04-10 21:05:46 发布

a_Joker_Ling

最新推荐文章于 2023-04-10 21:05:46 发布

阅读量421

点赞数

分类专栏： JavaScript Html 文章标签： js javascript python css html5

本文链接：https://blog.csdn.net/a1209849629/article/details/105488667

版权

Html 同时被 2 个专栏收录

33 篇文章 0 订阅

订阅专栏

JavaScript

15 篇文章 1 订阅

订阅专栏

变量

JavaScript 是一种弱类型语言，javascript的变量类型由它的值来决定。定义变量需要用关键字 ‘var’

var iNum = 123;
var sTr = 'asd';
 //同时定义多个变量可以用","隔开，公用一个‘var’关键字

 var iNum = 45,sTr='qwe',sCount='68';

变量类型

5种基本数据类型：
1、number 数字类型
2、string 字符串类型
3、boolean 布尔类型 true 或 false
4、undefined undefined类型，变量声明未初始化，它的值就是undefined
5、null null类型，表示空对象，如果定义的变量将来准备保存对象，可以将变量初始化为null,在页面上获取不到对象，返回的值就是null

1种复合类型：
object

变量、函数、属性、函数参数命名规范

1、区分大小写
2、第一个字符必须是字母、下划线（_）或者美元符号（$）
3、其他字符可以是字母、下划线、美元符或数字

匈牙利命名风格：

对象o Object 比如：oDiv
数组a Array 比如：aItems
字符串s String 比如：sUserName
整数i Integer 比如：iItemCount
布尔值b Boolean 比如：bIsComplete
浮点数f Float 比如：fPrice
函数fn Function 比如：fnHandler
正则表达式re RegExp 比如：reEmailCheck

javascript语句与注释

<script type="text/javascript">    

// 单行注释，语句必须以英文分号；结尾
var iNum = 123;
/*  
    多行注释
    1、...
    2、...
*/
var sTr = 'abc123';
</script>

获取元素方法一

可以使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素，获取到的是一个html对象，然后将它赋值给一个变量，比如：

<script type="text/javascript">
    var oDiv = document.getElementById('div1');
</script>
....
<div id="div1">这是一个div元素</div>

上面的语句，如果把javascript写在元素的上面，就会出错，因为页面上从上往下加载执行的，javascript去页面上获取元素div1的时候，元素div1还没有加载，解决方法有两种：

第一种方法：将javascript放到页面最下边。
第二种方法：将javascript语句放到window.onload触发的函数里面,获取元素的语句会在页面加载完后才执行，就不会出错了。

<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById('div1');
    }
</script>
....

<div id="div1">这是一个div元素</div>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

	<script type="text/javascript">

		window.onload = function(){

			/*
			document.getElementById('div1').style.color = 'red';
			document.getElementById('div1').style.fontSize = '30px'
			
			用变量简化上边的代码：

			*/

			var oDiv = document.getElementById('div1');

			oDiv.style.color = 'red';
			oDiv.style.fontSize = '30px';

		}		


	</script>


</head>
<body>
	<div id="div1">这是一个div元素</div>



</body>
</html>

获取元素方法二

可以使用内置对象document上的getElementsByTagName方法来获取页面上的某一种标签，获取的是一个选择集，不是数组，但是可以用下标的方式操作选择集里面的标签元素。

<script type="text/javascript">
    window.onload = function(){
        var aLi = document.getElementsByTagName('li');
        // aLi.style.backgroundColor = 'gold'; // 出错！不能同时设置多个li
        alert(aLi.length);
        aLi[0].style.backgroundColor = 'gold';
    }
</script>
....
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>通过标签获取元素</title>
	<script type="text/javascript">
		window.onload = function(){

			// 通过标签名称获取li元素，生成一个选择集，赋值给aLi
			var aLi = document.getElementsByTagName('li');

			// 读取选择集内元素的个数
			//alert(aLi.length);  // 弹出13

			var iLen = aLi.length;


			//给一个li设置背景色
			//aLi[0].style.backgroundColor = 'gold';

			// 不能给选择集设置样式属性
			//aLi.style.backgroundColor = 'gold';

			/*
			同时给所有的li加背景色
			for(var i=0;i<iLen;i++)
			{
				aLi[i].style.backgroundColor = 'gold';
			}
			*/


			var oUl = document.getElementById('list1');
			var aLi2 = oUl.getElementsByTagName('li');

			var iLen2 = aLi2.length;

			for(var i=0;i<iLen2;i++)
			{
				if(i%2==0)
				{
					aLi2[i].style.backgroundColor = 'gold';
				}
			}

		}

	</script>
</head>
<body>
	<ul id="list1">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
	</ul>

	<ul id="list2">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
	</ul>
</body>
</html>

操作元素属性

获取的页面元素，就可以对页面元素的属性进行操作，属性的操作包括属性的读和写。

操作属性的方法

1、“.” 操作
2、“[ ]”操作

属性写法

1、html的属性和js里面属性写法一样
2、“class” 属性写成 “className”
3、“style” 属性里面的属性，有横杠的改成驼峰式，比如：“font-size”，改成”style.fontSize”

通过“.”操作属性：

<script type="text/javascript">

    window.onload = function(){
        var oInput = document.getElementById('input1');
        var oA = document.getElementById('link1');
        // 读取属性值
        var sValue = oInput.value;
        var sType = oInput.type;
        var sName = oInput.name;
        var sLinks = oA.href;
        // 写(设置)属性
        oA.style.color = 'red';
        oA.style.fontSize = sValue;
    }

</script>

......

<input type="text" name="setsize" id="input1" value="20px">
<a href="http://www.baidu.com" id="link1">百度网站</a>

通过“[ ]”操作属性：

<script type="text/javascript">

    window.onload = function(){
        var oInput1 = document.getElementById('input1');
        var oInput2 = document.getElementById('input2');
        var oA = document.getElementById('link1');
        // 读取属性
        var sVal1 = oInput1.value;
        var sVal2 = oInput2.value;
        // 写(设置)属性
        // oA.style.val1 = val2; 这一句没有作用
        //属性用变量来代替的话，需要用[]来进行操作
        oA.style[sVal1] = sVal2;        
    }

</script>

......

<input type="text" name="setattr" id="input1" value="fontSize">
<input type="text" name="setnum" id="input2" value="30px">
<a href="http://www.baidu.com" id="link1">百度网址</a>

innerHTML

innerHTML可以读取或者写入标签包裹的内容

<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById('div1');
        //读取元素内的内容
        var sTxt = oDiv.innerHTML;
        alert(sTxt);
        //把内容写入元素内
        oDiv.innerHTML = '<a href="http://www.baidu.com">去百度啊<a/>';
    }
</script>

......

<div id="div1">这是一个div元素</div>

a_Joker_Ling

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
变量，获取元素以及操作元素

变量JavaScript 是一种弱类型语言，javascript的变量类型由它的值来决定。定义变量需要用关键字 ‘var’var iNum = 123;var sTr = 'asd'; //同时定义多个变量可以用","隔开，公用一个‘var’关键字 var iNum = 45,sTr='qwe',sCount='68';变量类型5种基本数据类型：1、number 数字类型2...
复制链接

扫一扫