获取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 == 3
document.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])// 文本节点
var h=document.createElement("H1")
var t=document.createTextNode("Hello World");
h.appendChild(t);

添加

node.appendChild(node)
node.insertBefore(newItem,existingItem)

	var newItem=document.createElement("LI")
	var textnode=document.createTextNode("Water")
	newItem.appendChild(textnode)
	var list=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 // get
delete element// delete
element.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兼容）
获取当前元素所有经过计算的样式

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

jQuery方法

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