JavaScript 基础知识总结-优快云博客

Dom 编程：

取得相应id的对象: getElementById("标签id id唯一 ")
根据css类名选取元素： getElemenetsByClassName("<style 标签中定义的css>")
通过dom获得element之后设置属性及属性值：element.setAttribute(attributeName,attributeValue)
dom 创建节点：
创建html 标签节点：document.createElement("h3")
创建html 文本节点：document.createTextNode(String)
增加节点：
在element 内部的最后添加一个节点：element.appendChild(Node)
在element内部中已经存在的节点前插入新的节点：elelment.insertBefore(newNode,existingNode);

html基础知识：
html嵌套js方式：<script>标签，<script src="xx.js">，<button onlick="">
判断相等：=== 判断值与类型相等，instanceof，类.prototype.isprototypeof(对象)[判断某个对象是否为某个类对象]，a.constructor==类名
真与假：！非，！！双重否定，0，“”，null全为假
数组的添加与删除：var a=[];a.shift(),删除第一个，a.pop()删除最后一个；a.unshift(argments) 在数组开头，a.push(argments) 在数组结尾

表格属性：
insertRow(-1)在表格末尾添加行；insertCell() colSpan 设置列宽；添加列；cell.innerHTML 添加内容 rowSpan 行宽

css 编程：
块级元素：另起一行，宽度默认100%,宽度、行高、顶边，底边大小可控
内联元素：不另起一行，一行课放置多个，只能容纳文本和其他内联元素，大小不可控
display:inline ，display:block display:inline-block
设定样式
标签对象.className="css定义的class样式"
标签对象.style.cssText
cssText 是一个css属性-值的集合设置style 属性
display 隐藏对象不占用空间 visibility 隐藏对象占用空间

盒子模型：
浏览器兼容但是已经支持不带前缀的写法
{
-webkit-box-sizing:border-box; //safari chorme
-moz-box-sizing:border-box; //firefox
box-sizing:border-box;
}

事件绑定：
直接在标签中；
对象绑定：
dom.getElementById("xid").事件=函数
监听器绑定：
dom.getElementById("xid").addEventListener("事件前面去掉on",函数，true/false) true : 监听捕获 false 监听冒泡

对象绑定与监听器绑定区别：
对象绑定只能有一个，后面绑定的函数会覆盖先绑定的
监听器绑定可以绑定多个，可以在同一标签上绑定多个事件

function(event){} event是winows 自动给我们传递的，只在事件的发生过程中有效

事件流：
父父级捕捉事件-》父级捕捉事件-》目标冒泡事件-》目标捕捉事件-》父级冒泡事件-》父父级冒泡事件

preventDefault 取消事件监听器注册的事件函数
stopProgapation 阻止事件冒泡，防止事件被父级事件执行。如果父级定义了与子级相同的事件，如果不取消冒泡，在执行了子级事件之后会往上继续执行父级事件，所以在子级事件中要加入event.stopProgapation

继承：
prototype 向对象添加属性和方法
prototype 是类构造器方法的属性，又是类对象的原型对象（原型对象：以xx为原型构造）。
其中含有属性constructor，这个属性指向类构造器
https://blog.youkuaiyun.com/qq_42497250/article/details/92845285

回调：

回头调用
在f1中调用f2，f2的参数可以在作为与回调函数同等级的参数或者在调用回调函数内部创建

setTimeour=(fn,毫秒) 隔多少毫秒执行，如果在要执行时cpu被占用没能执行，那么会被放到执行队列中当cpu空闲时再去执行
setInterVal(fn,毫秒) 隔多少毫秒执行一次

常见编程规范：_加方法名代表私有方法

把一个长时间的任务进行切分，提升交互
function updateAsync(){
var i=0,c=0;
var timer=-1;
var updateLater=function(){
for(i=0;i<50;i++)
docunment.getElementById('output').InnerHTML +="<div> 第" +(c+1)+"行</div>";
c++;
i=0;
if(c>=500)
clearTimer(timer);
return;
else
timer=setTimer(updateLater,100);
};
updateLater();
}