DOM相关方法，属性整理

DOM相关方法，属性整理
1、获取元素的方法
1根据id获取对象
document.getElementById('');
2根据标签名获取对象
document.getElementsByTagName('')
3根据类名获取元素对象
document.getElementsByClassName('')
4获取body元素
document.body
2、节点/元素相关方法
1获取子节点
var 子节点的伪数组=父亲.childNodes
2获取子元素
var 子元素的伪数组=父亲.children;
3获取属性节点
var idnode=ul.getAttributeNode('')
4获取下一个兄弟节点
var node=xxx.nextSibing;
5获取下一个兄弟元素
var ele = xxx.nextElemenetSibling
6获取上一个兄弟节点
var node= xxx.previousSibling;
7获取上一个兄弟元素
var ele = xxx.previousElementSibling
8追加子节点
father.appendChild(demo)
把一个节点放到父亲点内部的最后
9插入子节点
father.innertBefore()
10移除
father.removeChild()移除子节点
11克隆
var clone=demo.cloneNode(true);
deep:深度，一般传入true
12创建子元素
var ele = document.createElement()
13获取第一个子元素
var frist=xxx.fristElementChild;
var frist=xxx.children[0];
获取第一个子节点 fristChild
14获取最后一个子元素
var last=xxx.lastElementChild
var last=xxx.children[xxx.children.length-1];
获取最后一个子节点 lastChild
15获取父节点
var parent=xxx.parentNode;

3.元素属性
1.src属性 img标签图片的路径
2.innerText属性 双标签的内部文本
3.innerHTML属性 双标签的内部html textContent也是内部文本
4.className属性 样式
5.disable input标签禁用属性disable 取值true或者false
6.type 不同类型的input的标签
7.value 标签的value的值
8.selected 下拉菜单select某一项被选中 取值true或者false
9.checked checkbox的选中状态 checked 取值true或者false
10.自定义属性 ******
1. 获取 任何标签中的属性都可以获取
console.log(box.getAttribute("a"));//可以获取没有规定的属性
console.log(box.getAttribute("id"));//也可以获取有规定的属性
2. 设置 任何标签中的属性都可以设置
box.setAttribute("b", "2");//可以设置没有规定的属性
box.setAttribute("class", "cls");//可以设置有规定的属性
3. 移除 任何标签中的属性都可以移除
box.removeAttribute("a");
box.removeAttribute("class");

11.背景颜色document.body.style.backgroundColor='red'

12.宽高
box.style.box='200px';box.style.height='200px';
13.背景图片
box.style.backgroundImage='url(images/1.png)';
14.隐藏盒子
this.style.display='none';this.style.visibility='hidden'
15.变盒子的位置
this.style.left='10px';this.style.top='10px;'
16.改变盒子的层级
this.style.zIndex='10'
4.事件
1.点击事件
ele.onclick=function(){} 注意在事件中，要获取当前点击的元素对象都用this
2.鼠标悬浮，鼠标离开事件
悬浮ele.onmouseover=function(){}
离开ele.onmouseout=function({})
3.焦点事件
鼠标失去焦点 ele.onblur=function(){}
鼠标获取焦点 ele.onfocus=function(){}
4.键盘事件
键盘按下 ele.onkeydown=function (){}
键盘抬起 ele.onkeyup=function(){}
5.双击事件
ele.ondibclick=function(){}
5.字符串相关方法
1.字符串的替换方法 replace
xxx=xxx.replace(searchValue,replaceValue);
replace特点：只找第一个匹配的替换
2.字符串的搜索方法indexOf()
xxx.indexOf(searchString);
查找searchString在xxx的第一个索引位置
如果查找的到时不存在字符串-1
如果查找的是""0
3.删除左右空格trim()
txt.value.trim()删除字符串的左右空格

window.onload和$(function(){})
window.onload表示页面加载完了后包括dom和js，再执行函数里面的内容
$(function(){})表示加载完了后再执行函数里面的内容 dom结构加载完毕后
$(document).ready(function(){})

1.$(function(){})不会被覆盖，而window.onload会被覆盖，个人感觉$(function(){})不会被覆盖的原因是将其放入到了一个队列中，在对应时机一次出队。
2. $(function(){})在window.onload执行前执行的，$(function(){})类似于原生js中的DOMContentLoaded事件，在DOM加载完毕后，页面全部内容（如图片等）完全加载完毕前被执行。而window.onload会在页面资源全部加载完毕后才会执行。

DOM文档的加载步骤

1.解析html结构

2.加载外部的脚本和样式文件

3.解析并执行脚本代码

4.执行$(functhion(){})对应的代码

5.加载图片等二进制资源

6.页面加载完成执行window.onload