WebAPI

发表于 | 分类于

API的概念：

API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。

Web API**的概念 ：**

浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)

此处的Web API特指浏览器提供的API(一组方法)，Web API在后面的课程中有其它含义

JS**组成：**

1. ** ECMAScript - JavaScript的核心**

定义了javascript的语法规范

JavaScript**的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准与具体实现无关**

2．BOM - 浏览器对象模型

一套操作浏览器功能的API

通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等

  1. DOM - 文档对象模型

一套操作页面元素的API

DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作

DOM 学习

学习目标：1. 学会找DOM对象 2. 学会给DOM对象注册事件 3. 修改DOM对象的属性

什么是DOM ？

Document Object Model 文档对象模型

  1. 文档对象模型

HTML页面的所有的内容，包括标签、节点、注释、属性等，在JS的DOM中，都存在一个一个的对象与之对应。因此当我们想要操作这些HTML的内容时，只需要操作这些对象即可。

节点：页面中所有的内容，包括标签、节点、注释、树形都被封装成了对象，我们把这些对象叫做节点。

元素：我们最常操作的是标签节点，也叫元素。

  1. 文档树模型

HTML结构是一个树形结构，同样的，这些对应的对象也是一个树形的结构，树形结构的好处是能够非常容易找到某个节点的子节点、父节点、兄弟节点。

子节点：child

兄弟节点：sibling

父节点：parent

  1. API：Application Programming Interface：应用程序编程接口，其实就是一大堆的方法，我们可以把API看成是工具。做不同的事情需要不同的工具。

做饭需要一套做饭的工具：锅碗瓢盆

打仗需要一套打仗的工具：刀枪剑戟

找对象需一套找对象的工具：钱权颜缘 + 车房钱权

DOM：用来操作页面元素的一套工具。

BOM：用来操作浏览器一些行为的一套工具。

  1. XML：XML(Extensible Markup Language：可扩展性标记语言，通常用于配置文件，或者和json一样用于数据交互。
1
2
3
4
5
6
7
     <name>张三</name>

   <age>18</age>

    <sex>男</sex>

</student>

DOM初体验

想要操作DOM，首先需要获取到DOM对象

根据id 获取元素

var element = document.getElementById(‘box’);

  1. document:指的是整个html页面，在DOM中被封装成了一个对象，就是document对象

  2. getElementById:通过id获取元素

  3. 参数是一个字符串，即id

  4. 返回值是一个元素，即一个对象，标签中存在的属性，在这个元素中也有属性与之一一对应。

如何打印一个对象

​ Console.log(): 以标签的形式打印一个对象

​ Console.dir(): 以对象的形式打印一个对象

注册事件

​ 1．JavaScript和HTML之间的交互是通过事件来实现的。

​ 2. 事件就是文档或者浏览器窗口发生的一些特定的交互瞬间。

​ 3. JavaScript是一门事件驱动的脚本语言。

事件三要素

  1. 事件源：触发事件的元素

  2. 时间名称：触发事件名称

  3. 事件处理函数： 触发事件时调用的函数

注册事件的两种方式

​ 。行内式注册事件

​ 例如<img src =”images/1.jpg” alt = “描述”id = “img” onclick = ‘changPic()’>

​ 。内嵌式注册事件

​ ` var img = document.getElementById(‘img’);

​ Img.onclick= function() {

​ Img.src= ‘images/2.jpg;

​ }`

​ 案例显示与隐藏 

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
<script>

    var btn = document.getElementById('btn');

    var box = document.getElementById('box');



    console.dir(btn);



    btn.onclick = function(){

        if(btn.innerHTML == '隐藏'){

            box.className = 'hidden';

            btn.innerHTML = '显示';

        }else{

            box.className = 'visible';

            btn.innerHTML = '隐藏';

        }

    }

</script>
1

案例 【图片轮流切换】

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        img {

            height: 400px;

            display: block;

        }

    </style>

</head>

<body>

<button id='btn'>切换</button>

<img src="../images/pic1.jpg" alt="" id='picture'>





<script>

    var btn = document.getElementById("btn");

    var picture = document.getElementById("picture");

    var cuttn = 1;

    btn.onclick = function(){

        cuttn++;

        picture.src = '../images/pic' + cuttn + '.jpg';

        if(cuttn == 6){

            cuttn = 0;

        }

    }

</script>

</body>

</html>

给a 标签注册事件

​ returnfalse 可以阻止页面跳转

案例【给a标签注册事件】

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
34
35
36
37
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<a href="www.baidu.com" id='bai'>百度</a>

<a href="javascript:void(0)" >传智播客</a>



<script>

var bai = document.getElementById("bai");

    bai.onclick = function(){

        alert('你猜还能不能跳转');

        return false;

    }

</script>

</body>

</html>

Javascript : void(0) 的作用

  1. javascript:是伪协议，表示url的内容通过javascript执行。
  2. void(0)表示不作任何操作，这样会防止链接跳转到其他页面。
  3. 让页面不跳转，JavaScript:void(0)是最通用的方式。

元素的属性

1 .标签属性

在标签中存在的属性，在DOM对象中同样存在，使用JS代码可以改变标签的相关属性。

案例美女相册

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        body {

            margin-left: 100px;

        }

        ul {

            overflow: hidden;

        }

        li {

            float: left;

            list-style: none;

            margin-right: 10px;

        }

        #placeholder {

            width: 400px;

            height: 250px;

        }

    </style>

