原生js操作dom的笔记整理

javascript分为3部分
ECMAScript 基础语法
DOM d – document o object m –model 文档对象模型
BOM
DOM
DOM 给我们提供了一些方法，让我们可以使用js来控制页面中的标签等。

页面元素 – 页面中的标签
常用的dom方法

• document.getElementById(“box”);//通过id获取标签
• document.getElementsByTagName(“div”);根据标签名获取页面元素

注意：
    由于获取结果可能是多个，element后面要加s
根据标签获取的结果是伪数组形式，伪数组是不具备数组的方法。
要操作伪数组中的所有元素需要遍历伪数组。

根据标签名获取元素时，有可能获取到的标签只有一个，但是形式还是伪数组。

根据标签名获取时，document可以更换为任意标签

在box中获取li标签。
注意： 根据id获取的时候，前面只能写document

- document.getElementsByclassName(“box1”) 根据类名获取页面元素
- window.onload()中的代码会在页面完全加载后执行。
设置标签的样式等方法
对标签的样式设置使用.style

var box=document.getElementById("box");
box.style.width="100px";
box.style.backgroundColor="#ff00000"//带有段横线的属性要是用驼峰命名的方式。

设置标签的内容。
box.innerHtml=”哈哈”；

事件类型
- 点击事件 onclick
- 鼠标移入 onmouseover
- 鼠标移出 onmouseout

类名属性
访问标签的类名属性通过 标签.className

标签默认事件
某些标签具有默认的效果，例如a标签的跳转，有时候我们不想要这种效果，可以在事件最后加上return false;

循环添加事件
当我们进行循环添加事件的时候，在事件内部不能使用i，因为i的值已经是循环的结束条件那个值了（根据循环设置的具体情况而定）。

<script>
var box=document.getElementsByClassName("box");
for(var i=0;i<box.length;i++){
    box[i].onclick=function () {
        alert(this.innerHTML);
    }
}
</script>

焦点事件
onfocus 文本框获取焦点时触发事件
onblur 失去焦点时触发事件
表单的常用属性：
input获取内部文本 使用value ipt.value

表单的属性
（不太常用）禁用表单 ipt.disabled 可以给表单禁用。设置值为true表示禁用，false表示启用
复选框选中 cb.checked 值为true表示选中 值为false表示没选中
下拉菜单选中 doudou.selected 值为true表示选中，为false表示没选中
全选反选的案例
方式一：使用flag（需要掌握）

方式二：不使用flag

样式相关
样式表有三种方式

内嵌样式（inline Style）：是写在Tag里面的，内嵌样式只对所有的Tag有效。

内部样式（internal Style Sheet）：是写在HTML的里面的，内部样式只对所在的网页有效。

外部样式表（External Style Sheet）：如果很多网页需要用到同样的样式(Styles)，将样式(Styles)写在一个以.css为后缀的CSS文件里，然后在每个需要用到这些样式(Styles)的网页里引用这个CSS文件。 最常用的是style属性，在JavaScript中，通过document.getElementById(id).style.XXX就可以获取到XXX的值，但意外的是，这样做只能取到通过内嵌方式设置的样式值，即style属性里面设置的值。

通过标签.style.width 只能获取行内设置的样式属性，内嵌式和外链式都无法获取。

getComputedStyle(标签,false).width 可以获取计算后的样式(ie不支持)

console.log(getComputedStyle(box,null).height);
console.log(getComputedStyle(box,null)["height"]);

ie低版本不支持getComputedStyle
标签.currentStyle.height

console.log(box.currentStyle.height);
console.log(box.currentStyle["height"]);

封装一个兼容的获取样式的方法。

