因为疫情的原因导致本该去学校的日子，却留在了家中，自加入在家协作学习js也有一段时间了，整体上学习效果并不如在学校好，不过也很有收获！
1.什么是js？
js既JavaScript，是应用于前端的直译式脚本语言，可增强HTML页面，实现动态效果，和用户交互，通常可以嵌入HTML代码中，它是一种解释型语言，是基于原型面向对象的，不需要编译，通过浏览器的解析后渲染进HTML页面。
2.DOM操作
1. getElementById()：
参数：元素的ID值。 （元素节点简称元素）
返回值：一个有指定ID的元素对象（元素是对象）
由document对象调用。
用法：document.getElementById(id)
2. getElementsByTagName():
参数：元素标签名
返回值：一个对象数组。这个数组里每个元素都是对象，每个对象分别对应着文档里给定标签的一个元素。
用法：document.getElementsByTagName(TagName)
3. getAttribute():
参数：元素的某个属性名
返回值：得到元素属性的属性值
用法：object.getAttribute(Attribute)
4.setAttribute
参数：两个参数，分别为：元素的某个属性名、这个元素的新属性值
setAttribute()可以对节点的属性值进行修改，只能通过元素节点对象调用。如果元素原来没有这个属性值，则setAttribute创建此attribute,然后再赋新值；如果已存在此属性，则对原来的值进行覆盖。
用法：element.setAttribute(attribute, value).
3.节点的插入
采用先创建再插入的模式
创建节点：document.createElement(标签名)
赋予内容：Node.innerHTML=内容字符串
插入节点：
appendChild() 方法：可向节点的子节点列表的末尾添加新的子节点。语法：appendChild(newchild)
insertBefore() 方法：可在已有的子节点前插入一个新的子节点。语法 ：insertBefore(newchild,refchild)
例子：
body内容：
<div class="btns"><input type="button" value="插入元素" id="creatbtn"/></div>
<div id="box-one">
<p class="con2" id="p1">1</p>
<p class="con2">2</p>
<p class="con2">3</p>
</div>
js脚本：
function insertEle() {
var oTest = document.getElementById("box-one");
var newNode = document.createElement("div");
var reforeNode = document.getElementById("p1");
newNode.innerHTML =" This is a newcon ";
//oTest.appendChild(newNode);
oTeset.insertBefore(newNode,null); // 这两种方法均可实现
oTest.insertBefore(newNode,reforeNode); //新建的元素节点插入到 id为p1的元素前面
}
4.js闭包
作用：函数外部使用局部变量
闭包三大特性：
1.函数嵌套函数
2.函数内部可以引用外部的参数和变量
3.参数和变量不会被垃圾回收机制回收
创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量
闭包的缺点就是常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。
例子：var b = function(){
var n = 12450;//局部变量
var x = function(){
alert(n);
}
x(); //12450
return x;
}
var a = b();
a(); //12450
a=null;
js实现加法器：
function aaa() {
var a = 1;
return function(){
a++;
};
}
var fun = aaa();
fun();// 1 执行后 a++，，然后a还在~
fun();// 2
fun = null;//a被回收！！
5.offset、client、scroll
offsetParent距离最近并且是已进行过CSS定位的父级容器元素
offsetWidth = border-width*2+ padding-left+ width+ padding-right
offsetHeight = border-width*2+ padding-top+ height+ padding-bottom
offsetTop= offsetParent的padding-top + 中间元素的offsetHeight + 当前元素的margin-top
offsetLeft= offsetParent的padding-left + 中间元素的offsetWidth + 当前元素的margin-left
clientWidth 对象可见的宽度，不包括滚动条等边线，会随窗口的显示大小改变
clientHeight 对象可见的高度
clientTop、clientLeft 这两个返回的是元素周围边框的厚度，一般它的值就是0。因为滚动条不会出现在顶部或者左侧
scrollHeight 获取对象的滚动高度，对象的实际高度；
scrollLeft 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth 获取对象的滚动宽度
6.获取节点
1. 通过获取dom方式直接获取子节点
document.getElementById("test").getElementsByTagName("div");
2. 通过childNodes获取子节点
document.getElementById("test").childNodes;//结果是数组
3.通过children来获取子节点
document.getElementById("test").children[0];
4.firstChild来获取第一个子元素
document.getElementById("test").firstChild;
5.astChild获取最后一个子节点document.getElementById("test").lastChild;
6. parentNode获取父节点document.getElementById("test").parentNode;
7.通过获取父亲节点再获取子节点来获取兄弟节点document.getElementById("test").parentNode.children[1];
8.获取下一个兄弟节点
document.getElementById("test").nextSibling;
js中的大多数操作都是靠一些小知识来进行的，利用这些知识就可以做出好多页面特效！
网友评论