DOM 元素对象解析DOM元素对象解析nth—child(n):当前容器所有子元素中的第N个.boxli:nth-chi

DOM 元素对象解析

nth—child (n) : 当前容器所有子元素中的第N个 .box li : nth-child(1) :BOX容器所有子元素中的第一个，并且标签名为li的

nth-of-type(n) : 先给当前容器按照某一个标签名进行分组,获取分组中的第N个 .box li : nth-of-type(1): 先获取BOX中所有的LI , 在获取LI中的第一个

.box li : nth-of-type(even) //EVEN 偶数 ODD : 奇数

` .box li : nth-of-type(3n+1){ color:red}`
` .box li : nth-of-type(3n+2){ color:green}`
` .box li : nth-of-type(3){ color:blue}`

获取页面中的DOM元素

document.getElementById

在整个文档中 , 通过元素的ID属性值 , 获取到这个元素对象

getElementById是获取元素的方法 , 而document限定了获取元素的范围 ,我们把这个称之为 : "上下文[context]"

var oBox = document.getElementById('box');
1.通过getElementById 获取的元素是一个对象数据类型的值(里面包含很多内置的属性)

typeof oBox => "object"

2.分析包含的属性

className : 存储的是一个字符串,代表当前元素的样式类名

id : 存储的是当前元素的ID值 (字符串)

innerHTML : 存储当前元素中所有的内容 (包含HTML标签)

innerText : 存储当前元素中所有的文本内容(没有元素标签)

onclick :元素的一个事件属性 , 基于这个属性 , 可以给当前元素绑定点击事件

onmouseover : 鼠标滑过事件

onmouseout  : 鼠标离开事件

style : 存储当前元素所有的"行内样式"值(获取和操作的都只能是写在标签上的行内样式 ,无法基于这个属性获取到)
<div style='xxx:xxx'>	

···
//=> 想要修改BOX的样式
// 1.通过STYLE修改行内样式
oBox['style']
oBox.style.backgroundColor = 'pink'

//2.基于CLASS-NAME属性修改BOX的样式类，从而改变样式 oBox['className'] += 'bgColor';

思考题 : 获取扩展 , 如何获取当前元素的所有样式 (不管是写在哪的 ? ) style只能获取写在行内上的

[context].getElementsByTagName

在指定的上下文中 , 通过元素的标签名获取一组元素集合上下文是我们自己来制定的

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

var boxList = oBox.getElementByTagName('li')

console.dir(boxLixt);

var boxLixt = oBox.getElementsByTagName('li');
1.获取的结果是一个元素集合(HTMLCollection) , 首先它也是对象数据类型的,结构和数组非常相似(数字作为索引 , length 代表长度) , 但是不是数组 , 我们把它叫做 "类数组"

boxList[0]  获取当前集合中的第一个LI (通过索引获取到具体的某一个LI即可)

boxList.length 获取集合中LI的数量

2.集合中的每一项存储的值又是一个元素对象 (对象数据类型 , 包含很多内置的属性，例如 : id/className...)

boxList[1].style.color = 'red'; 修改集合中第二个LI的文字颜色

var boxList = oBox.getElementsByTagName('li');
//=>2.搞个循环来完成我们的样式赋值
for(var i = 1; i<boxList.length;i+=2){
	//=>索引时技术代表偶数行
	if(i%2!==0){
		boxList[i].style.backgroundColor = 'pink'
		boxList[i].className += 'bgColor' ; 
		
	}
}

//=> 回去后实现隔三行变色
3

函数

在 JS 中 , 函数就是一个方法( 一个功能体 ) , 基于函数一般都是为了实现某个功能

var total = 10;
total+=10;
total = total/2;
total = total.toFixed(2); //=>保留小数点后边两位
(数字由一个方法toFixed 用来保留小数点后面的位数)

····
在后续的代码中 , 我们依然想实现同样的操作(加10除以2) ,我们需要重新编写代码
var total = 10;
total+=10;
total = total/2;
total = total.toFixed(2); //=>保留小数点后边两位

 ···
 这样的方式会导致页面中存在大量冗余的代码 , 也降低了开发效率 ,如果我们能把实现这个功能的代码进行 "封装" , 后期需要这个功能执行即可 , 这样就好了!
 **`函数诞生的目的就是为了实现封装`** : 把实现一个功能的代码封装到一个函数中 ,后期想要实现这个功能 ,只需要把函数执行即可这样就好了!
 **`函数诞生的目的为了实现封装`** : 把实现一个功能的代码封装到一个函数中 ,后期想要实现这个功能 , 只需要把函数执行即可 , 不必要再次编写重复的代码 ,起到了**`低耦合高内聚(减少页面中的冗余代码, 提高代码的重复使用率)`**的作用

	 function fn(){
		 var total =10;
		 total+=10;
		 total/=2;
		 total = total.toFixed(2);
		 console.log(total);
	 }
	 fn();
	 fn();
···
想用多少次 , 我们就执行多少次函数即可
ES3标准中: 
//=》创建函数
function 函数名([参数]){
	函数体 : 实现功能的JS代码
}
//=>把函数执行
函数名(); 

=====
ES6标准中创建箭头函数 :
let 函数名(变量名)=([参数])=>{
函数体
}
函数名();

let fn = ()=>{
	let total = 10;
	···
}
fn();

函数作为引用数据类型中的一种 ,它也是按照引用地址来操作的 , 接下来我们学习一下 , 函数的运行机制

var obj = {
	name:'马德路',
	age:9
}
  function fn(){
		 var total =10;
		 total+=10;
		 total/=2;
		 total = total.toFixed(2);
		 console.log(total);
	 }
	 fn();
【创建函数】
1.函数也是引用类型 , 首先会开辟一个新的推内存 , 把函数体中的代码当作 '字符串' 存储到内存中 (对象向内存中存储的是键值对)
2.把开辟的堆内存赋值给函数名(变量名)

此时我们输出fn(切记不是fn()) 代表当前函数本身
如果我们执行fn() , 这是把函数执行
所以是否加小括号是两种不同本质的操作

【函数执行】
目的 : 把之前存储到堆内存的代码字符串变为真正的JS代码自上而下执行, 从而实现应有的功能

1.函数执行 , 首先会形成一个私有的作用域(一个供代码执行的环境 ,也是一个栈内存)
2.把之前在堆内存中存储的字符串复制一份过来 ,变为真正的JS代码 ,再开辟的作用域中自上而下执行

函数中的参数

参数是函数的入口 : 当我们在函数中封装一个功能 , 发现一些原材料不确定 , 需要执行函数的时候用户传递进来才可以 , 此时我们就基于参数的机制 ,提供出入口即可

//=>此处的参数叫做形参 : 入口 ,形参是变量(n/m就是变量)
function sum(n,m){
	//=> n和m分别对应要求和的两个数字
	var total = 0;
	total = n+m;
	console.log(total);
}

//=>此处函数执行传递的值是实参 : 实参是具体的数据值
sum(10，20);
sum(10);   //=> n=10 m=undefined
sum();   //=> n和m都是undefined
sum(10,20,30); //n=10 m=20 30没有形参变量接收

这是我建的qq群里面有很多资源，希望能和大家一起学习讨论共同进步!

DOM 元素对象解析