学习完 js 7天之后学 web API 7
提示一下：js 里面字符串使用单引号 html标签中使用双引号 记住
前言：我们呢一起写完了7天的零基础js入门篇，记住以后实际开发中，API跟基础的7天的知识密不可分。静静我呢最近，给大家分享我最近喜欢的几句话。
第一句就是：无关生死，任何事情都是小事，
第二句就比较励志：一定要坚持你所做的事情，哪怕命运无数次给你击倒，至少我们反抗过命运。学习和任何都重在积累。
分享个我的学习方法：我学的方法就是一遍遍的学，一遍遍的看然后理解他们都是什么都混熟就好了，问过，网易，高德的小伙伴你们当时怎么学的代码，他们说就是写没有别的办法。
对了第三句：小富靠勤，中富靠智，大富靠命
正课 1、
webAPI到底是什么？
webAPI到底是什么？
1、课程主要内容
html负责骨架，用于存放页面中需要展示的内容(数据，内容，图片文字等)
css 负责效果，用于美化与布局
js：语言，用于控制 流程 （控制步骤，操作的顺序）
可以用于控制 html的内容与css 的内容，在页面打开后还可以进行操作
webAPI：是一个非常广泛的词，
但是我们现在学习的特指是使用js来操作html 与css的所有方法的总和
2、html 与 DOM结构
我们站在 js 的角度，html 与 css 就是一个字符串，所以我们要操作 html 和css 非常繁琐
例如：更换img 标签中的图片 很繁琐<img src="....jpg">
如果将 html 看成是 字符串，那么操作会很麻烦，我们可以采用 对象的角度来考虑问题
对象的特点： 是一个数据的集合
1>结构清晰，
2>可以避免重复操作
3>键值对
我们的每一个标签，如果看成字符串，要操作属性，就是字符串的，查找，删除，插入等操作 繁琐
如果将每一个标签看成是对象，每一个标签的属性就是对象的属性
那么如果我们想要操作标签的某一个属性，就是可以转换操作对象的属性
如果 img 标签编程一个对象 ，那么 操作属性就可以变成形如
obj.src = 'abcd.jpg';
因此诞生了一个新的观点:DOM的观点
DOM ，文档(document) 对象(object) 模型(model),就是将整个HTML页面看成一个文档对象
页面中所有的标签都看成对象，页面中所有的文本，内容等都是对象
好处：所有的页面都是标签都是 html的子标签
所有的标签之间要么是 兄弟关系，要么是父子关系，所有的标签都是直接或间接的HTML 标签的后代
由于所有的 html 结构都由为一个一个主干 html 延伸出来
首先由head 和body 两个枝丫
然后所有的枝丫就是在他们两个基础上延伸出来，好比一棵树,因此常常将DOM 结构叫做DOM树
3、如何获得页面中的元素
前提：
页面中所有的 东西都是对象，唯独标签被称为元素(element)
所有其他的东西统称为 节点node ，包括标签
解答：因为在html中统称为对象 太宽泛，所有 我们进一步的称呼，标签为元素，html 的结构是树状的，所有我们吧meta 节点 head 和 body 节点 因为我们操作 元素
**重要：**
在页面中要获得元素就得想办法定位元素， id，类名，标签名三种方式
利用：id 获取元素
答：document.getElementById('id') 在页面中将id 为对应值的元素返回
类名获取元素
答：document.getElementByClassName('类名');
将页面中所有使用了，该类样式的 元素取出来，并以伪数组的形式返回
标签名获取元素
利用 标签名 获得元素
document.getElementsByTagName('标签名的字符串')
获得页面中所有的对应标签名的元素 以 伪 数组的形式返回
获取元素的案例 ：Demo
<body>
<p id="p1">111</p>
<p id="p2">222</p>
<p id="p3">333</p>
<script type="text/javascript">
// 利用
//可以使用id 来获得元素
// 语法：document.getElementById('id') 解释：通过id来获得元素
// 直接操作这个对象 相当于操作上面的标签
var p1 = document.getElementById('p1');//使用骆驼命名法
console.log(p1); //打印出来是以标签的形式 <p id="p1">111</p>
console.dir(p1); //打印出 对象的形式
var p2 = document.getElementById('p2');
var p3 = document.getElementById('p3');
console.log(p2);
console.log(p3);
</script>
注意： js 语言需要写在 script 标签里面，要是不写在里面就是一段文本
为什么script 标签写在下面呢？ 因为浏览器加载 从上往下加载，
利用标签名获取元素 ：获得所有的p 标签然后打印出来
<body>
<p>11</p>
<div>22</div>
<p>333</p>
<div>444</div>
<p>555</p>
<script type="text/javascript">
var p = document.getElementsByTagName('p');
console.log(p); //是一个伪数组，无法使用数组方法
for(var i=0; i<p.length;i++){
console.log(p[i]); //三个p标签被打印出来
}
</script>
</body>
第二种形态 ：document.getElementByTagName() 来获取
<body>
<p>111</p>
<div id="p1">
<p>222</p>
<p>333</p>
</div>
<div id="p2">
<p>444</p>
<p>555</p>
</div>
<script type="text/javascript">
//获取在某一个元素下的标签的时候 我们需要不使用document 来获取，我们需要使用这个元素
// 使用document 来 获取 id 就是唯一的意思 标签名可以通过docment来获得 也可以通过标签名
var div1 = document.getElementById('p1');
var p1 = div1.getElementsByTagName('p');
for(var i=0; i<p1.length;i++){
console.log(p1[i]);
}
</script>
</body>
使用类名来获取：
<p class="a">111</p>
<div class="b">222</div>
<p class="c">333</p>
<script type="text/javascript">
这里使用的是getElementsByClassName() 获取的 类名
var a = document.getElementsByClassName('a');
for(var i=0; i<a.length;i++){
console.log(a[i]);
}
</script>
实际开发中混合使用：
<body>
<div>
<p class="a">111</p>
<p class="c">333</p>
</div>
<script type="text/javascript">
//这个后面的零是因为是一个伪数组从零开始
var div = document.getElementsByTagName('div')[0];
var p = div.getElementsByClassName('c');
for(var i=0;i<p.length;i++){
console.log(p[i]);
}
</script>
问题：
->节点与元素的关系,节点比元素大
<div></div> 这对标签没有子内容
<div> </div> 这对标签有个空格子内容
在 html 中有很多的 对象 例如 标签， 文本 注释 等等，所有的这些东西统称为节点
在所有的节点种类 中 有一类是标签，我们经常会使用它，将其称为元素，d
问题
元素 跟 节点 一定要想明白
注意：凡是在标签中使用了id属性，那么属性名会成为当前页面全局范围内的一个变量
<body>
<p id="p1">111</p>
<script type="text/javascript">
console.log(p1); //这个p1的标签就是全局变量 会输出 <p id="p1">111</p>
</script>
备注： 注意：如果今天你开发的是移动端或者，不考虑低版本浏览器的兼容问题，那么直接使用即可 getElementsByClassName(); IE8不支持哈 问题：学会看文档（MDN)
可以直接利用选择器来获得元素(高级) 常用
document.querySelector('选择器的字符串');
// 在页面中将符合选择器的所有元素中的第0个返回
document.querySelectorAll('选择器的字符串');
// 在页面中将符合选择器的所有元素以维数组的形式返回
选择器(selector)
-》基本选择器：#id,.className,tagName,*
-》复合选择器：子代选择( > ),后代选择器( ' ' )
<body>
<p>111</p>
<div id="dv1">
<p>222</p>
<p>333</p>
</div>
<div id="dv2">
<p>444</p>
<p>555</p>
</div>
<script type="text/javascript">
// 这里使用的是子代选择器，记住后代选择器里面包含了子代选择器
var p = document.querySelectorAll('#dv1 > p');
for(var i=0 ; i<p.length;i++){
console.log(p[i]);
}
</script>
DEMO 案例 两种方法 获取 元素
第一种传统方法
<body>
<ul id="menu">
<li>
<a href="#">练习</a>
<ul>
<li><a href="#">test</a></li>
<li><a href="#">test2</a></li>
</ul>
</li>
<li>
<a href="#">练习2</a>
<ul>
<li><a href="#">test3</a></li>
<li><a href="#">test4</a></li>
</ul>
</li>
</ul>
<script type="text/javascript">
/*
使用传统的方法 获得主菜单的a 标签
可以使用children 来获得元素的子元素
思路：
1、拿到菜单的 容器 menu
2、利用children 来拿到容器中的所有li
3、循环遍历li 找到每一个li中的第0个的子元素children[0];
*/
var menu = document.getElementById('menu');
var li_list = menu.children;
for(var i=0; i<li_list.length; i++){
var li = li_list[i];
var a = li.children[0];
console.log(a);
}
</script>
实际开发中获取元素
<body>
<ul id="menu">
<li>
<a href="#">练习</a>
<ul>
<li><a href="#">test</a></li>
<li><a href="#">test2</a></li>
</ul>
</li>
<li>
<a href="#">练习2</a>
<ul>
<li><a href="#">test3</a></li>
<li><a href="#">test4</a></li>
</ul>
</li>
</ul>
<script type="text/javascript">
//使用选择器
var a_list = document.querySelectorAll('#menu > li > a');
// console.log(a_list);
for(var i=0; i<a_list.length;i++){
console.log(a_list[i]);
}
</script>
复习：
1、html 与DOM 树
解答：html 内容是 html，css js，html用来控制页面里面有什么东西
解答：DOM 树 操作HTML 面向对象的观点来 封装 起来 操作对象 使用.的方法
2、如何去获得页面中的元素
解答：方法来查找
document.getElementById('id')这个方法用id来获取元素 每次只能获取一次
document.getElementByTagName('tagName') 它拿到页面上所有的标签是以伪数组的形式
document.getElementByClassName('tagName')
document.querySelectorAll('选择器');
document.querySelector('选择器')
如何操作属性与样式 重点
操作属性
解答：上面我们讲过把标签当做对象来看，对象的属性操作 只有两种方法，1、读取属性的值，2、给属性赋值
重要对象的操作方式 只有两种：
1、读取属性的值
2、设置属性赋值
在DOM 观点中，页面中的每一个标签都是对象，
我们要读取元素的属性时，直接就是读取对象的属性
我们要设置元素的属性时，直接就是 给对象的属性赋值
<body>
<img src="" alt="">
<!-- 用对象的方式来看待它，src 就是 属性 内容就是值 -->
<script type="text/javascript">
//要设置图片的地址
// 1、获得图片这个元素(对象)
// 2、直接利用属性的赋值语法：对象.属性名 = 值
var imgobj = document.getElementsByTagName('img')[0];
// 使用get 方法 这里面拿的是页面上img构成的一个伪数组，即使元素只有一个也是一个伪数组,所以我们要用方括号0的方式
// 在DOM 观点中所有的标签都是对象，所以你想操作什么属性，就是用.xxx来操作即可
imgobj.src =''
console.log(imgobj);
</script>
</body>
关于路径的描述
我们网站是放在网站上的服务器上，放在文件夹上
所以我们讲讲文件夹层级
文件夹目录路径：
./ 当前目录，点斜杠是当前目录
../ 上层目录，点点斜杠是上层目录
/ 光一个斜杠，表示是根目录，在服务器上表示的是服务器目录
设置 属性操作和 样式操作 class是关键字
1、img 标签自由的属性 width 与height
2、设置img 的行内样式，即img 标签的style 属性中的 width 与 height
3、使用类样式，外部样式，嵌入样式
<img src="" alt="">
<script type="text/javascript">
var img = document.querySelector('img');
img.width = '500'; //使用 html 的属性的时候设置宽高默认的就是像素
img.height = '500'
</script>
class是关键字 要使用 className 谨记重要
<style type="text/css">
body{
background-color: pink;
}
.c{
width: 200px;
height: 200px;
background-color: black;
}
</style>
</head>
<body>
<p>11</p>
<script type="text/javascript">
var p = document.querySelector('p');
// class 在现在的js 中是一个关键字，
p.className = 'c'
</script>
</body>
操作属性使用的是className 而不是class 因为 class 是关键字
几个特殊的属性 inner
innerHTMl
inner表示的是内部的，与之对应的有一个 outer (外)的意思
innerHTML 内部的 html 记住HTML大写
这个属性的作用是 读取 或 设置 标签中的内容(子标签等)
innerText
读取p标签中的文本内容 BytagName() 后面要加[] 数组的索引
<body>
<p>我是一个webAPI</p>
<script type="text/javascript">
/*
第一种方法
var p = document.querySelector('p');
console.log(p.innerHTML);
第二种方法 ：这里记住谨记 谨记 要加上 0 零 因为是一个伪数组 不加的化就是 undefined
*/
var p = document.getElementsByTagName('p')[0];
console.log(p.innerHTML);
</script>
</body>
innerHTML 详细DEMO 与解释
<body>
<p>我是webp标签</p>
<p>我是第二个web 标签<b>加粗了</b><i>这里是一个斜体哟</i></p>
<script type="text/javascript">
/*
var p = document.getElementsByTagName('p')[1];
console.log(p.innerHTML); //读取的是内容
*/
// 设置p的内容
var p1 = document.getElementsByTagName('p')[0];
p1.innerHTML = '这是设置后的内容p1';
var p2 = document.getElementsByTagName('p')[1];
p2.innerHTML = '点击<a href="http://www.baidu.com" target="_black">p标签跳转到百度</a>'
/*
innerHTML 可以读取一个标签内的内容，标签内是一个文本以一个字符串形式返回，既有文本又有标签，以字符串形式返回所有东西，如果我们赋值文本，就会替换，赋值时候包含标签，浏览器解析标签以DOM形式展示出来
*/
</script>
在页面中动态生成列表ul >li
<body>
<!--在body中写了一个创建一个id-->
<div id="dv"></div>
<script type="text/javascript">
// 声明一个数组
var arr = ['HTML基础','CSS基础','javaSCript基础','webAPI基础'];
// 核心的内容就是如何拼字符串
// 创建一个 ul
var html = '<ul>';
// 循环数组取出数组中的每一项拼接 li 数据
for(var i=0; i<arr.length; i++){
//使用 li 进行拼接
html+='<li>'+arr[i] +'</li>';
}
html+='</ul>';
// 使用两种方法来获取 id
var dv = document.querySelector('#dv');
var dv1 = document.getElementById('dv');
dv.innerHTML = html;
dv1.innerHTML = html;
</script>
</body>
写法1、
<body>
<div id="box"></div>
</body>
<script type="text/javascript">
var arr = ['HTML基础','CSS基础','javaSCript基础','webAPI基础'];
var html = "<ul>"
for(var i=0; i<arr.length;i++){
html +="<li>" + arr[i] +"</li>";
}
html +="</ul>"
var box = document.getElementById('box');
box.innerHTML = html;
</script>
写法2、
var arr = ['HTML基础','CSS基础','javaSCript基础','webAPI基础',"111"];
var htmlarr = ["<ul>"];
for(var i=0; i<arr.length; i++){
htmlarr.push("<li>"+ arr[i]+"</li>")
}
htmlarr.push("</ul>");
var box = document.getElementsByTagName('div')[0];
box.innerHTML = htmlarr.join("");
写法3、
var arr = ['HTML基础','CSS基础','javaSCript基础','webAPI基础',"111",'222'];
document.getElementById('box').innerHTML = "<ul><li>" + arr.join("</li><li>") + "</li></ul>"
innerText 的区别
表示标签内部的文本
其与innerHTML 的区别是
1、读取的时候忽略标签
2、设置的时候 标签形式的字符串不会被转换成DOM结构，而是转义 (列如> >)
处理行内样式 操作
1、行内样式：直接写在标签中的样式
2、嵌入样式：写在页面中的style 标签中的样式，一般使用的是选择起来定位元素
3、外部样式：独立的利用一个css 文件写到外面，然后利用linck 标签引入css
专一原则，就近原则
<body>
<div id="box" style="width:200px;height: 200px; background-color: pink"></div>
</body>
<script type="text/javascript">
var box = document.querySelector('#box');
var style = box.style;
box.style.backgroundColor = 'red';
box.style.width = '500px';
console.log(style);
</script>
奇 偶 行 隔行变色 案例：DEMO
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</body>
<script type="text/javascript">
//奇偶 行变色
// 奇数行 红色，偶数行 蓝色
// 1 > 获得所有的li
// 2 > 遍历 li 根据i 来设置背景色
var li = document.getElementsByTagName('li');
for(var i=0; i<li.length;i++){
if(i % 2===0){
// 用户眼中的奇数行
li[i].style.backgroundColor = 'pink';
}else{
// 用户眼中的偶数行
li[i].style.backgroundColor = 'red';
}
// 使用三目运算符 优化代码
li_list[i].style.backgroundColor = i % 2 === 0 ? 'pink' :'red';
// 优化 三目运算 如果 i % 2 为true 就是 red 红色 ？ 左面的
li_list[i].style.backgroundColor = i % 2 ?'red' : 'pink';
}
</script>