</head>

<body>

<ul id='beauty'>

    <li><img src="../images/1-small.jpg" alt=""></li>

    <li><img src="../images/2-small.jpg" alt=""></li>

    <li><img src="../images/3-small.jpg" alt=""></li>

    <li><img src="../images/4-small.jpg" alt=""></li>

</ul>

<img src="../images/placeholder.png" alt="" id = 'placeholder'>

<p id='desc'>描叙</p>





<script>

    var beauty = document.getElementById('beauty');

    var picters = beauty.getElementsByTagName('img');

    var placeholder = document.getElementById("placeholder");

    var desc = document.getElementById("desc");





    for(i = 0; i<picters.length; i++ ){

       picters[i].aa ='../images/' + (i +1) + '.jpg';

        picters[i].bb = '美眉'+ (i+1);





        picters[i].onclick = function(){

           // console.log(this);

            placeholder.src = this.aa;

            desc.innerHTML = this.bb;

        }

    }

</script>

</body>

</html>

除了常见属性以外，标签中还存在一些特殊的属性。只要设置了这些属性，无论有没有值，都会起作用。例如:disabled、checked和selected属性。

案例 禁用文本输入框

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<input type="text" id='txt'><br>

<button id='btn'>禁用文本框</button>

<br>

<input type="radio" checked>

<select name="" id="">

    <option value="">前端</option>

    <option value="">UI</option>

    <option value="">PHP</option>

    <option value="" selected>大数据</option>

    <option value="">JAVA</option>

</select>

<script>

    var

txt = document.getElementById("txt");

    var

btn = document.getElementById("btn");

    btn.onclick = function(){

        //disabled

是禁用文本框 属性是布尔类型

        txt.disabled = true;

    }

</script>

</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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<button id = 'btn'>挑媳妇了</button>

<select name="" >

    <option value="">韩雪</option>

    <option value="">蘑菇头</option>

    <option value="">凤姐</option>

    <option value="" selected>刘亦菲</option>

    <option value="">小龙女</option>

</select>



<script>

    var btn = document.getElementById("btn");

    var options = document.getElementsByTagName('option');



    btn.onclick = function(){

       var randow = Math.floor(Math.random() * options.length);

        options[randow].selected = true;

    }

</script>





</body>

</html>

自定义属性

<div id = ‘box’ aa = ‘1’></div> 在html 中给标签添加额外的属性

自定义的标签属性通过DOM使用点语法来获取

示例 代码 

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <style>

    .red-one {

      background-color: red;

      width: 200px;

      height: 200px;

    }

  </style>

</head>

<body>

<div id="box" class="red-one"

title="嘿嘿" aaa="呵呵呵"></div>

