html07

最新推荐文章于 2024-10-02 05:39:15 发布

自欺欺人者。

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量134

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45331512/article/details/124471551

版权

1.sum1.getElementsByTagName("li")该方法可以由具体某个元素节点调用，获得的结果是该节点下的所有子节点中节点元素数组

2.document.getElementsByName("ty")根据括号内值值获取元素节点数组

3.document.getElementsByClassName("name")根据class名获取元素数组

4.通过元素节点。属性来获取节点属性值，也可以通过元素节点.value=新值来改变值

5.childnodes-获取某个元素下的所有子节点

6.
document.getElementById("nj").firstChild.nodeValue获取汉字
.firstchild.nodevalue来获取节点的文本内容

7.for循环遍历元素节点数组
	for(var i=0;i<sum.length;i++){
				alert(sum[i].firstChild.nodeValue)
			}

8.创建元素节点
document.createElement(元素名)；
document.createElement("li")

9.citynode.appendChild(li);增加新节点到表格中

10.document.createTextnode(文本内容)--创建文本节点

11.checked属性在js中使用boolean类型表示，选中为true，没选中维false

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
			var sum=document.getElementsByTagName("li");
			// 	alert(sum.length);
			// var sum1=document.getElementById("city");
		 //    var list=sum1.getElementsByTagName("li");
			// 	alert(list.length);	
			// var list=document.getElementsByName("ty");
			// alert(list.length)
			// var list=document.getElementsByClassName("name");
			// alert(list.length);
			// var list=document.getElementById("str");
			// alert(list.value);
			// list.value="hello world";
			// alert(sum1.childNodes.length)
			// var tmp=document.getElementById("0").firstChild.nodeValue;
			// alert(tmp)
			
			var li=document.createElement("li");
			var citynode=document.getElementById("city");
			citynode.appendChild(li);
			var text=document.createTextNode("东京");
			li.appendChild(text);
			}
		</script>
	</head>
	<body>
		<ul id="city">
			<li id="0">南京</li>
			<li id="1">上海</li>
			<li id="2">北京</li>
			<li id="3">天津</li>
		</ul>
		<ul id="game">
			<li id="4">绝对求生</li>
			<li id="5">王者荣耀</li>
			<li id="6">第五人格</li>
			<li id="7">洛克王国</li>
		</ul>
		<br /> 城市<input type="radio" name="ty" value="city" checked="checked"/>
		<br /> 游戏<input type="radio" name="ty" value="game"/>
		<br /> <a href="#" class="name">增加</a>
		<br /> <a href="#" class="name">修改</a>
		<br /> <a href="#" class="name">删除</a>
		<br /> <a href="#" class="name">查询</a>
		<br />
		<input type="text" id="str" value="hello"/>

	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// var btn1=document.
			window.onload=function(){
				var btn1=document.getElementById("btn1");
					btn1.onclick=function(){
					var types=document.getElementsByName("ty");
					for(var i=0;i<types.length;i++){
						alert(types[i].value+"---"+types[i].checked);
					}
				}	
				var btn2=document.getElementById("btn2");
				btn2.onclick=function(){
				var types=document.getElementsByName("ty");
				for(var i=0;i<types.length;i++){
					if(types[i].value=='city')
					types[i].checked=true;
				}
			}	
			var btn3=document.getElementById("btn3");
				btn3.onclick=function(){
				var types=document.getElementsByName("ty");
				for(var i=0;i<types.length;i++){
					if(types[i].value=='game')
					types[i].checked=true;
				}
			}	
	}
	</script>
	</head>
	<body>
		<ul id="city">
			<li id="0">南京</li>
			<li id="1">上海</li>
			<li id="2">北京</li>
			<li id="3">天津</li>
		</ul>
		<ul id="game">
			<li id="4">绝对求生</li>
			<li id="5">王者荣耀</li>
			<li id="6">第五人格</li>
			<li id="7">洛克王国</li>
		</ul>
		<br /> 城市<input type="radio" name="ty" value="city" checked="checked"/>
		<br /> 游戏<input type="radio" name="ty" value="game"/>
		<br />
		<button id="btn1">查看选择情况</button><br />
		<button id="btn2">城市</button><br />
		<button id="btn3">游戏</button><br />
	<!-- 	<br /> <a href="#" class="name">增加</a>
		<br /> <a href="#" class="name">修改</a>
		<br /> <a href="#" class="name">删除</a>
		<br /> <a href="#" class="name">查询</a> -->
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
			var btn2=document.getElementById("btn2");
				btn2.onclick=function(){
				var types=document.getElementsByName("hobby");
				for(var i=0;i<types.length;i++){
					if(types[i].value=='football')
					types[i].checked=!types[i].checked;
				}
			}	
			var btn3=document.getElementById("btn3");
				btn3.onclick=function(){
				var types=document.getElementsByName("hobby");
				for(var i=0;i<types.length;i++){
					if(types[i].value=='badminton')
					types[i].checked=!types[i].checked;
				}
			}	
			var btn4=document.getElementById("btn4");
				btn4.onclick=function(){
				var types=document.getElementsByName("hobby");
				for(var i=0;i<types.length;i++){
					if(types[i].value=='pingpong')
					types[i].checked=!types[i].checked;
				}
			}	
			var btn1=document.getElementById("btn1");
				btn1.onclick=function(){
				var types=document.getElementsByName("hobby");
				for(var i=0;i<types.length;i++){
					if(types[i].value=='basketball')
					types[i].checked=!types[i].checked;
				}
			}
		    var checked=document.getElementById("checked");
		    	checked.onclick=function(){
		    	var types=document.getElementsByName("hobby");
		    	for(var i=0;i<types.length;i++){
					// alert(types[i].checked);
					// if(types[i].checked!=true){
		    		types[i].checked=!types[i].checked;
					// }
		    	}
		    }	
		}
		</script>
	</head>
	<body>
		全选<input type="checkbox" id="checked"/>
		<br />
		篮球<input  type="checkbox" name="hobby" value="basketball"/>
		足球<input  type="checkbox" name="hobby" value="football"/>
		羽毛球<input  type="checkbox" name="hobby" value="badminton"/>
		乒乓球<input  type="checkbox" name="hobby" value="pingpong"/>
		<br /><button id="btn1">篮球</button>
		<button id="btn2">足球</button>
		<button id="btn3">羽毛球</button>
		<button id="btn4">乒乓球</button>
	</body>
</html>