获取dom元素操作整理

文章目录获取元素属性和方法方法jQuery方法属性jQuery方法增删改操作创建添加克隆删除jQuery方法自定义属性jQuery修改样式jQuery方法document可以获取的盒子模型属性js盒子模型获取指定元素的 CSS 样式jQuery方法获取元素属性和方法整理与参考方法document.getElementById([ID])// 通过id获取元素节点document.getElementsByTagName([Tag-name])// input namemyInput typetext size20 /br /// input namemyInput typetext size20 /br /// input namemyInput typetext size20 /br /// 这里获取通过document.getElementsByTagName(input) // length 3document.getElementsByClassNmae([Class-name])// 通过类名获取节点 在IE6-8不兼容document.getElemnetsByName([Name])// input namemyInput typetext size20 /br /// input namemyInput typetext size20 /br /// input namemyInput typetext size20 /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只有在IE8才兼容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)// 筛选查找的结果支持一些伪类选择器$(selectoreq(n))获取第n个元素eq(n)获取索引为ngt(n)获取大于n的元素lt(n)获取小于索引的元素增删改操作创建document.createElement([tag-name])// 元素节点document.createTextNode([Text Content])// 文本节点varhdocument.createElement(H1)vartdocument.createTextNode(Hello World);h.appendChild(t);添加node.appendChild(node)node.insertBefore(newItem,existingItem)varnewItemdocument.createElement(LI)vartextnodedocument.createTextNode(Water)newItem.appendChild(textnode)varlistdocument.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.xxxx 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.xxxx// 修改行内样式element.classNamexx// 设置样式类jQuery方法$(selector).css(width,200)$(selector).addClass(name)$(selector).removeClass(name)// 移除$(selector).hasClass(name)// 验证$(selector).toggleClass(name)// 有就移除没有就添加// 获取$(selector).css(width)document可以获取的盒子模型属性传统盒子模型宽度width左右padding左右borderbox-sizing:content-box(传统盒子模型)border-box新盒子模型新盒子模型宽度 width 会自动适应padding和borderjs盒子模型client 可视区域width /height (不包括内容溢出)top/left 盒子的左上边框的高度borderoffsetwidth/height 可视区域bordertop / left 盒子的偏移值parent // 不一定是父元素这里获取的是夫参照物scrollwidth/height 可以获取溢出内容clientWidthtop/left 窗口相对于内容的位置获取指定元素的 CSS 样式window.getComputedStyle(element, 伪类)/ element.currentStyleIE兼容获取当前元素所有经过计算的样式letstylewindow.getComputedStyle(element,null)style.width// style的width的值//ie6-8styleelement.currentStyle;jQuery方法$(select).offset()// 偏移值$(selector).position()// 父参照物的移动$(selector).innerHeight/Width()// client$(selector).outerHeight/Width()// offset$(selector).scrollTop/Left()// 设置scrollTop/Left