<script>

  var box = document.getElementById("box");

  //如果是原生的属性，可以通过点语法直接获取和修改

  console.log(box.id);

  console.log(box.className);

  console.dir(box);

  box.title = "嘻嘻";

  //如果是标签的自定义属性，需要通过setAttribute和getAttribtue来设置和获取

//  console.log(box.aaa);

  console.log(box.getAttribute("aaa"));

  box.setAttribute("aaa","哈哈哈");

  console.log(box.getAttribute("class"));

  console.log(box.getAttribute("title"));

  box.setAttribute("title","哇哇");

</script>

</body>

</html>

HTML和css 的常见的使用

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <style>

    * {

      margin: 0;

      padding: 0;

    }

    body {

      padding:100px;

    }

    input {

      float: left;

      height:60px;

    }

    input[type=text] {

      width: 300px;

      border:5px solid blue;

      box-sizing:border-box;

    }

    input[type=button] {

      width: 100px;

      border:2px solid red;

    }

    ul {

      width: 800px;

      height: 400px;

    }

    ul li {

      float: left;

      list-style:none;

      height: 100%;

      width: 25%;

      border-right:1px solid #000;

      box-sizing:border-box;

    }

    li:first-child {

      background-color: #f00;

    }

    li:nth-child(2) {

      background-color: #00f;

    }

    li:nth-child(3) {

      background-color: #0ff;

    }

    li:nth-child(4) {

      background-color: #ff0;

    }

  </style>

</head>

<body>

<!--accesskey 最开始只给input使用 -->

<!--<input type="text" accesskey="a">-->

<!--<a href="http://www.itcast.cn" accesskey="m">传智播客</a>-->

<!--

box-sizing属性对应的值

content-box:大部分元素默认值都是content-box.如果box-sizing属性的值为content-box，表示我们在CSS里设置的

宽和高代表的是内容的宽和高，不包括padding和border

border-box:如果box-sizing属性的值为border-box，表示我们在CSS里设置的

宽和高代表的是整个盒子的大小，包括padding和border

 -->

<!--<input type="text">-->

<!--<input type="button" value="搜索">-->

<ul>

  <li></li>

  <li></li>

  <li></li>

  <li></li>

</ul>

</body>

</html>

查找DOM 对象

  1. 根据ID获取元素

var box =document.getElementById("box"); //根据id名获取对应的元素

注意：只有document才有getElementById()方法，其它元素没有这个方法。

var father= document.getElementById("father");

var son =father.getElementsByTagName("div")[0]; //允许

var son =father.getElementById("son"); //不允许，只有document能够调用getElementById方法，其它元素不可以调用getElementById方法。

  1. 根据类名获取元素

var elements =document.getElementsByClassName("box"); //根据类名获取对应的元素

  1. 根据标签名获取元素

var links = document.getElementsByTagName(“a”)

1.根据标签名获取元素，返回的是一个伪数组

2.伪数组：可以跟数组一样进行遍历，但是不能使用数组的方法。

3.this的使用，谁调用，指向谁

  1. 其他获取元素的方式

通过name属性获取元素（不建议使用）

document.getElementsByName("name");

通过类名获取元素

document.getElementsByClassName("classname");

通过css选择器获取元素(一个元素)

document.querySelector("#box");

document.querySelector(".demo");

document.querySelector("div");

通过css选择器获取元素（返回一个伪数组，多个）

