5.24 js进阶，第一天

• 获取元素

1.通过 ID获取。 getElementById()

console.dir()  --打印我们返回的元素对象，更好的查看里面的属性和方法

2.标签名  getElementsByTagName()       

3.类名

4.选择器 querySelector --返回指定选择器的第一个元素对象

querySelectorAll（）  --返回指定选择器的所有元素对象

• 获取body  html

document.body

document.ducumentElement

• 事件

点击事件  btn.οnclick=function(){     }

修改元素内容： innertext

innertext  和innerhtml的区别

innertext  去除了html标签，空格和换行也去掉了

innerhtml  包括html标签 同时保留空格和换行

• 常用属性操作,修改样式 比如大小 颜色等

input表单里修改 值，不能用innertext   需要用value

按钮被禁用，this.disabled=true   

修改样式，element.style.属性名=属性值。     用的是行内样式，权重较高。

• 焦点---onfocus
• 失去焦点--onblur

修改样式，还有另外一种方法，写一个类。

--用于样式改变大的时候，但是会覆盖掉之前的类，所以我们需要再写类名的时候  加上之前的类 空格 现在的类。变成多类名选择器

this.className='类名'

• 经过鼠标 onmouseover   鼠标离开onmouseout
• 节点操作

父级节点： node.parentNode

子节点：第一个 firstElementChild  最后一个 lastElementChild  但是这个有兼容性问题，所以一般用下面这个：

children[0]     children[children.length-1]

兄弟节点  用的比较少

• 创建、添加节点

先创建：createElement('li')，再添加 父元素.appendChild(li)--这种是在最后追加

在前面追加： insertBefore(添加元素，父级.children[第几个])

• 删除节点

removeChild(父元素.第几个孩子)

• 克隆节点

node.cloneNode()

如果括号参数为空或者false,则是浅拷贝,只赋值节点本身，不克隆里面的子节点

true   是深度拷贝，会赋值节点本身以及里面的所有节点

• 创建元素效率对比：

innerhtml 是把内容写入某个节点，不会导致页面全部重绘，但是效率慢。如果采用数组形式拼接，效率最高！！

createElement  创建多个元素效率比不用数组的innerhtml快。但是比采用数组的慢，不过结构清晰。