元素节点(附考题)
元素节点
DOM节点-主要包括元素节点（标签），文本节点（文本内容），属性节点（标签属性）
setAttribbute(attrname.attrvalue)--用来设置元素节点的属性名和属性值，可以替代属性节点的设置
style--元素节点的属性，用来设置标签的style样式，但是注意该操作使用行间样式修改标签的css，因此该操作一般只适用于需要通过js动态变化的css
//classNanme--用来设置标签的class属性值
mark1.className = 'div1';
//cssText--通过行简阳市修改标签多个css样式
mark1.style.cssText = 'width:200px;background-color:blue;color:white'
组装节点
//mark1.appendChild(content1)
//获取body元素
//var body_mark = document.getElementsByTagName('body')[0]
//body_mark.appendChild(mark1) 元素节点的查找
//根据标签的id属性值查找id为div1的标签，注意该方法返回的直接就是查找到的元素节点
//var parent = document.getElementById('div1')
//parents 根据标签的class属性值获取指定的标签，但是该操作返回的结果是一个数组结构，如果需要获取某一个元素节点则
// 需要通过下标从数组中获取
//var parents = document.getElementsByClassName('div1')
//根据标签的标签名获取节点，返回结果也是数组结构
//var parents=document.getElementsByClassName('div1')
//根据标签的name属性获取标签，一般是form表单，返回结果任然是数组
//var parents = document.getElementsByName('name属性的属性值')
//--根据选择器获取标签
//querySelector(selector)-根据标签选择器selector选择对应的标签，但是该操作只会返回满足条件的第一个节点
//querySelectorAll(selector)-根据标签选择器selecor选择所有满足条件的节点，并且以数组的形式返回
//insertBefore(newNode,existNode)--该操作也需要父级节点调用，作用是将新节点newNode插入到已存在节点existNode
// 的前面
//元素节点的删除
//parent.removeChild(child)由父级元素调用，删除其中的子元素child
//node.remove()直接由对应的节点调用，，删除自身 node就是节点的意思
body_mark.removeChild(mark1)
mark1.remove();
//元素节点的替换
body_mark.replaceChild(mark1, document.querySelector('div'));
//获取制定标签的所有子级标签
//node.children--元素属性，获取指定元素node的所有直接子级元素节点
//node.chhildNodes--元素属性，获取指定元素node的所有直接子级节点（包括文本节点）
//node.firstChlid--元素属性，获取指定元素的第一个节点（可能是元素节点也可能是文本节点）
//node.firstElementChild--元素属性，获取指定元素的第一个元素节点
//获取指定元素的父级节点（parentElement-获取元素的直接父级元素节点，parentNode-获取元素的直接父级节点）
//previousElementSibling,list的相邻元素节点，previousSibling相邻的兄弟节点，可能是文本节点
//nextElementSilbling--获取指定元素的相邻上一个兄弟元素节点
//nextElementSilbling--获取指定元素的相邻下一个兄弟元素节点
//点击事件
//注意：为标签添加点击事件有两种
//方式1--直接在网页中为对应的按钮设置onclick属性，进而绑定对应的函数，但是注意该方法绑定的时间擦偶哦为爱调用者是window对象
//方式2--在js中获取指定元素节点，通过为节点添加onclick属性绑定事件，该方法调用事件对象是直接绑定元素节点，推荐使用
//注意：在事件操作中存在系统内中的变量this，该this变量中存储的是未来调用该事件的具体DOM元素对象
//事件计时器
//计时器setInterval（fun ， time）创建一个计时器，每隔指定的时间完成指定的操作，其中fun对应的是一个回调函数，用来定义具体做动画的操作，time对应的是一个毫秒
// 为单位的数值，代表时间间隔
// 注意：setInterval会有一个返回值，用来返回创建计时器对象么热切该计时器可以实现某一个功能的重复调用
//clearInterval（timer）--该操作用来停止计时器
varconunt = -1;
vartimer = setInterval(function () {
conunt++;
document.querySelector('h1').innerHTML = conunt;
if (conunt == 1000) {
//停止计时器的操作
clearInterval(timer)
}
},10)
//函数定义
// 函数的定义分为两步:
// 第一步:函数定义,定义一个制定名字的函数,
// 第二步:在需要使用该函数的地方通过函数名(参数列表)完成调用,注意函数指定在调用时函数内部的代码才会执行!
//
// 函数的返回值:当函数调用结束之后需要在调用的文件中返回对应的结果;
// return:函数调用结束的标志,当函数调用过程中如果函数执行到return,此时函数直接调用结束,因此return关键字下面禁止出现其他代码;
// 注意:如果函数具有返回值,此时函数在调用的过程中需要定义变量存储函数调用结束之后的返回结果;
参数类型
// 在函数定义的过程中设置的参数称为形式参数functiongetRandome(min,max)
// 在函数调用的过程中设置对的参数称为实际参数varrandom=getRandome(num1,num2)
// 注意:实参将数据传递给形参的过程中是一个拷贝的过程,因此函数内部对形参数据的修改不会实参中的数据,但是如果传递的是数组,则原数组数据会受影响
//回掉函数:函数A函数B,其中函数B作为函数A的参数欸传入A中,.在A中合适的时间完成函数B的调用,此时函数B被称为A的回掉函数,
// 回掉函数的作用:可以实现公共代码的封装,同时候扩充功能代码所能够完成的功能
//
function common(n1,n2,callBack){
if(typeof(n1)=="string"||typeof(n2)=="String"){
n1=Number(n1);
n2=Number(n2);
}
return callBack(n1, n2)
}
// 定义函数完成对数组的排序
function sort1(target,callBack){
for(var i=0;i<target.length-1;i++){
for(varj=0;j<target.length-1-i;j++)
if(callBack(target[j],target[j+1])){
vartmp=target[j];
target[j]=target[j+1]
target[j+1]=tmp;
}
}
}
闭包函数
// 闭包函数的定义:
// 在函数A内部重新定义一个函数B,函数作为函数A的返回值返回给外界,此时函数B被称为A的闭包函数
// 闭包函数的作用:可以延迟函数A中变量的释放时间,知道函数B被调用结束,但是狐疑闭包函数在调用过程中很容易出现内存泄漏
function jisuan(num){
num+=20;
return function(){
alert(num)
}
}
递归函数
定义一个函数求n的阶乘
function jiecheng(n){
if(n==1){return 1;}
else{
returnn*jiecheng(n-1)
}
}
// 使用递归函数,求1-100 所有整数的和
// function sum1(n){
// if(n==1){
// return 1;
// }else{
// return n+sum1(n-1)
// }
// }
// 全局变量和局部变量的区别:
// 全局变量定义在函数外部的变量称为全局变量,全局变量作用域:作用于整个程序运行过程中,
// 局部变量-定义在函数内部变量称为局部变量,局部变量作用域:之作用当前函数内部,并且从变量定义开始到函数调用结束,
// 注意:全局变量中的值在程序运行过程中可能随时发生变化,因此使用时一定小心
//
数组:数组本质上是一个容器,可以帮助开发人员快速提供多个相同的变量,只不过多个变量之间为了区分,每一个变量都会对应一个下表,下标值从0-元素个数-1
// 数组的定义:
// // 注意 js中的数组是一个长度可变的数组,并且数组中每一个元素存储的数据都是任意数据类型;
切片操作:该操作作用是从元数组中通过制定的下表去除连续的一部分,并且以新数组的形式返回
// // 注意:slice(start,end)在切片时,切片会从起始位置(start)直到结束位置的前一个位置(end-1)
//
//数组中添加
vararr2 = [1, 2, 3, 4, 5, 6, 7]
// // 数组前置添加
// arr2.unshift(10)
// document.write(arr2)
// // 数据的后置添加
// arr2.push("hello")
// document.write(arr2)
// 数组中其他位置添加元素
// // splice(index, 0,item1...)--数组中从下标为index的位置之前开始完成多个元素(idem)de数据插入
// arr2.splice(1,0,"world")
// // document.write(arr2)
// // 数组元素的删除
// // 数组开始元素的删除
// // shift()--直接将数组第一个位置的元素删除并返回
// var item=arr2.shift()
// // document.write(item+'<br>')
// // document.write(arr2)
// // pop()直接删除数组中最后一个位置的元素,并且把钙元素返回
// item =arr2.pop()
// document.write(item+'<br>')
// document.write(arr2)
//splice(index ,length)从数组index位置开始连续删除length个数组元素,并且将删除的元素返回,如果length>1此时返回的数据是一个对应的数组
数组数据修改(替换指定位置的元素)
// // splice(index,length,item1.....)从数组index的位置开始一次替换length个元素,分别用item1....来替换
// arr2.splice(1,1,"bbbb")
// document.write(arr2)
获取数组中元素的总个数
// // document.write(arr2.length);
// // 获取数组中制定元素的下标
// //indexof()item获取item元素在数组中第一个位置的下标并返回,但是item在数组中不存在,此时返回为-1.
// concat():完成对数组元素的拼接,注意该操作并不会影响原数组,而是将拼接之后的结果用心的数组返回,
// document.write(arr3.concat([1, 2, 3, 4, 5]) +'<br>')
// document.write(arr3)
将数组元素按照指定格式还换成字符串
// document.write(arr3.join('='))
随机数Math.random生成一个随机数,该随机数的取值范围为0-1;如果需要生成一个[a,b)的随机数,此时需要将random扩大b-a倍并加上a.即Math.random()*(b-a)+a;
// 如果想要得到a-b之间的随机整数,此时公式为Math.floor(Math.random()*(b-a+1)+a)
冒泡排序:双层for循环,外层循环控制比较的趟数,内循环控制比较的次数,
// 注意:外层循环的减1操作可省略,但是内层循环的减1操作不可以省略,否则在第一躺比较重造成数组越界
数组:注意单纯意义上的数组赋值时一个浅拷贝过程,相当于把数组地址拷贝一份赋值给其他变量,此时通过其他改变数组,下相当于修改原数组本身,如果不想修改原数组本身,可以通过深拷贝拷贝一个新的数组存储原始数组数据,能够实现深拷贝的操作concat(),slice()
// 二维数组:数组中每一个元素都是一个数组,此时该数组就是一个二维数组就是一个二维数组,为为数组的遍历需要使用双层for循环,外层循环控制行数,内层循环控制每一行的咧数
//字符串的定义
// var str = "我是字符串1"
// str = '我是字符串2'
// str = `ffsdfdsfsdf`;
// document.write(str)
// //字符串匹配
//正则命令表达式由正则表达式构成的表达式,
// 常用的正则命令:
//g放在整个正则表达式的最后,代表正则指令需要完成全局匹配
//+直接跟在一个字符匹配命令的后面代表至少匹配一个对应的字符;
// ^，&:用来划定正则表达式的开头和结尾,用来划定正则表达式的表示范围
// 匹配字符的命令
// \d代表匹配一个数字字符;
// \D=[^0-9]:匹配一个小写字母
// \b:匹配一个单词边界
// \B:匹配一个非单词边界
// .:匹配任意一个字符(除了\n,\r以外)
// x|y:匹配字符串中含有x或y比如z|food匹配字符串中含义有z或food的部分;
// [a-z]:匹配一个小写字母,
// [a-z0-9A-Z]:匹配一个字母或数字字符;
// [^a-z0-9A-Z]:匹配一个非字母或数字字符
// 控制匹配次数
// ?:连续匹配0次或1次,
// +:连续匹配至少1次,
// *:连续匹配至少0次=={0,},
// {m}:直接跟在字符验证的后面,代表连续匹配m次,
// {m,}:至少匹配m次,
// {m,n}:至少匹配m次之多匹配n次;
// (?=12):相当于一个限定条件,要先满足条件,先进行匹配
// console.log('yufgg1j121b1jkbkjh'.match(/(?<!12)\d/g))
// 写一个正则表达式判断身份证号是否合法
// var n.match(/^\d{17}[0-9X] $/g)
// 定义一个正则表达式完成邮箱验证
//console.log('1231321321@163.com'.match(/^\w {6,}@(\w+)(.(com|cn))+$/))
// 统计字符串中含有多少个单词
// console.log('l liveyou'.match(/\b/g).length/2)
// 定义一个字符串,统计该字符串中空格的数量
// console.log('llive you'.match(/[ ]/g).length)
// js中正则表达式写法:
// /正则命令/g
//字符串match()操纵:该操作需要人为提供一个正则表达式,完成对制定字符串的内容截取,将截取的内容以数组的形式返回,
//有一个小数,去除小树的小数
// console.log('123.123'.match(/\d+/g).join(""))
// replace():字符串替换,根据正则表达式定义的规则完成对指定内容的替换,
// 'dasdasda asd asd a a dsad sa fds fds fds'.replace(/[^a-z0-9A-Z$,'']/g)
// 对字符串数据的验证:test(str)正则表达式对象自带的验证方法,用来验证字符串str是否符合正则命令的限制,返回结果是一个波尔类型的值false true;
考题:
- 简述回调函数的含义级回调函数的作用？（10 分） 答：函数 A 作为另一个函数 B 的参数被传入到函数 B 中，并且在函数 B 中调用，此时函数 A 称为函数 B 的回调函数 作用：通过回调函数将一些不确定的操作交给使用者实现，从而可以 实现将公共代码进行统一封装，扩充公共代码的功能！
2. 简述 break 和 return 的区别？（10 分）
答：break 是循环或 switch-case 分支语句中断操作，但是 return 则是 函数调用结束的标志，用来完成函数运行结果的返回，同时注意 return 后面不能再放任何其他代码！
3. setInterval 和 setTimeout 的区别？（10 分）
答：setInterval 返回一个计时器对象，该计时器可以实现某一操作的循 环调用，是 js 动画实现的核心 setTimeout 也返回一个计时器对象，但是该计时器只能调用一次，因此 该计时器一般用来完成某一操作的延迟执行！ 4. innerHTML 和 innerText 的区别和联系？（10 分）
答：联系--都可以用来设置标签的文本节点（内容） 区别：innerHTML 可以直接设置标签的一个对应的结构，但是 innerText 只能设置标签的字符串类型的文本数据 5. querySelector 和 querySelectorAll 的区别?
答:querySelector 根据指定的选择器获取第一个满足条件的元素节点， 返回结果是一个元素节点类型 querySelectorAll 根据指定的选择器获取满足条件的所有元素节点，返 回结果是一个数组类型 6. 常见的 DOM 节点分类有哪些？（10 分） 答：属性节点，元素节点和文本节点
7.简述常用的获取元素节点的方法？（10分）
答:document.getElementById--根据标签id属性值获取标签 document.getElementsByClassName--根据标签的 class 属性值获取标 签 document.getElementsByTagName--根据标签的标签名获取标签 document.getElementsByName--根据标签的 name 属性值获取标签 document.querySelector--根据指定的选择器获取第一个满足条件的元 素节点 document.querySelectorAll 根据指定的选择器获取满足条件的所有元 素节点
8、常用的元素节点属性有哪些？（10 分）
答：className--设置标签的 class 值 style--设置或获取标签的 css 样式（注意只能获取行间样式） children-元素属性，获取指定元素 node 的所有直接子级元素节点 childNodes--元素属性，获取指定元素 node 的所有直接子级节点（包 含文本节点） firstChild--元素属性，获取指定元素的第一个节点（可能是元素节点也 可能是文本节点） firstElementChild--元素属性，获取指定元素的第一个元素节点 parentElement-获取元素的直接父级元素节点，parentNode-获取元素的直接父级节点 previousElementSibling--获取指定元素的相邻上一个兄弟元素节点 nextElementSibling--获取指定元素的相邻下一个兄弟元素节点 9、猴子吃桃问题：猴子第一天摘了若干个桃子，当即吃了一半，还不 过瘾又多吃了一个。第二天早上又吃了剩下桃子的一半，之后又多吃了 一个。以后每天早上都是一样。到第 10 天时发现只剩下 1 个桃子，问猴 子第一天共摘了多少个桃子？
答：var sum = 1;
for(var i = 10; i > 1; i--){
sum = (sum+1)*2
}
document.write(sum); 10、有一对幼兔，幼兔一个月后长成小兔，小兔一个月后长成成兔并生 下一对幼兔，问 8 个月后有多少对兔子，成兔，小兔，幼兔对数分别是 多少？（10 分）
答：var n1 = 1, n2 = 0, n3 = 0;
for(var i = 1; i <= 8; i++){
var yt = n2 + n3;
var xt = n1;
var ct = n3+n2;
n1 = yt;
n2 = xt;
n3 = ct;
}
document.write(`幼兔${n1}对,小兔${n2}对, 成兔${n3}对`);