DOM对象

getElementsByName()方法:
返回带有指定名称的节点对象的集合。 document.getElementsByName(name) getElementsByName() 方法返回的是元素的数组,而不是一个元素。


getElementsByTagName()方法:
语法:document.getElementsByTagName(Tagname);
返回带有指定标签名的节点对象的集合,返回元素的顺序时他们在文档中的顺序

getAttribute()方法
通过元素节点的属性名称获取属性的值。
语法:
elementNode.getAttribute(name)
说明:
1. elementNode:使用getElementById()、getElementsByTagName()等方法,获取到的元素节点。
2. name:要想查询的元素节点的属性名字

SetAttribute() 方法
增加一个指定名称和值的新属性,或者把一个现有的属性设定为指定的值。 elementNode.setAttribute(name,value) 1.name: 要设置的属性名。 2.value: 要设置的属性值
DOM节点属性:
一、nodeName 属性: 节点的名称,是只读的。
1. 元素节点的 nodeName 与标签名相同
2. 属性节点的 nodeName 是属性的名称
3. 文本节点的 nodeName 永远是 #text
4. 文档节点的 nodeName 永远是 #document
二、nodeValue 属性:节点的值
1. 元素节点的 nodeValue 是 undefined 或 null
2. 文本节点的 nodeValue 是文本自身
3. 属性节点的 nodeValue 是属性的值
三、nodeType 属性: 节点的类型,是只读的。以下常用的几种结点类型:
元素类型    节点类型
  元素          1
  属性          2
  文本          3
  注释          8
  文档          9

 

访问子节点childNodes:

var a=document.getElementsByTagName("div")[0].childNodes;//这个[0]是代表代码中第一次出现的div,如果写[1]的话就会显示第二个出现的div

node.firstChild  //访问第一个子节点
last.firstChild //访问最后一个子节点
属性返回‘childNodes’数组的第一个子节点。如果选定的节点没有子节点,则该属性返回 NULL。

访问父节点parentNode

elementNode.parentNode   注意:父节点只能有一个。
elementNode.parentNode.parentNode //访问祖节点

访问兄弟节点
nodeObject.nextSibling  返回某个节点之后紧跟的节点(处于同一树层级中)。
nodeObject.previousSibling  返回某个节点之前紧跟的节点(处于同一树层级中)。
检查节点是否是空白节点 
function get_nextSibling(n){
var x=n.nextSibling;
while(x&&x.nodeType!=1){
x=x.nextSibling;}
return x;
}    
//1是元素节点的意思,这里不是1 说明不是元素节点,如空格等,则进入下面继续去下一个属性,继续循环,直到他是元素节点位置,才退出函数返回兄弟节点

插入节点appendChild()
appendChild(newnode)  在newnode子节点列表之后添加一个新的子节点。

createElement创建元素节点 createTextNode创建元素节点内的内容 innerHTML和innerText 共同点:innerHTML和innerText都会把元素内内容替换掉。 不同点: 1,innerHTML:   也就是从对象的起始位置到终止位置的全部内容,包括Html标签。 2,innerText:   从起始位置到终止位置的内容, 但它去除Html标签。
插入节点insertBefore()
insertBefore(newnode,node) 已有的子节点前插入一个新的子节点


删除节点removeChild()
nodeObject.removeChild(node)
removeChild() 方法从子节点列表中删除某个节点。如删除成功,此方法可返回被删除的节点,如失败,则返回 NULL。
替换元素节点replaceChild()
node.replaceChild (newnode,oldnew )
replaceChild 实现子节点(对象)的替换。返回被替换对象的引用
只有父结点才能调用 replaceChild(newnode,oldnode).这个方法,所以,要想替换当前结点的内容或者属性,那么首先得获得父节点,才可以操作
创建元素节点creatElement()
语法:
document.createElement(tagName)
var main = document.body;
//方法一
function createa(url,text)
{
   var a = document.createElement("a");  
  a.href = url;  
   a.innerHTML = text;
    a.style.color = "blue";
     main.appendChild(a);
}

//方法二
function createa(url,text)
{
    var linktomk=document.createElement("a");
    linktomk.setAttribute("href",url);
    linktomk.innerHTML=text;
    main.appendChild(linktomk);
}
// 调用函数创建链接
createa("http://www.imooc.com","慕课网");  

创建文本节点createTextNode()
语法:
document.createTextNode(data)
createTextNode() 方法创建新的文本节点,返回新创建的 Text 节点。

innerHTML和createTextNode都可以把一段内容添加到一个节点中,
区别是如果这段内容中有html标签(如例子中的<strong></strong>)时表现就不同了,
在createTextNode中会当作文本处理,不会被浏览器解析,但用innerHTML就会被当作HTML代码处理(如你的例子中Hello会被加粗显示)。 总的来说,如果你确定要插入的内容中没有html标签,可以用innerHTML,这样更简洁,但如果不能确定(比如要插入用户输入的内容)建议用createTextNode的方式。

获取浏览器可视区域大小
一、对于IE9+、Chrome、Firefox、Opera以及Safari:
window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
二、对于internet Explorer8、7、6、5:
document.documentElement.clientHeight表示HTML文档所在的窗口的当前高度。
document.documentElement.clientWidth表示HTML文档所在的窗口的当前高度。
或者
document对象的body属性对应HTML文档的<body>标签
document.body.clientHeight
document.body.clientWidth
在不同浏览器都实用的javascript 方案:
var w = document.documentElement.clientWidth || document.body.clientWidth;
var H = document.documentElement.clientHeight || document.body.clientHeight;

获取页面高度/宽度
scrollHeight和scrollWidth
一、针对IE、Opera: scrollHeight 是网页内容实际高度,可以小于 clientHeight。 二、针对NS、FF: scrollHeight 是网页内容高度,不过最小值是 clientHeight。也就是说网页内容实际高度小于 clientHeight 时,scrollHeight 返回 clientHeight 。
网页尺寸offsetHeight和offsetWidth
offsetHeight和offsetWidth,获取网页内容高度和宽度(包括滚动条等边线,会随窗口的显示大小改变)。
网页卷去的距离与偏移量

scrollLeft:设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离 ,即左边灰色的内容。

scrollTop:设置或获取位于对象最顶端与窗口中可见内容的最顶端之间的距离 ,即上边灰色的内容。

offsetLeft:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 。

offsetTop:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置 。










posted @ 2017-10-17 18:33  风若雅若  阅读(143)  评论(0编辑  收藏  举报