根据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>