获取dom元素操作整理

获取元素属性和方法

整理与参考

方法

document.getElementById([ID])// 通过id获取元素节点document.getElementsByTagName([Tag-name])// <input name="myInput" type="text" size="20" /><br />// <input name="myInput" type="text" size="20" /><br />// <input name="myInput" type="text" size="20" /><br />// 这里获取通过document.getElementsByTagName('input') // length == 3document.getElementsByClassNmae([Class-name])// 通过类名获取节点 在IE6-8不兼容document.getElemnetsByName([Name])// <input name="myInput" type="text" size="20" /><br />// <input name="myInput" type="text" size="20" /><br />// <input name="myInput" type="text" size="20" /><br />// 这里获取通过document.getElemnetsByName('myInput') length == 3 在IE中只对表单的name有用document.querySelector([SELECTOR])// SELECTOR选择器语法document.querySelectorAll([SELECTOR])//document.querySelector(#id)//document.querySelector(.className)//document.querySelector(tagName)// 在IE6-8不兼容

jQuery方法

$(selector,context)// selector是选择器，context是可选，可以获取指定元素下的元素

属性

document// 文档本身节点

document.documentElement//不包含html文档识别格式

documnet.head// head节点下的所有document.body// body节点下的所有node.childNodes// 节点的子节点node.children// 所有元素的子节点node.parentNode// 父节点firstChild/firstElementChild lastChild/lastElementChild previousSibling/previousElementsSibling//上一个兄弟节点nextSibling/nextElementSibling// 下一个兄弟节点// 带有Element只有在IE>8才兼容

jQuery方法

$(selector,context).children(selector)$(selector,context).parent()$(selector,context).parents()// 找到所有的父元素直到body$(selector,context).siblings()// 所有的兄弟节点$(selector,context).prev()// == previousSibling 兄弟节点$(selector,context).prev(selector)// 获取第一为p的兄弟节点$(selector,context).preAll()$(selector,context).next()$(selector,context).nextAll()// 查找$(selector,context).find(selector)// 查找$(selector,context).find(selector).filter(selector)// 筛选查找的结果

支持一些伪类选择器
$(selector：eq(n))获取第n个元素
eq(n)获取索引为n
gt(n)获取大于n的元素
lt(n)获取小于索引的元素

增删改操作

创建

document.createElement([tag-name])// 元素节点document.createTextNode([Text Content])// 文本节点varh=document.createElement("H1")vart=document.createTextNode("Hello World");h.appendChild(t);

添加

node.appendChild(node)node.insertBefore(newItem,existingItem)varnewItem=document.createElement("LI")vartextnode=document.createTextNode("Water")newItem.appendChild(textnode)varlist=document.getElementById("myList")list.insertBefore(newItem,list.childNodes[0]);// 将新的itemnode添加在list的子节点的第一个位置

克隆

element.cloneNode([boolean])//克隆element，参数boolean是深克隆还是浅克隆

删除

parent.removeChild(element)// 这里的element使用前面获取的方法，比如parent的子节点等方式

jQuery方法

// 添加$(selector).append(element)$(selector).html(str)// innerHTML$(selector).text(str)// innerText$(selector).inserBefore(element)// 放到元素前面$(selector).inserAfter(element)// 放到元素后面$(selector).appendTo(element)// 放到末尾加入$(selector).prependTo(element)// 放到末尾前面// 克隆$(selector).clone(Boolean)// 布尔值只是函数事件是否复制// 不使用克隆则是移动元素// 删除$(selector).remove()// 设置表单元素的值$(selector).val()// get$(selector).val('1')// set

自定义属性

element.xx=xx element.xx// getdeleteelement// deleteelement.setAttribute('xx',xxx)element.getAttribute('xx',xxx)// 获取属性值element.removeAttribute('xx')// 移除属性值

jQuery

$(selector).attr('name')// 获取$(selector).attr('name','value')// 设置// 批量设置$(selector).attr({'name1':'value1','name2':'value2'})$(selector).removeAttr('name')// 获取// 表单一般使用prop$input.prop('name')// 获取$input.prop('name','value')// 设置

修改样式

element.style.xx='xx'// 修改行内样式element.className='xx'// 设置样式类

jQuery方法

$(selector).css('width',200)$(selector).addClass('name')$(selector).removeClass('name')// 移除$(selector).hasClass('name')// 验证$(selector).toggleClass('name')// 有就移除，没有就添加// 获取$(selector).css('width')

document可以获取的盒子模型属性

传统盒子模型：宽度=width+左右padding+左右border
box-sizing:content-box(传统盒子模型)，border-box（新盒子模型）
新盒子模型：宽度= width 会自动适应padding和border

js盒子模型

• client 可视区域

1. width /height (不包括内容溢出)
2. top/left 盒子的左上边框的高度，border

• offset

1. width/height （可视区域+border）
2. top / left 盒子的偏移值
3. parent // 不一定是父元素，这里获取的是夫参照物

• scroll

1. width/height （可以获取溢出内容）>=clientWidth
2. top/left 窗口相对于内容的位置

获取指定元素的 CSS 样式

window.getComputedStyle(element, 伪类)/ element.currentStyle（IE兼容）
获取当前元素所有经过计算的样式

letstyle=window.getComputedStyle(element,null)style.width// style的width的值//ie6-8style=element.currentStyle;

jQuery方法

$(select).offset()// 偏移值$(selector).position()// 父参照物的移动$(selector).innerHeight/Width()// client$(selector).outerHeight/Width()// offset$(selector).scrollTop/Left()// 设置scrollTop/Left