JavaScript之DOM的幾個操作
阿新 • • 發佈：2019-01-25
title tag aid innertext tex 返回 seo () back
點擊按鈕禁用文本框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text" value="我是文本框" id="txt"/> <input type="button" value="禁用文本框" id="btn"/> <script> //先根據id獲取按鈕,為按鈕註冊點擊事件,添加事件處理函數 document.getElementById("btn").onclick = function () { //根據id獲取文本框,設置disabled屬性 document.getElementById("txt").disabled = true; }; </script> </body> </html>
阻止超鏈接跳轉
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a href="http://www.baidu.com" id="link">去百度</a> <script> document.getElementById("link").onclick = function () { alert("阻止跳轉"); return false; }; </script> </body> </html>
列表高亮顯示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> ul { list-style-type: none; cursor: pointer; } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <script> //鼠標進入和鼠標離開兩個事件 var list = document.getElementsByTagName("li"); for (var i = 0; i < list.length; i++) { //為li註冊鼠標進入事件 list[i].onmouseover = function () { this.style.backgroundColor = "#ccc"; }; list[i].onmouseout = function () { this.style.backgroundColor = ""; }; } </script> </body> </html>
根據name屬性值來獲取元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" id="btn" value="改變文本"/></br>
<input type="text" name="txt1" value="Hello"/></br>
<input type="text" name="txt2" value="Hello"/></br>
<input type="text" name="txt1" value="Hello"/></br>
<input type="text" name="txt2" value="Hello"/></br>
<input type="text" name="txt1" value="Hello"/></br>
<input type="text" name="txt2" value="Hello"/></br>
<input type="text" name="txt1" value="Hello"/></br>
<script>
document.getElementById("btn").onclick = function () {
var txts = document.getElementsByName("txt1");
for (var i = 0; i < txts.length; i++) {
txts[i].value = "你好";
}
};
</script>
</body>
</html>根據類樣式的名字來獲取元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.color {
background-color: red;
height: 20px;
}
.color2 {
background-color: yellow;
height: 20px;
}
</style>
</head>
<body>
<input type="button" id="btn" value="顯示效果"/></br>
<div class="color2"></div>
<div class="color"></div>
<div class="color2"></div>
<div class="color"></div>
<script>
document.getElementById("btn").onclick = function () {
var divs = document.getElementsByClassName("color");
for (var i = 0; i < divs.length; i++) {
divs[i].style.backgroundColor = "#ccc";
}
};
</script>
</body>
</html>根據選擇器的方式獲取元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.color {
background-color: red;
height: 20px;
}
.color2 {
background-color: yellow;
height: 20px;
}
</style>
</head>
<body>
<input type="button" id="btn" value="顯示效果"/></br>
<div class="color2"></div>
<div class="color"></div>
<div class="color2"></div>
<div class="color"></div>
<script>
document.querySelector("#btn").onclick = function () {
var divs = document.querySelectorAll(".color2");
for (var i = 0; i < divs.length; i++) {
divs[i].style.backgroundColor = "skyblue";
}
};
// 根據選擇器獲取元素,返回來的是一個元素對象
// document.querySelector("選擇器的名字");
// 根據選擇器獲取元素,返回來的是一個偽數組,裏面保存了多個的DOM對象
// document.querySelectorAll("選擇器的名字")
</script>
</body>
</html>div邊框高亮顯示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 150px;
background-color: #cccccc;
float: left;
margin-left: 10px;
border: 2px solid green;
}
</style>
</head>
<body>
<input type="button" id="btn" value="顯示效果"/></br>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
divs[i].onmouseover = function () {
this.style.border = "2px solid red";
};
divs[i].onmouseout = function () {
this.style.border = "";
};
}
</script>
</body>
</html>模擬搜索框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
input {
color: gray;
}
</style>
</head>
<body>
<input type="text" value="請輸入搜索內容" id="search"/>
<script>
//註冊獲取焦點的事件
document.getElementById("search").onfocus = function () {
if (this.value == "請輸入搜索內容") {
this.value = "";
this.style.color = "black";
}
};
document.getElementById("search").onblur = function () {
if (this.value.length == 0) {
this.value = "請輸入搜索內容";
this.style.color = "gray";
}
};
</script>
</body>
</html>根據密碼長度顯示文本框顏色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="password" id="pwd"/>
<script>
document.getElementById("pwd").onblur=function () {
if (this.value.length>0&&this.value.length<=10){
this.style.border="1px solid red";
}else{
this.style.border="1px solid green";
}
};
</script>
</body>
</html>innerText和textContent
//設置標簽中的文本內容,應該使用textContent屬性,谷歌,火狐支持,IE8不支持
//設置標簽中的文本內容,應該使用innerText屬性,谷歌,火狐,IE8都支持
//如果這個屬性在瀏覽器中不支持,那麽這個屬性的類型是undefined
//判斷這個屬性的類型 是不是undefined,就知道瀏覽器是否支持兼容代碼
function setInnerText(element,text) {
if (typeof element.textContent=="undefined"){//不支持textContent
element.innerText=text;
}else{
element.textContent=text;
}
}
//獲取任意標簽中間的文本內容
function getInnerText(element) {
if(typeof element.textContent=="undefined"){
return element.innerText;
}else{
return element.textContent;
}
}innerText和innerHTML的區別
如果使用innerText主要是設置文本的,設置標簽內容,是沒有標簽的效果的
innerHTML主要的作用是在標簽中設置新的html標簽內容,是有標簽效果的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="button" id="btn"/>
<div id="dv"></div>
<script>
document.getElementById("btn").onclick=function () {
//document.getElementById("dv").innerText="<p>我是一個p標簽</p>"
//顯示<p>我是一個p標簽</p>
document.getElementById("dv").innerHTML="<p>我是一個p標簽</p>"
//顯示"我是一個p標簽"
};
</script>
</body>
</html>自定義屬性的設置和獲取
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul {
list-style-type: none;
cursor: pointer;
}
</style>
</head>
<body>
<ul id="u1">
<li>語文成績</li>
<li>數學成績</li>
<li>生物成績</li>
<li>化學成績</li>
</ul>
<script>
var liobj = document.getElementById("u1").getElementsByTagName("li");
for (var i = 0; i < liobj.length; i++) {
//先為每個li添加自定義屬性
liobj[i].setAttribute("score", (i + 1) * 10);
//點擊每個li標簽,顯示對應的自定義屬性值
liobj[i].onclick = function () {
alert(this.getAttribute("score"));
};
}
</script>
</body>
</html>
如果要移除元素的屬性就使用removeAttribute
可以移除元素自帶的屬性，也可以移除自定義的屬性
JavaScript之DOM的幾個操作