前端 WEB-API 第一天 DOM 与 选择器 介绍

学习完 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 标签中的图片 很繁琐
	如果将 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
	

111
222
333


复制代码

   注意： js 语言需要写在 script 标签里面，要是不写在里面就是一段文本 
	为什么script 标签写在下面呢？ 因为浏览器加载 从上往下加载，
	

利用标签名获取元素 ：获得所有的p 标签然后打印出来 

11
22
333
444
555




第二种形态 ：document.getElementByTagName() 来获取 

111

	
222
	
333


	
444
	
555





使用类名来获取： 

111
222
333



实际开发中混合使用：
    

 	
111
 	
333


复制代码

问题：
		->节点与元素的关系,节点比元素大 
		
 这对标签没有子内容
		
 
 这对标签有个空格子内容 

		在 html 中有很多的 对象 例如 标签， 文本 注释 等等，所有的这些东西统称为节点  
		在所有的节点种类 中 有一类是标签，我们经常会使用它，将其称为元素，d
复制代码

问题

元素 跟 节点 一定要想明白

注意：凡是在标签中使用了id属性，那么属性名会成为当前页面全局范围内的一个变量 


111



复制代码

备注：谨记永远也不要像上面这么写 因为 js 有很多bug 其中有一个特性是 js 没有块级作用域，只有词法作用域，导致在某些函数中无法使用，全局变量等特性

备注： 注意：如果今天你开发的是移动端或者，不考虑低版本浏览器的兼容问题，那么直接使用即可 getElementsByClassName(); IE8不支持哈 问题：学会看文档（MDN)

可以直接利用选择器来获得元素(高级) 常用

        document.querySelector('选择器的字符串');
	// 在页面中将符合选择器的所有元素中的第0个返回 
	document.querySelectorAll('选择器的字符串');
	// 在页面中将符合选择器的所有元素以维数组的形式返回
	
选择器(selector)
	-》基本选择器：#id,.className,tagName,*
	-》复合选择器：子代选择( > ),后代选择器( ' ' )
	

111

	
222
	
333


	
444
	
555


复制代码

DEMO 案例 两种方法 获取 元素

第一种传统方法

	

		练习
		

			
test
			
test2
		
	
	

		练习2
		

			
test3
			
test4
		
	



复制代码

实际开发中获取元素

	

		练习
		

			
test
			
test2
		
	
	

		练习2
		

			
test3
			
test4
		
	



复制代码

复习：

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 观点中，页面中的每一个标签都是对象，
	我们要读取元素的属性时，直接就是读取对象的属性 
	我们要设置元素的属性时，直接就是 给对象的属性赋值



	 
	
	

复制代码

关于路径的描述

我们网站是放在网站上的服务器上，放在文件夹上

所以我们讲讲文件夹层级 

文件夹目录路径：
	./  当前目录，点斜杠是当前目录

	../ 上层目录，点点斜杠是上层目录
	
	/ 光一个斜杠，表示是根目录，在服务器上表示的是服务器目录
复制代码

设置 属性操作和 样式操作 class是关键字

	1、img 标签自由的属性 width 与height 
	2、设置img 的行内样式，即img 标签的style 属性中的 width 与 height
	3、使用类样式，外部样式，嵌入样式
	




class是关键字 要使用 className  谨记重要
    
    


	 
11
	 


操作属性使用的是className 而不是class 因为 class 是关键字
复制代码

几个特殊的属性 inner

innerHTMl
	inner表示的是内部的，与之对应的有一个 outer (外)的意思
	innerHTML 内部的 html 记住HTML大写 
	这个属性的作用是 读取 或 设置  标签中的内容(子标签等)
innerText
复制代码

读取p标签中的文本内容 BytagName() 后面要加[] 数组的索引

 
	
我是一个webAPI
	

复制代码

innerHTML 详细DEMO 与解释

我是webp标签
我是第二个web 标签加粗了这里是一个斜体哟

复制代码

在页面中动态生成列表ul >li

    
	 

	 



写法1、

	




写法2、
    	var arr = ['HTML基础','CSS基础','javaSCript基础','webAPI基础',"111"];

	var htmlarr = ["
"];
	for(var i=0; i"+ arr[i]+"")
	}
	htmlarr.push("
");
	var box = document.getElementsByTagName('div')[0];
	box.innerHTML = htmlarr.join("");
	
写法3、
   var arr = ['HTML基础','CSS基础','javaSCript基础','webAPI基础',"111",'222'];
document.getElementById('box').innerHTML = "
" + arr.join("
") + "
"
复制代码

innerText 的区别

表示标签内部的文本
其与innerHTML 的区别是
1、读取的时候忽略标签
2、设置的时候 标签形式的字符串不会被转换成DOM结构，而是转义 (列如> >)
复制代码

处理行内样式 操作

1、行内样式：直接写在标签中的样式
2、嵌入样式：写在页面中的style 标签中的样式，一般使用的是选择起来定位元素
3、外部样式：独立的利用一个css 文件写到外面，然后利用linck 标签引入css

专一原则，就近原则 


	
	


	
复制代码

奇 偶 行 隔行变色 案例：DEMO

	
1
	
2
	
3
	
4
	
5
	
6
	
7
	
8



复制代码

转载于:https://juejin.im/post/5c7e5ae56fb9a049a571a5fb