原生js概念知识点_js 原生不包含的内容-CSDN博客

/*DOM: Document Object Medel
文档：html页面
文档对象：页面中的元素
文档对象模型：为了能让程序（js）操作页面中的元素
DOM 看做一颗树状结构里面的元素为节点（DOM节点），同时定义方法操作树
元素.childNodes:子节点列表集合
childNodes只包含一级子节点，不包含孙及以下。
标准下：包含文本和元素节点，也包含非法嵌套类型
非标准下：只包含元素类型节点，ie7不包含非法嵌套
元素.nodeType:只读属性当前元素的节点类型
元素节点:1 \\ 文本节点:3
//属性
//元素属性:元素.attributes 只读属性集合
DOM类型:12种元素节点、文本节点（也算）
children:只读属性子节点列表集合。

oUl.getElementsByTagName('li') = oUl.children;//集合

children:只包含一级子节点，不包含孙及以下。*/

DOM元素节点nodeType取值
整数	常量
1	ELEMENT_NODE，普通元素节点，如<html>,<p>,<div>,<span>,<img>
2	ATTRIBUTE_NODE，元素属性
3	TEXT_NODE，文本节点
4	CDATA_SECTION_NODE，即<![CDATA[ ]]>
5	ENTITY_REFERENCE_NODE，实体引用，如&
6	ENTITY_NODE，实体，如<!ENTITY copyright “Copyright 2010, impng. All rights reserved”]>
7	PROCESSING_INSTRUCTION_NODE，PI，处理指令，如<?xml version=”1.0″?>
8	COMMENT_NODE，注释<!– –>
9	DOCUMENT_NODE，根节点，即document.nodeType
10	DOCUMENT_TYPE_NODE，DTD，文档类型<!DOCTYPE >
11	DOCUMENT_FRAGMENT_NODE，文档片段
12	NOTATION_NODE，DTD中定义的记号

js:getById、getByClass方法分装调用

<script type="text/javascript">
// var oNav = getById('nav');
function getById(id){
return document.getElementById(id);
}
/*var oUl = $('ul1');
var aLi = getByClass(oUl,'aLiclssname');*/
function getByClass(oParent,sClass){
var aElem = oParent.getElementsByTagName('*');//选择所有的父级
var arr = [];
for(var i=0;i<aElem.length;i++){
if(aElem[i].className == sClass){
arr.push(aElem[i]);
}
}
return arr;
}
</script>

js添加/移除class:

oDiv.classList.add('class2');

oDiv.classList.remove('class2');

标准下firstChild会包含文本类型的节点（无效）
非标准：只包含元素节点
元素.firstElementChild（lastElementChild、firstElementChild=children[0]、nextElementSibling、previousElementSibling）
（可以直接再浏览器中使用该属性需加Element）:只读属性标准下获取第一个元素类型的子节点
元素.nextElementSibling:下一个兄弟节点
元素.previousElementSibling:上一个兄弟节点

元素.parentNode:只读属性当前节点的唯一的父级节点.（可以直接使用）
元素.offsetParent:只读属性离当前元素最近的一个有定位的父节点
如果没有定位父级默认为body

/*document.createElement('要创建的标签名')创建元素
父级.removeChild(要删除的元素) 删除元素：oUl.removeChild(oLi[0]);//获取li组要加0从第0个开始，其他的直接加例如：oDiv.

removeChild(oLi[0])不能与querySelectorAll配合会报错
添加到指定位置
父级.appendChild(要添加的元素)方法追加（创建的标签）子元素
oUl.appendChild(oLi);//后面添加
父级.insertBefore(新的元素,被插入元素)
oUl.insertBefore(oLi,oUl.children[0]);//前面插入
父级.replaceChild(新节点，被替换的节点)
document.body.replaceChild(oDiv,oP);前一个替换后一个

元素.cloneNode(true);//加true同时克隆下面所有子孙节点
var cEle = oDiv.cloneNode();//只克隆元素本身
只克隆元素本身不会克隆该元素下的所有节点(默认false),也不会克隆事件，需克隆事件的话需要：
oDiv3.appendChild(cEle);

appendChild,insertBefore,replaceChild都可以操作动态创建出来的节点，也可以操作已有节点*/

js 删除当前元素所在父级