//tag是标签，attr是需要获取的属性。
function getStyle(tag,attr){
    if(tag.currentStyle[attr]){//先判断有没有这个属性，没有是undefined，不会报错。
        return tag.currentStyle[attr];
    }else{
    return getComputedStyle(tag,null)[attr];
}

同时设置标签的多个样式

box.style.cssText="width:10px;height:100px;background-color:red";//不常用

文本的设置：
box.innerHTML 可以获取和设置某个标签内的文本和内部标签

box.innerHTML="中午吃<span>我是sapn的内容</span>"

通过box.innerText可以获取不含内部标签的文本，ie支持
其他浏览器支持box.textContent属性，作用与innerText相同

标签的获取方式
document.getElementById(“id名”) 根据id获取
document.getElementsByTagName(“标签名”) 根据标签名获取
document.getElementsByClassName(“类名”) 根据类名获取 ie低版本不支持

封装根据类名获取页面元素的函数(性能不高)

节点
dom – 文档对象模型 document是dom中的顶级对象
dom把html页面看作一个树结构
dom树中的每一个部分我们都称为节点。

节点访问关系
dom中提供了一套访问关系，称为节点访问关系

父子访问关系：
通过parentNode可以访问某个节点的父节点
通过childNodes可以得到某个节点的所有子节点，包含文本节点（空格和换行）
通过children可以得到某个节点中的所有元素子节点（不是标准方法，但是所有浏览器都支持，可放心使用）。
获取子节点
node.firstChild 表示第一个子节点（包含文本节点）
node.lastChild 最后一个子节点（包含文本节点）

获取元素子节点：ie低版本不支持
node.firstElementChild 第一个元素子节点
node.lastElementChild 最后一个元素子节点

兄弟访问关系：

不加element的都支持，加上的ie低版本

添加子节点
从后面添加：节点.appendChild(传入的节点); 添加的新节点其实是移动过来的。
从前面添加：节点.insertBefore(要插入的节点 , 在谁之前); 将节点插入到子节点中指定节点的前面。
注意：一定是父节点去调用方法，操作的都是子节点

创建节点的方式
节点.innerHTML
document.write(“
”)

第三种创建方式document.createElement(“标签名”)
document不能更换

var newbox=document.createElement("标签名")；
box.appendChild(newbox);


删除节点
父节点.removeChild(子节点)
调用的对象是父节点、
父子访问关系
访问父元素：节点.parentNode
访问子元素：
1、 全部子节点 childNodes 全部子节点 （包含文本节点）
2、 全部元素子节点 children 全部的元素子节点（标签）
总结：
访问某个子节点：
1、 第一个子节点 firstChild （有可能是文本节点）
2、 第一个元素子节点 firstElementChild ie低版本不支持
3、 最后一个子节点 lastChild （有可能是文本节点）
4、 最后一个元素子节点 lastElementChild ie低版本不支持

兄弟访问关系：
1、 前一个兄弟节点 previousSibling （有可能是文本节点）
5、 前一个兄弟元素节点 previousElementSibling ie低版本不支持
6、 后一个兄弟节点 nextSibling （有可能是文本节点）
7、 后一个兄弟元素节点 nextElementSibling ie低版本不支持

onkeyup 键盘上的键抬起来触发事件
克隆节点
节点.cloneNode(参数)

var box=document.getElementById("box");
var newNode=box.cloneNode(true);//如果传入的是true那么就是标签和内容一起复制。
var newNode=box.cloneNode(false);//如果传入的false那么就是只克隆标签不再复制内容。 

随机数计算
Math.random() [0,1)能取到0但是不能取到1；
如果想要获取任意两个数之间的随机数：
例如：236-463 先计算差，然后用Math.random()*差 + 第一个数

var ran=Math.random()*(463-236)+236;

ondblclick 双击触发

替换节点
replaceChild();
替换节点：父节点.replaceChild(新节点，要替换掉的子节点);

//创建一个新标签
var newp=document.createElement("p");
newp.innerHTML="我是新的p标签";
box.replaceChild(newp,p);
//replaceChild()方法的第一个参数是新的参数，第二个是需要被替换的参数；
//替换掉的参数并没有删除，只是不显示，但是还是存在，可以继续使用。
box.appendChild(p);

节点的类型
节点的类型分为元素节点，文本节点，属性节点。
节点的三大属性

每个节点都有三个属性
nodeType 用于获取节点的类型
获取结果是一个数值：
1为元素节点 2为属性节点 3为文本节点

nodeName 节点名
元素节点的节点名就是标签名

nodeValue 节点值
元素节点没有节点值，值为null,文本节点的节点值就是文本，属性节点的节点值就是该属性值。

属性的操作
当我们在行内设置自定义属性时，无法通过标签.属性的形式直接获取
使用节点.getAttribute(“属性名”)获取属性
使用节点.setAttribute(“属性名”,”新的属性值”)设置属性
节点.removeAttribute(“属性名”) 可以移出指定属性

注意：通过上面的方式获取的结果只是属性，而不是属性节点
想要获取属性节点使用 节点.getAttributeNode(“属性名”);

 <td id="john" name="myname">John</td>   
 var john=document.getElementById("john").getAttributeNode("name");//这样获取到的就是一个属性节点。
 hohn.nodeValue=节点.getAttrbute("name");

获取到的节点的节点值相当于getAttribute获取的值。

所以我们一般不是用属性节点进行操作。