－.获取元素 改变属性
- 通过id来获取HTML元素
- 通过标签名找到HTML元素
- 通过类名来找到HTML元素
举个🌰
通过<p>标签的id 获取对象 并改变其中的值
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
Text-01
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScriptDOMText</title>
<script>
function demo (){
var p1 = document.getElementById("pid");
p1.textContent = "asdsdsaas";
}
</script>
</head>
<body>
<p id="pid">This p tag,we can changed it</p>
<button onclick="demo()">按钮</button>
</body>
</html>
|
以上是摘要
以下是余下全文
通过标签名查找HTML
HTML 标签顺序执行 自上而下 所以 获取的标签为多个的时候 按照出现顺序查询即可
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
Text-02
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScriptDOMText</title>
<script>
function demo (){
var x= document.getElementById("main");
var y = x.getElementsByTagName("p");
document.write('id 为 "main" 的 div 中的第一段文本是：' + y[0].innerHTML);
}
</script>
</head>
<body id="main">
<p >This p tag,we can changed it sdasasd</p>
<p >This p tag,we can changed it</p>
<p >This p tag,we can changed it</p>
<p >This p tag,we can changed it</p>
<p >This p tag,we can changed it</p>
<button onclick="demo()">按钮</button>
</body>
</html>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
Text-03
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScriptDOMText</title>
<script>
function demo (){
var x= document.getElementById("main");
var y = x.getElementsByTagName("p");
y[0].innerHTML = "good good Study"
y[2].innerHTML = "day day up"
}
</script>
</head>
<body id="main">
<p >This p tag,we can changed it sdasasd</p>
<p >This p tag,we can changed it</p>
<p >This p tag,we can changed it</p>
<p >This p tag,we can changed it</p>
<p >This p tag,we can changed it</p>
<button onclick="demo()">按钮</button>
</body>
</html>
|
综上 我们获取了元素后就可以改变 元素相应的属性 给予新的值
在实际使用中 我们经常需要改变HTML元素的CSS样式 结合Text-03 我们说下如何修改CSS 样式
y[1].style.color = "red";
获取元素并通过style获取属性 并改变字体颜色
工作中 我们经常需要某个元素隐藏或消失
举个🌰：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScriptDOMText</title>
<script>
function demo (){
var x= document.getElementById("main");
var y = x.getElementsByTagName("p");
y[0].innerHTML = "good good Study"
y[2].innerHTML = "day day up"
y[1].style.color = "red";
y[3].style.visibility = "hidden";
|
二.HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。
先看下代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
function goodStudy (id){
id.innerHTML = "good good study day day up";
}
function goodLunck (id){
id.innerHTML = "asdsadasdas"
}
</script>
</head>
<body>
<h1 id="h1" onclick="goodLunck(this)">I can do someting</h1>
<br/>
<button onclick="goodStudy(h1)">按钮</button>
</body>
</html>
|
事件处理调用函数 通过id 获取对象 改变属性
工作中常用事件 ：
-
onload 和 onunload
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。
<body onload="checkCookies()">
-
onchange 事件 当用户改变输入字段的内容时，会调用 upperCase() 函数
<input type="text" id="fname" onchange="upperCase()">
