DOM 元素对象解析-白红宇

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 : 存储当前元素所有的"行内样式"值(获取和操作的都只能是写在标签上的行内样式 ,无法基于这个属性获取到)
    
     	···//=> 想要修改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
    
     索引时技术代表偶数行	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=undefinedsum();   //=> n和m都是undefinedsum(10,20,30); //n=10 m=20 30没有形参变量接收复制代码

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

这是群号:778734441

这是跟着周啸天老师一起学的笔记，后期我还会分享更好的资料给大家，希望大家多多支持，我会发布很多优秀的作品出来的！！！