document.querySelectorAll("#box);

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

</head>

<body>

<div id="father">

  <p class="red-box"

id="son1">我是son1</p>

  <h1 class="red-box"

id="son2">我是son2</h1>

</div>

<p>我是个p</p>

<script>

  var father = document.getElementById("father");

  console.log(father);

  var sonP = father.getElementsByTagName("p")[0];

  console.log(sonP);

  //getElementById 只有document才能调用

//  var son2 =

father.getElementById("son2");

//  console.log(son2);

  //伪数组.通过类名来获取对应的元素

  var redBoxes = document.getElementsByClassName("red-box");

  console.log(redBoxes);

  //根据标签名获取到对应的元素

  var eles = document.getElementsByTagName("p");

  console.log(eles);

</script>

</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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <style>

    .yellow-bg {

      background-color: #ff0;

    }

  </style>

</head>

<body>

<a href="#">我是链接1</a>

<a href="#">我是链接2</a>

<a href="#">我是链接3</a>

<a href="#">我是链接4</a>

<a href="#">我是链接5</a>



<script>

  var links = document.getElementsByTagName("a");



  for(var i = 0; i < links.length;i++) {

    links[i].onclick = function () {

      this.className = "yellow-bg";

    }

  }

  console.log(i);

</script>

</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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <style>

    .yellow-bg {

      background-color: #ff0;

    }

  </style>

</head>

<body>

<a href="#">我是链接1</a>

<a href="#">我是链接2</a>

<a href="#">我是链接3</a>

<a href="#">我是链接4</a>

<a href="#">我是链接5</a>



<script>

  var links = document.getElementsByTagName("a");



  for(var i = 0; i < links.length;i++) {

    links[i].onclick = function () {



      //把所有的都给干掉（包括自己）

      for(var j = 0; j < links.length;j++) {

        links[j].className = "";

      }

      //把自己复活

      this.className = "yellow-bg";

    }

  }

</script>

</body>

</html>

Tab栏练习

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <style type="text/css">

    * {

      margin: 0;

      padding: 0;

    }



    ul {

      list-style: none;

    }



    .wrapper {

      width: 1000px;

      height: 475px;

      margin: 0 auto;

      margin-top: 100px;

    }



    .tab {

      border: 1px solid #ddd;

      border-bottom: 0;

      height: 36px;

      width: 320px;

    }



    .tab li {

      position: relative;

      float: left;

      width: 80px;

      height: 34px;

      line-height: 34px;

      text-align: center;

      cursor: pointer;

      border-top: 4px solid #fff;

    }



    .tab span {

      position: absolute;

      right: 0;

      top: 10px;

      background: #ddd;

      width: 1px;

      height: 14px;

      overflow: hidden;

    }



    .products {

      width: 1002px;

      border: 1px solid #ddd;

      height: 476px;

    }



    .products .main {

      float: left;

      display: none;

    }



    .products .main.selected {

      display: block;

    }



    .tab li.active {

      border-color: red;

      border-bottom: 0;

    }

  </style>

</head>

<body>

<div class="wrapper">

  <ul class="tab">

    <li class="tab-item active">国际大牌<span>◆</span></li>

    <li class="tab-item">国妆名牌<span>◆</span></li>

    <li class="tab-item">清洁用品<span>◆</span></li>

    <li class="tab-item">男士精品</li>

  </ul>

  <div class="products">

    <div class="main selected">

      <a href="#"><img src="images/guojidapai.jpg" alt=""/></a>

    </div>

    <div class="main">

      <a href="#"><img src="images/guozhuangmingpin.jpg" alt=""/></a>

    </div>

    <div class="main">

      <a href="#"><img src="images/qingjieyongpin.jpg" alt=""/></a>

    </div>

    <div class="main">

      <a href="#"><img src="images/nanshijingpin.jpg" alt=""/></a>

    </div>

  </div>

</div>



<script>

  var items = document.getElementsByClassName("tab-item");

  var mains = document.getElementsByClassName("main");



  for(var i = 0; i < items.length;i++) {

    items[i].index = i;

    items[i].onmouseover = function () {

      for(var j = 0; j < items.length;j++) {

        items[j].className ="tab-item";

        mains[j].className = "main";

      }

      this.className = "tab-item active";

//      console.log(this.index);

      mains[this.index].className = "main selected";

    }

  }

</script>

</body>

</html>

【标签内容】innerText 和innerHTML属性都是用来获取和设置标签的内容的。但是二者有区别。

l InnerHTML 可以用于获取和设置标签的所有内容 包括标签和文本内容

//innerHTML:内部的HTML

// 获取标签内容的时候，不管标签还是文本，都能获取到

// innerHTML设置内容的时候，覆盖原来内容，标签也能生效，浏览器能解析这个标签。

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
  <!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <style>

    #box {

      width: 200px;

      height: 200px;

      border:1px solid #f00;

    }

    input {

      width: 400px;

      height: 200px;

    }

  </style>

