js的DOM的方法和属性总结

1.DOM的获取元素
document.getElementById()
context.getElementsByTagName(tag) (可以获取相应上下文环境所有的tag标签)
context.getElementsByClassName() (ie6-8不兼容)
context.getElementsByName()(ie6-8只能用于表单元素)
document.body
document.documentElement
context.querySelector()/querySelectorAll() (获取的节点集合不存在DOM映射 是静态的 )
(表格的有表格的方式 context.tHead tBodies rows ......)

2.描述节点与节点关系的属性和方法(凡是指获取元素的在ie6-8都不兼容 默认不带Node 一般带Element 特殊者children childNodes parentNode)
childNodes(不包括孙子,文本结点可以有换行和空格)
children (注意这里不是 childElementNodes)
firstChild/firstElementChild
lastChild/lastElementChild
parentNode
previousSibling /previousElementSibling
nextSibling/nextElementSibling

3.node的常用类型

nodeType nodeName nodeValue
1 具体元素标签的大写 DIV.... null
9 #document null
3 #text 就是文本的值 包括空格和换行
8 #comment 注释的文本

4.DOM的增删改
节点
document.createElement()
document.createDocumentFragment()
new Image
appendChild()
replaceChild()
removeChild()
insertBefore()
clone(false/true)

属性
get/set/removeAttribute()

样式
getComputedStyle() (ie6-8不兼容)
getCurrentStyle (只适用于ie6-8)

5.DOM盒子模型的13个属性
clientWidth clientHeight clientTop clientLeft
scrollWidth scrollHeight scrollTop scrollLeft
offsetWidth offsetHeight offsetTop offsetLeft offsetParent
只有scrollTop scrollLeft 可读可写 其他均只读

时间: 2024-11-12 21:04:48

js的DOM的方法和属性总结的相关文章

原生js操作dom的方法

今天学习了原生js的dom节点的操作,就记录下来,仅供自己以后参考. 1)创建节点:除了可以使用createElement创建元素,也可以使用createTextNode创建文本节点. document.body指向的是<body>元素;document.documentElement则指向<html>元素 //创建节点    var createNode = document.createElement("div");    var createTextNod

javascript操作DOM的方法与属性

文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构. 将HTML代码分解为DOM节点层次图: HTML文档可以说由节点构成的集合,DOM节点有: 1. 元素节点:上图中<html>.<body>.<p>等都是元素节点,即标签. 2. 文本节点:向用户展示的内容,如<li>...</li>中的JavaScript.DOM.CSS等文本. 3.

js中Dom对象的position属性

首先应该明白什么是流?这个估计也很容易明白,我就不说了.顺便说下,float设置了这个属性就暂时脱离了流的存在,clear后才会到流里面. position:absolute| fixed | relative| static | inherit 默认的HTML流属性其实就是指position:static.如果我们想要在页面上固定显示元素,就选择absolute,它是以页面左上角为(0,0),根据top,left,width,height来布局的,注意这里是根据页面布局.fixed是当前窗口布

BOM的节点方法和属性

一.HTML DOM >>>>>>>>>>>>>>>>>>>>具体可以参考W3SCHOOL中的讲解,接下来我会结合W3SCHOOL和本人总结的一些实例供大家理解. HTML 的标准对象模型 HTML 的标准编程接口 W3C 标准 HTML DOM 定义了所有 HTML 元素的对象和属性,以及访问它们的方法. 换言之,HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准

js的dom学习笔记一

前言: 我现在不好定位自己程序编写的技术的好坏,新手吧.DOM是实现js脚本连接上HTML文档的一个API,才接触jquery一两天,大概能明白,所谓的框架,就是在原生态的基础上做出的函数库,里面的方法.属性都是要使用该框架的对象来调用的.相比于jquery,DOM不是框架,虽然它们都能实现操控网页文档元素,DOM更加底层,dom的方法.属性直接面对文档元素来使用,而jquery要面向jquery对象来使用. DOM 是一个可以让javaScript脚本操控HTML元素.css属性的一套w3c标

js操作dom元素属性和方法

1.用于处理xml文档的dom元素属性 属性名                      描述 childNodes返回当前元素所有子元素的数组 firstChild返回当前元素的第一个下级子元素 lastChild返回当前元素的最后一个子元素 nextSbling返回紧跟在当前元素后面的元素 nodeValue指定表示元素值的读写属性 parentNode返回元素的父节点 previousSibling返回紧邻当前元素之前的的元素 2.用于遍历XML文档的dom元素方法 方法名        

【js常用DOM方法】

介绍几个js DOM的常用方法 获取元素节点 getElementById  getElementsByTagName  getElementsByClassName 先写一个简单的网页做测试: /* test.html*/<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> </head> <body&g

JS学习之DOM节点的关系属性封装、克隆节点、Dom中Style常用的一些属性等小结

JS DOM节点: 在JS DOM中节点的关系被定义为节点的属性: 通常有以下几种节点之间的关系: (这里的关系是所有浏览器都支持的) parentNode    父节点 childNodes    子节点 firstChild    父节点里的第一个子节点 lastChild     父节点里的最后一个子节点 nextSibling    与子节点并列的下一个兄弟节点 previousSibling   与子节点并列的上一个兄弟节点 火狐与谷歌支持而ie8不支持的节点关系有: previous

JS获取DOM的几种方法

JS获取DOM和几种方法 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名(getElementsByClassName) 获取html的方法(document.documentElement) 获取body的方法(document.body) 通过选择器获取一个元素(querySelector) 通过选择器获取一组元素(querySelectorAll) 下面依次讲解:1.通过