JavaScript查找元素

查找元素

W3C为我们提供了比较方便的定位节点的方法和属性，以便我们快速的对节点进行操作。分别为：

方法	说明
getElementById()	获取去特定ID元素的节点
getElementByTagName()	获取相同元素的节点列表
getElementByName()	获取相同名称的节点列表
geAttribute()	获取特定元素节点属性的值
setAttribute()	设置特定元素节点属性的值
removeAttribute()	移除特定元素节点属性

getElementById()
getElementById()方法，接受一个参数：获取元素的 ID。如果找到相应的元素则返回该元素的 HTMLDivElement 对象，如果不存在，则返回 null。
document.getElementById(‘box’); //获取 id 为 box 的元素节点
PS：上面的例子，默认情况返回 null，这无关是否存在 id="box"的标签，而是执行顺序问题。解决方法，1.把 script 调用标签移到 html 末尾即可；2.使用 onload 事件来处理 JS，等待 html 加载完毕再加载 onload 事件里的 JS。
window.onload = function () { //预加载 html 后执行
document.getElementById(‘box’);
}；

当我们通过 getElementById()获取到特定元素节点时，这个节点对象就被我们获取到了，而通过这个节点对象，我们可以访问它的一系列属性

<div class="odiv1" id="box" title="标题属性值">元素节点里的内容</div>

document.getElementById('box').tagName;	// 获取元素节点的标签名
document.getElementById('box').innerHTML;	// 获取元素节点里的内容，非 W3C DOM 规范
/*注意，当使用innerHTML="<h1>123</h1>"*/改变元素节点内容插入标签时，innerHTML属性会解析标签，网页上会显示h1级别的123
/*也可以使用innerTEXT="<h1>123</h1>"*/在内容中写入标签，但是innerTEXT不会解释标签，他会在网页中原样显示<h1>123</h1>

document.getElementById('box').id;					//获取 id 
document.getElementById('box').style;				//获CSS StyleDeclaration 对象
document.getElementById('box').style.color;		//获取 style 对象中 color 的值
document.getElementById('box').className;			// 获 取 class
document.getElementById('box).style.color="red";			// 以上所有值都可以修改

getElementByTagName()
getElementsByTagName()方法将返回一个对象数组 HTMLCollection(NodeList)，这个数组保存着所有相同元素名的节点列表。

document.getElementsByTagName("*");			// 获取所有元素；
document.getElementsByTagName("li");			//获取所有的 li 标签
document.getElementsByTagName("li")[0];			// 获取第一个li标签

getElementsByName()
getElementsByName()方法可以获取相同name的元素，返回一个对象数组

document.getElementByName("add");			获取name属性值为add的元素

getAttribute()获取元素中某个属性的值

document.getElementById('box').getAttribute('id');//获取元素的 id 值
document.getElementById('box').id;	//获取元素的 id 值

document.getElementById('box').getAttribute('mydiv');//获取元素的自定义属性值document.getElementById('box').mydiv

removeAttribute()移除属性

document.getElementById("box").removeAttribute("value");

鼠标移入，移出控制

.button{
	height: 20px;
	heigh: 20px;
	border: 1px solid black;
}
.odiv1{
	height: 100px;
	width: 100px;
	background: yellow;
	display: none;
}
// 首先让#event隐藏，当鼠标移入button按钮时，onmouseover属性值内的"event2.style.display="block"可以让#event显示出来
// onmouseout鼠标移出按钮时又会让#event2-"event2.style.display="block"隐藏
<button class="button" id="event1" onmouseover="event2.style.display='block';"
        onmouseout="event2.style.display='none'">登陆</button>
<div class="odiv1" id="event2">鼠标移入后显示的效果</div>

使用函数做鼠标的移入移出

.odiv1{
            height: 200px;
            width: 200px;
            background: red;
        }
<div class="odiv1" id="box1" onmouseover="toGreen()" onmouseout="toRed()"></div>
<script>
/*使用function 函数名()定义函数*/
     function toGreen(){
     /*可以将重复的代码放在一个变量中，这个变量只能在这个函数的作用域中使用*/
         var arg = document.getElementById('box1');
         arg.style.height='300px';
         arg.style.width='300px';
         arg.style.background='green';
     }
     function toRed(){
         var arg = document.getElementById('box1');
         arg.style.height='200px';
         arg.style.width='200px';
         arg.style.background='red';
     }
 </script>

查找元素

猜你喜欢