</head>

<body>

<div id="box">

  <h1>我是div里的h1</h1>

</div>





<input type="text" value="我是input">

<input type="button" value="发布">

<script>

  var box = document.getElementById("box");

  var inputs = document.getElementsByTagName("input");



  inputs[1].onclick = function () {

    box.innerText = inputs[0].value;

  }



  console.dir(box);



  //innerHTML设置的内容，会被浏览器解析

//  box.innerHTML = "<h2>我是div里的h2</h2>";



  //innerText 设置的内容，会被当做普通的文本，不会被解析

//  box.innerText = "<h2>我是div里的h2</h2>";



  //innerHTML会获取到元素里的所有内容，包括标签

  //标准方法

//  console.log(box.innerHTML);



  //innerText只包含文本内容

  //IE浏览器的方法

//  console.log(box.innerText);



  //火狐浏览器的方法

//  console.log(box.textContent);



//  console.log(input.innerHTML);

</script>

</body>

</html>

l InnerText 可以用于获取和设置标签的文本内容，会丢弃掉标签

//innerText:内部 文本

// 获取标签内容的时候，只会获取文本，标签扔掉了

// 设置标签内容的时候，覆盖原来内容，对标签进行转义（目的：把标签直接当文本来用）

二者的区别：

- innerHTML是W3C的标准属性，而innerText是IE提出来的属性，存在兼容性问题。因此更加推荐大家使用innerHTML。

- innerText的作用：防止xss攻击

l InnerText的兼容性问题

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
l  <!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <style>

    #box {

      width: 200px;

      height: 200px;

      border:1px solid #f00;

    }

    input {

      width: 400px;

      height: 200px;

    }

  </style>

</head>

<body>

<div id="box">

  <h1>我是div里的h1</h1>

</div>





<input type="text" value="我是input">

<input type="button" value="发布">

<script>

  var box = document.getElementById("box");

  var inputs = document.getElementsByTagName("input");



  inputs[1].onclick = function () {

    box.innerText = inputs[0].value;

  }



  console.dir(box);



  //innerHTML设置的内容，会被浏览器解析

//  box.innerHTML = "<h2>我是div里的h2</h2>";



  //innerText 设置的内容，会被当做普通的文本，不会被解析

//  box.innerText = "<h2>我是div里的h2</h2>";



  //innerHTML会获取到元素里的所有内容，包括标签

  //标准方法

//  console.log(box.innerHTML);



  //innerText只包含文本内容

  //IE浏览器的方法

//  console.log(box.innerText);



  //火狐浏览器的方法

//  console.log(box.textContent);



//  console.log(input.innerHTML);

</script>

</body>

</html>

【样式操作】标签不仅可以通过class属性操作样式，还可以通过style属性操作样。同样的DOM对象可以通过className操作样式，也可以通过style属性操作样

//1 style属性是一个对象

//2 style这个对象中属性值都是字符串格式

//3 标签中style属性有哪些样式名，在style这个对象中就有对应的属性名。

//4 标签中有一些属性带了-，比如background-color,到了style对象中，变成了驼峰命名法，backgroundColor（因为-在js中不是一个合法的标识符）

//5 DOM中的style属性只能获取和设置行内样式，在类样式中定义的样式通过style获取不到。

【关于body】//1.document.body : body比较常用，并且在页面中时唯一的，因此可以使用document.body直接获取

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <style>

    #box {

      width: 200px;

      height: 200px;

      background-color: red;

    }



   /*

    #box.demo {

      width: 400px;

      height: 400px;

      background-color: yellow;

    }

    */

  </style>

</head>

<body>

<div id="box"></div>

<script>

  var box = document.getElementById("box");

//  var body = document.getElementsByTagName("body")[0];

  document.body.style.backgroundColor = "greenyellow";



  //如果通过代码获取一个元素的样式，只能获取到行内样式

  console.dir(box.style.height);







  box.onclick = function () {

//    this.className = "demo";



    //设置的样式都是行内样式

    box.style.height = "400px";

    box.style.width = "400px";

    box.style.backgroundColor = "yellow";

  }

</script>

</body>

</html>