function del(thisdel){
thisdel.parentNode.parentNode.removeChild(thisdel.parentNode);
}

//alert(oTab.tBodies[0].rows[1].cells[1].innerHTML);//dd
/*tHead:表格头
tBodies:表格内容
tFoot:表格尾
rows:行
cells:列

% 取模的妙用，对于：0、1、2、3、4... 等等循环来说。

n%2 =0，1；

n%3 =0，1，2；

n%4 =0，1，2，3；

看循环的是0-n； %后面的数字就是n+1；

/*<input type="text" id="text1" name="text1"/>
name :oForm.text1.value/父级.name[第几个].value
有name属性的用name选择比id更好

alert(oForm.text1.value);*/

getBoundingClientRect:(返回值为一个对象)获取某个元素的信息
   console.log(odiv.getBoundingClientRect().width)
   left,bottom,top,right,width,height
   注意：获取的值会根据滚动条变化

// onfocus:当元素获取到焦点的时候触发
//onblur:当元素失去焦点的时候
// obj.focus();给指定元素设置焦点
// obj.blur();取消指定元素的焦点

//obj.select();只能选择用户输入的内容

事件冒泡：当一个元素接收到事件的时候，会把他接受到的所有传播给他的父级；一直到 window 为事件冒泡（该发生还是会发生）

//给一个对象绑定一个事件处理函数的第一种形式

//给一个元素绑定事件函数的第二种形式：
//给一个对象的同一个事件绑定多个不同的函数:（同一个按钮点第一次发生ss，第二次发生xx）

//document.onclick = fn1;
function fn1(){
alert(1);

}

ie：obj.attachEvent(事件onclick，函数名称);
document.attachEvent('onclick',fn1);
ie:没有捕获，点击加on、顺序为从最后一个到第一个
标准:obj.addEventListener(事件不用on，函数名称，是否捕获true or false)

document.addEventListener('click',fn1,false);
是否捕获：默认为false;false:冒泡、true:捕获；

标准:有捕获、事件名称没有on、顺序为第一排到最后

//事件取消
/*
ie：obj.detachEvent(事件名称，函数名字);
标准:obj.removeEventListener(事件名称，函数名字,是否捕获)

onkeydown:当键盘按键按下;如果按下不抬起会连续触发
onkeyup:当键盘按键抬起;
// 不是所有元素都能够接受键盘事件，有焦点就可以

按下具体的键位
event.keyCode:数字类型键盘按键的值键值
ctrlKey、shiftKey、altKey 布尔值
当一个事件发生的时候，如果 ctrl || shift || alt
键为按下状态则返回true否则false

事件默认行为：当一个事件发生的时候浏览器自己默认做得事情
/*
怎么阻止？:
当前这个行为是什么事件触发的，然后在这个事件的处理函数中使用return false;

oncontextmenu:右键菜单事件,显示出来时候触发

onmousewheel :滚动条

document.onmousewheel = function(){
return false;

}

event.clientX、event.clientY: x、y鼠标的坐标

oDiv.style.left = event.clientX + 'px';
oDiv.style.top = event.clientY + 'px';

div的left、top值等于鼠标的位置

cookie:储存数据、当用户访问了某个网站的时候，通过cookie存储在访问者电脑上，
1，不同浏览器存放的cookie位置不一样，也是不能通用的
2，cookie的存储以域名的形式进行区分
3，cookie可以设置名字
4，一个域名下存放的cookie个数是有限制的，不同的浏览器存放的个数不一样
5，每个cookie存放的内容大小也有限制，不同浏览器不一样

如果我们想长时间存放一个cookie要设置一个过期的时间(默认临时存储)：
document.cookie = '名称=值;expires= +时间'
var oDate = new Date();
document.cookie = 'username=dj;expires='+oDate.toGMTString();//转为字符串格式
\n换行

当我们通过document.cookie 来获取当前网站下的cookie的时候，得到的字符串形式的值，他包含了当前网站下所有的cookie,他会把所有的cookie通过一个分号+空格的形式串联起来
例子:document.cookie ='username=dj','名字等于值'

*/
document.cookie = 'username=dj';
document.cookie = 'age=21';
document.cookie = 'username=dj;expires='+oDate.toGMTString();
// alert(document.cookie);
var oDate = new Date();