- 获取元素
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快。但是比采用数组的慢,不过结构清晰。