一.文档对象模型DOM定义访问和修护力HTML文档的标准方法,DOM将HTML文档呈现为带有元素,属性和文本的树结构(节点树)
1. getElementsByName() 方法
返回带有指定名称的节点对象的集合.
语法: documet.getElementsById(name)
与getElementsById()方法不同的是,通过元素的name属性查询元素而不是通过id属性
Notice:
因为文档中的name属性可能不唯一,所有getElementsByName()方法返回的是元素的数组,而不是一个元素;
和数组类似也有length属性,也可以访问数组一样的方法来访问,从0开始;
<!DOCTYPE HTML> <html> <head> <script type="text/javascript"> function getnum(){ var mynode= document.getElementsByName("myt"); alert(mynode.length); } </script> </head> <body> <input name="myt" type="text" value="1"> <input name="myt" type="text" value="2"> <input name="myt" type="text" value="3"> <input name="myt" type="text" value="4"> <input name="myt" type="text" value="5"> <input name="myt" type="text" value="6"> <br /> <input type="button" οnclick="getnum()" value="看看有几项？" /> </body> </html> 2.getElementsByTagName()方法返回带有指定标签名的节点对象的集合,返回元素的顺序是他们在文档中的顺序
语法:document.getElementsByTagName(TagName)
说明: 1.TagName是标签的名称,如 p,a,img等标签名
2.和数组类似也有length属性,可以和访问数组一样的方法来访问,从0开始
3.区别:
<input type="checkbox" name="hobby" id="hobby1"> tagName name id
4.getAttribute()方法
通过元素节点的属性名称获取属性值
语法:elementNode.getAttribute(name)
说明:1.elementNode: 使用getElementById(), getElementByTagName()等方法,获取到元素节点
2.name:想要查询的元素的节点的属性名字 5.setAttribute()方法
增加一个指定名称和值得新属性,或者把一个现有的属性设定为指定值
语法: elementNode.setAttribute(name, value)
说明: 1. name :要设置的属性名
2.要设置的属性值
Notice:
1:把指定的属性设置为指定的值,如果不存在就有指定名称的属性,该方法将创建一个新属性
2.类似于getAttribute()方法,detAttribute()方法只能通过元素节点对象调用的函数
6.节点属性
在文档对象模型DOM中,每个节点都是一个对象,DOM节点有3个重要的属性:
1. nodeName :节点的名称
2. nodeValue :节点的值
3. nodeType :节点的类型
一. nodeName 属性:节点的名称,是只读的.
1.元素节点的nodeName与标签相同
2.属性节点的nodeName是属性的名称
3.文本节点的nodeName永远是#text
4.文档节点的nodeName永远是#documen
二. nodeValue属性:节点的值
1.元素节点的nodeValue是undefined或者是null
2.文本节点的noddeValue是文本本身
3.属性节点的nodeValue是属性值
三. nodeType属性:节点的类型,是只读的,以下常用的集中节点类型
元素类型 节点类型
元素 1
属性 2
文本 3
注释 8
文档 9 7. 访问子节点childNodes
访问选定元素节点下所有子节点的列表,返回的值可以看做是一个数组,具有length属性
语法: elementNode.chiildes
Notice:
如果选定的节点没有子节点,则改属性返回不包含节点的NodeList.
8. 访问子节点的第一和最后一项
一. firstChild 属性返回childNodes数组的第一个子节点, 如果选定的节点没有子节点,则该属性返回NULL
语法: node,firstChild
说明: 与elementNode.childNodes[0]是同样的效果
二. lastChild 属性返回childNodes数组的最后一个子节点,如果选定的节点没有子节点,返回NULL
语法: node.lastChild
说明: 与elementNode.childNodes[elementNode.childNodes.length-1]效果相同
Notice: 上节中说过了IE会忽略节点之间生成的空白文本节点,而其他浏览器不会.我们可以通过检测节点类型,过滤子节点
9.访问父节点 parentNode
获取指定节点的父节点
语法: elementNode.parentNode
Notice :父节点只能有一个
获取祖节点
elementNode.parentNode,parentNode
Notice: 浏览器兼容问题: chrome,firefox等浏览器标签之间的空白也算是一个文本节点
10.访问兄弟节点
1.nextSibling属性可返回某个节点之后紧跟的节点(处于同一树层集中)
语法: nodeObject.nextSibling
说明: 如果无此节点 ,则该属性返回null
2.previousSibling属性可返回某个节点之前紧跟的节点(处于同一树层级中)
语法: nodeObject.previousSibling
说明: 如无此节点,返回null
Notice: 以上两属性获取的是节点,IE会忽略节点之间生成的空白文本节点(eg:换行符号), 而其他浏览器不会忽略
解决问题方法:
判断节点nodeType是否为1,如果是为元素节点,跳过
11.插入节点appendChild()
在指定节点的最后一个子节点列表之后添加一个新的子节点
语法: appendChild(newnoded)
参数:
newnode: 指定追加的节点
12.插入节点 insertBefore()
在已有的子节点前插入一个新的子节点
语法: insertBefore(newnode,node)
参数:
newnode: 要插入的新节点
node: 指定此节点前插入节点(已有节点)
13.删除节点removeChild()
从子节点列表中删除某节点,如果删除成功,此方法可返回被删除的节点 ,如失败则返回null
语法: nodeObject.removeChild(node)
参数:
node :必需 指定需要删除的节点
notice: 把删除的子节点赋值给x,这个子节点不在DOM树中,但还是子啊内存当中,可通过x操作
如果需要完全删除对象给x赋null值
14.替换元素节点replaceChild()
实现子节点(对象)的替换,返回被替换对象的引用
语法: node.replaceChild(newnode, oldnode)
参数都为必需
15.创建元素createElement
此方法可返回一个Element对象
语法: document.createElement(tagName)
参数: tagName: 字符串值,这个字符串用来知名创建元素的类型;
Notice : 要与apppendChild() 或 insertBefore() 方法连用,将元素显示在页面中
16.创建文本节点createTextNode
返回新创建的Text节点.
语法: document.createTextNode(data)
参数: 字符串值,可规定此节点的文本
17.浏览器窗口可视区域大小
获得浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)的方法
一. 对于IE9+, Chroome, firefox ,Opera 以及Safari
1) window.innerHeight -- --- --- 浏览器窗口的内部高度
2) window.innerWidth --- --- --- 浏览器窗口呢内部宽度
二 . 对于 IE 8,7,6,5:
1) document.documentElement.clientHeight 表示HTML 文档所在窗口的当前高度
2) ddocument.documentElement.clientWidtg 表示HTML文档所在窗口的当前宽度
或者
Document对象的body属性对应HTML文档的<body>标签
1) document.body,clientHeight
2) document.body.clientWidth
不同浏览器都实用的JavaScript方案:
var w = document.documentElement.clientWidth || document.body.clientWidth;
var w = document.documentElement.clientHeighe || document.body.clientHeight;
18.网页尺寸scroolHeight
scrollHeight 和scrollWidth,获取网页 内容高度和宽度
一. 针对IE 和 Opera:
scrollHeight 是网页 内容的实际高度,可以小于cclientHeight
二.针对NS,FF:
scrollHeight是网页内容高度,不过最小值是clientHeight . 也就是说网页内容实际高度小于clientheight时 ,scrollHeight返回clientHeight
三.浏览器兼容性
var h = document.documentElement.scrollHeight || document.body.scrollHeight;
var w = document.documentElement.scrollWidth|| document.body.scrollWidth;
Notice :
区分大小写 : scrollHeight 和scrollWidth 还可以获取DOM元素中内容实际占用的高度和宽度
19.网页尺寸offsetHeight
offsetHeight和offsetWidth, 获取王勇为内容的宽高(包括滚动条等边线,会随窗口的显示大小改变)
一. 值
offsetHeight = clientHeight + 滚动条 +边框
二.浏览器兼容性
var h = document.documentElement.offsetHeight || document.body.offsetHeight;
var w = document.documentElement.offsetWidth || document.body.offsetWidth;
20.网页卷去的距离与偏移量
scrollLeft : 设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离,即 左边灰色的内容
scrollTop: 设置或获取位于对象最顶端与窗口中可见内容的最顶端之间的距离,即 上边灰色的内容
offsetLeft : 获取指定对象相对于面板或由offsetParent 属性指定的父坐标的计算左侧位置;
offsetTop : 获取指定对象对于版面或由offsetParent 属性指定的父坐标的计算顶端位置
Notice:
1. 区分大小写
2. offsetParent: 布局中设置position属性(Relative, Absolute , fixed)的父容器,从最近的父节点开始.一层层向上找.直到找到HTML 的body
