DOM编程制获取元素-CFANZ编程社区

根据ID属性获取标签对象：document.getElementById();

<input type="text" id="b">
<button id="a">获取</button>
<script type="text/javascript">
//根据ID属性获取元素
var a = document.getElementById('a');
//点击事件
a.onclick=function(){
var b = document.getElementById('b');
};
</script>

根据标签Name名获取一组标签合集：document.getElementsByTagName();

<h4>根据标签名获取一组标签合集：document.getElementsByTagName();</h4>
	<ul>
		<li>item1</li>
		<li>item2</li>
		<li>item3</li>
		<li>item4</li>
		<li>item5</li>
	</ul>
	<ol>
		<li>item01</li>
		<li>item02</li>
		<li>item03</li>
		<li>item04</li>
		<li>item05</li>
	</ol>
<script type="text/javascript">
		//根据标签名一次性获取一组同类型的标签对象
		var a = document.getElementsByTagName('li');
        //打印所有li中的文本内容
		for(var i = 0;i<oLis.length;i++){
			console.log(oLis[i].innerHTML);//获取文本内容innerHTML
		}
        //获取指定li 根据下标
		var oL = document.getElementsByTagName('li')[0];
	</script>

根据选择器获取标签（单个）document.querySelector('选择器')

<button id="oBtn2">点击获取1</button>
	<button class="oBox">点击获取2</button>
	<button>点击获取3</button>
	<script type="text/javascript">
		var oBtn2 = document.querySelector('#oBtn2');
		console.log(oBtn2);
		var oBox = document.querySelector('.oBox');
		console.log(oBox);
		//如果参数是标签选择器  获取的是页面上的第一个button按钮
		var btn = document.querySelector('button');
		console.log("result = "+btn.innerHTML);
	</script>

根据选择器获取一组元素 document.querySelectorAll()

<input type="checkbox" class = 'oInputs'>
	<input type="checkbox" class = 'oInputs'>
	<input type="checkbox" class = 'oInputs'>
	<input type="checkbox" class = 'oInputs'>
	<input type="checkbox" class = 'oInputs'>
	<script type="text/javascript">
		//根据选择器获取一组元素
		var oInputs = document.querySelectorAll('.oInputs');
		console.log(oInputs.length);

	</script>

控制标签的显示与隐藏 visibility属性

<script type="text/script">
//对于visibility属性以及display属性都需要借助stype属性
a.stype.visibility='hidden';
//visibility隐藏属性时 会占用位置
//控制显示
a.stype.visibility='visible';
</script>

控制标签的显示与隐藏 display属性

不会占用位置

<script type="text/script">
//需要借助stype属性
a.stype.display='none';
//不会占用位置
//控制显示
a.stype.visibility='inline-block';
</script>