前端三贱客 -- JavaScript中的DOM元素
2021-02-16 12:17
标签：元素 asd mode z-index clear 接口 user classname 下拉框 文档对象模型（Document Object Model，DOM）是一种用于HTML编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。DOM相当于是一个模块，提供了关于HTML文档中对标签进行操作的功能，JavaScript结合DOM可以对HTML中的标签进行操作。可以把DOM看做是一张映射表，记录着一堆用代码操控document时的规章制度，直白点说，就是js操作html时的API。 DOM中提供了一系列的选择器用于在HTML文档中找到指定的相关标签对象。 示例一： 示例二： 对标签内部文本进行操作时，可以通过 innerText 和 innerHTML来进行。 标签对象.innerText，读取标签内容（仅文本）。 标签对象.innerHTML，读取标签内容（含标签）。 示例三DOM选择器
直接查找
1 document.getElementById(arg) // 根据ID获取一个标签对象
2 document.getElementsByClassName(arg) // 根据class属性获取标签对象集合
3 document.getElementsByName(arg) // 根据name属性值获取标签对象集合
4 document.getElementsByTagName(arg) // 根据标签名获取标签对象集合
1 DOCTYPE html>
2 html>
3 head>
4 title>Dom Testtitle>
5 style type="text/css">
6 .c1{
7 background-color: red;
8 width: 400px;
9 height: 200px;
10 }
11 .c2{
12 font-size: 20px;
13 color: white;
14 text-align: center;
15 line-height: 200px;
16 }
17 style>
18 head>
19 body>
20 input type="text" name="username" id="id1" size="20">br>
21 input type="text" name="username" size="20">br>
22 input type="text" name="username" size="20">br>
23 div id="i2">this is a divdiv>
24 a href="">111a>
25 a href="">222a>
26 div class="c1 c2">Hello Kugou!div>
27 input type="button" onclick="func1()" value="点我getElementById">
28 input type="button" onclick="func2()" value="点我getElementsByName">
29 input type="button" onclick="func3()" value="点我change div value">
30 input type="button" onclick="func4()" value="点我getElementsByTagName">
31 input type="button" onclick="func5()" value="点我getElementsByClassName">
32 script type="text/javascript">
33 function func1(){
34 var username_id = document.getElementById("id1");
35 console.log(username_id.value);
36 alert(username_id.value);
37 }
38 function func2(){
39 var username = document.getElementsByName("username");
40 for(var i=0;i username.length;i++){
41 console.log(username[i].value);
42 alert(username[i].value)
43 }
44 }
45 function func3(){
46 var x = document.getElementById("i2");
47 x.innerText="Hello Kugou!";
48 }
49 function func4(){
50 /* body... */
51 var a_list=document.getElementsByTagName("a");
52 for (var i = 0;ia_list.length;i++){
53 var var1 = a_list[i].innerText;
54 a_list[i].innerText=var1 + "AAA";
55 }
56 }
57 function func5(){
58 var var_sty = document.getElementsByClassName("c1");
59 console.log(var_sty);
60 var_sty[0].style.backgroundColor = ‘#00ff00‘;
61 }
62 script>
63 body>
64 html>
间接查找
1 var tag = document.getElementById(arg);
2 tag.parentElement // 找当前标签对象的父标签对象
3 tag.children // 找当前标签对象的所有子标签对象
4 tag.firstElementChild // 找当前标签对象的第一个子标签对象
5 tag.lastElementChild // 找当前标签对象最后一个子标签对象
6 tag.nextElementtSibling // 找当前标签对象下一个兄弟标签对象
7 tag.previousElementSibling // 找当前标签对象上一个兄弟标签对象
1 head>
2 title>title>
3 style type="text/css">
4 table {
5 /* border: 1px solid; */
6 border-collapse: collapse;
7 }
8
9 table th, table td{
10 border: 1px solid;
11 padding : 8px;
12 }
13 table th {
14 font-weight: bold;
15 }
16 style>
17 head>
18 body>
19 table>
20 thead>
21 tr>
22 th>主机ipth>
23 th>端口号th>
24 th>备注th>
25 th>操作th>
26 tr>
27 thead>
28 tbody>
29 tr>
30 td>1.1.1.1td>
31 td>80td>
32 td>web端口td>
33 td>input type="button" value="删除" onclick="deleteRow(this)">td>
34 tr>
35 tr>
36 td>2.2.2.2td>
37 td>3306td>
38 td>MySQL端口td>
39 td>input type="button" value="删除" onclick="deleteRow(this)">td>
40 tr>
41 tr>
42 td>2.2.2.2td>
43 td>6379td>
44 td>Redis端口td>
45 td>input type="button" value="删除" onclick="deleteRow(this)">td>
46 tr>
47 tbody>
48 table>
49 script type="text/javascript">
50 function deleteRow(self){
51 var rowTr = self.parentElement.parentElement;
52 // alert(rowTr.value);
53 rowTr.remove();
54 }
55 script>
DOM文本操作
innerText
标签对象.innerText="武"，修改标签内容（仅文本）。innerHTML
标签对象.innerText="武"，修改标签内容（可标签、课文本）。 1 DOCTYPE html>
2 html>
3 head>
4 title>title>
5 style type="text/css">
6 table {
7 border-collapse: collapse;
8 }
9 table th, table td{
10 border: 1px solid;
11 padding: 8px;
12 }
13 table td{
14 font-size: 18px;
15 }
16 a{
17 text-decoration: none;
18 }
19 a:link {color:#FF0000;} /* 未被访问的链接 */
20 a:visited {color:#00FF00;} /* 已被访问的链接 */
21 a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */
22 a:active {color:#0000FF;} /* 正在被点击的链接 */
23 style>
24 head>
25 body>
26 table>
27 thead>
28 tr>
29 th>IDth>
30 th>网站链接th>
31 th>网站介绍th>
32 th>读取th>
33 tr>
34 thead>
35 tbody>
36 tr>
37 td>1td>
38 td>a href="https://www.kugou.com">酷狗a>td>
39 td>Hello Kugou 就是歌多td>
40 td>
41 input type="button" name="" value="读取网站innerText" onclick="readSite(this)">
42 input type="button" name="" value="读取完整innerHTML" onclick="readSummary(this)">
43 td>
44 tr>
45 tbody>
46 table>
47 script type="text/javascript">
48 function readSite(self){
49 var inner_text_01 = self.parentElement.previousElementSibling.previousElementSibling;
50 alert(inner_text_01.innerText);
51 inner_text_01.innerText="百度";
52 var inner_text_02 = self.parentElement.previousElementSibling;
53 alert(inner_text_02.innerText)
54 inner_text_02.innerText=‘百度一下 你就知道‘
55 }
56 function readSummary(self){
57 var inner_HTML = self.parentElement.previousElementSibling.previousElementSibling;
58 alert(inner_HTML.innerHTML)
59 inner_HTML.innerHTML="百度"
60 }
61 script>
62 body>
63 html>
DOM值操作
文本框
1 body>
2 input type="text" name="username" value="请输入用户名XXX" id="user">
3 script type="text/javascript">
4 var username = document.getElementById("user")
5 console.log("获取文本框值",username.value)
6 username.value = "nuanhuang"
7 console.log("更新文本框值",username.value)
8 script>
9 body>
多行文本框
1 h3>个人简介h3>
2 textarea id="article" cols="30" rows="10">不以物喜,不以己悲,先天下之忧而忧,后天下之乐而乐
3 textarea>br>
4 input type="button" value="获取" onclick="get()">
5 input type="button" value="更新" onclick="update()">
6 script type="text/javascript">
7 function get() {
8 // body...
9 var contents = document.getElementById("article")
10 alert(contents.value)
11 }
12 function update() {
13 var contents = document.getElementById("article")
14 contents.value = "瞎扯淡"
15 }
16 script>
下拉框
1 h3>居住地h3>
2 select id="city" >
3 option value="0">北京option>
4 option value="1">上海option>
5 option value="2" selected="selected">广州option>
6 option value="3">深圳option>
7 select>
8 input type="button" value="获取居住地" onclick="getCity()">
9 input type="button" value="更新" onclick="updateCity()">
10 script type="text/javascript">
11 function getCity() {
12 // body...
13 var city = document.getElementById("city")
14 switch (city.value) {
15 case "0":
16 alert(‘北京‘)
17 break;
18 case "1":
19 alert(‘上海‘)
20 break;
21 case "2":
22 alert(‘广州‘)
23 break;
24 case "3":
25 alert(‘深圳‘)
26 break;
27 default:
28 // statements_def
29 alert(‘未知城市‘)
30 break;
31 }
32 }
33 function updateCity() {
34 var city = document.getElementById("city")
35 city.value = 0
36 }
37 script>
单选框
1 h3>性别h3>
2 input type="radio" name="gender" checked="checked" value=0>男
3 input type="radio" name="gender" value=1>女
4 br>
5 input type="button" value="显示值" onclick="getGender()">
6 input type="button" value="更新值" onclick="updateGender()">
7 script type="text/javascript">
8 function getGender(){
9 var gender = document.getElementsByName("gender")
10 for(var i = 0;i gender.length;i++){
11 if(gender[i].checked){
12 alert(gender[i].value);
13 }
14 }
15 }
16 function updateGender(){
17 var gender = document.getElementsByName("gender")
18 for(var i = 0;i gender.length;i++){
19 if(gender[i].value == "1"){
20 alert(‘xxx‘)
21 gender[i].checked = true;
22 }
23 }
24 }
25 script>
复选框
1 h3>爱好h3>
2 input type="checkbox" class="favi" value="0">篮球
3 input type="checkbox" class="favi" value="1">足球
4 input type="checkbox" class="favi" value="2">羽毛球
5 input type="checkbox" class="favi" value="3">乒乓球
6 br>
7 input type="button" value="显示值" onclick="getFavi()">
8 input type="button" value="反选" onclick="updateFavi()">
9 script type="text/javascript">
10 function getFavi(){
11 var valueList = []
12 var faviList = document.getElementsByClassName("favi")
13 for(var i=0;ifaviList.length;i++){
14 if(faviList[i].checked){
15 valueList.push(faviList[i].value)
16 }
17 }
18 console.log(valueList)
19 alert(valueList)
20 }
21 function updateFavi(){
22 var faviList = document.getElementsByClassName("favi")
23 for(var i=0;ifaviList.length;i++){
24 if(faviList[i].checked){
25 faviList[i].checked = false;
26 }else {
27 faviList[i].checked = true;
28 }
29 }
30 }
31 script>
表格
1 table>
2 thead>
3 tr>
4 th>选择th>
5 th>姓名th>
6 th>年龄th>
7 tr>
8 thead>
9 tbody id="tb">
10 tr>
11 td>input type="checkbox" value="0">td>
12 td>李白td>
13 td>18td>
14 tr>
15 tr>
16 td>input type="checkbox" value="1">td>
17 td>杜甫td>
18 td>20td>
19 tr>
20 tr>
21 td>input type="checkbox" value="2">td>
22 td>王维td>&
上一篇：winston自定义日志管理
文章标题：前端三贱客 -- JavaScript中的DOM元素
文章链接：http://soscw.com/index.php/essay/56079.html