1 <!DOCTYPE html>
2 <!-- Dom选择器以及内容文本操作1-->
3 <html lang="en">
4 <head>
5 <meta charset="UTF-8">
6 <title>Title</title>
7 </head>
8 <body>
9 <div>
10 DOM
11 查找
12 直接查找
13 var obj = document.getElementById('i1')
14 间接查找
15 文件内容操作:
16 innerText 仅仅是文本
17 innerHTML 全部内容
18 value
19 input value 获取当前标签中的值
20 select 获取选择中的value值(selectedIndex)
21 textarea value 获取当前标签中的值
22 </div>
23
24
25 <div id="i1">
26 老男孩
27 <a>谷歌</a>
28 </div>
29
30 <script>
31 obj = document.getElementById('i1');
32 obj.innerText
33
34 </script>
35
36 <div id="i2">
37 老男孩
38 <a>谷 <span>歌</span> </a>
39 </div>
40 <script>
41 obj = document.getElementById('i2');
42 obj.innerHTML
43 </script>
44
45
46 <script>
47 obj.innerHTML = '李杰';
48 obj.innerText = '李杰1';
49
50 obj.innerText ="<a href ='http;//www.oldboydu.com'>老男孩</a>"
51 obj.innerHTML ="<a href ='http;//www.oldboydu.com'>老男孩</a>"
52 </script>
53
54
55 <div id="i3">
56 老男孩
57 <a>谷 <span>歌</span> </a>
58 </div>
59 <input type="text" id="i4">
60 <script>
61 obj = document.getElementById('i3');
62 obj.Value
63 obj.Value= 'sadsafsd'
64 </script>
65
66
67 <div id="i5">
68 老男孩
69 <a>谷 <span>歌</span> </a>
70 </div>
71 <input type="text" id="i6">
72 <select id="i7">
73 <option value="11"> 北京1 </option>
74 <option value="12"> 北京2 </option>
75 <option value="13"> 北京3 </option>
76 </select>
77 <script>
78 obj = document.getElementById('i3');
79 obj.value
80 obj.value = '12'
81 obj.selectedIndex
82 obj.selectedIndex = 2
83 obj.selectedIndex = 1
84 </script>
85
86 <div id="i8">
87 老男孩
88 <a>谷 <span>歌</span> </a>
89 </div>
90 <input type="text" id="i9">
91 <select id="i10">
92 <option value="11"> 北京1 </option>
93 <option value="12"> 北京2 </option>
94 <option value="13"> 北京3 </option>
95 </select>
96 <textarea id="i11"></textarea>
97 <script>
98 obj = document.getElementById('i11');
99 obj.value
100 obj.value = 'dgdgcxg'
101 </script>
102
103 </body>
104 </html>