Javascript学习笔记07——DOM

Node类型:

每个节点都有自己的父节点parentNode,包含在childNode中的节点都具有相同的父节点。同时都具有同胞节点。使用previousSibling和 nextSibliing可以访问所有的同胞节点。

列表中第一个节点的previousSibling节点为null,同理最后一个节点的nextSibling也为null。同样列表中只有一个节点,那么该节点的两个属性都为空。

父节点的fisrtchild和lastchild分别指向子节点列表中第一个和最后一个节点的指针。

使用hasChildNodes()方法判断是否有子节点。

例如div.hasChildNodes()//true

操作节点:

最常用的为appendChild()方法,向childNode列表末尾中添加一个节点,返回新增的节点。

例如:var input=div.appendChild(inpNOde);

alert(input===inpNOde)//yes

alert(div.lastNode==input)//yes

如果希望把节点插入到父节点的某个位置,就使用insertBefore方法,该方法使用两个参数,一个是插入的节点,一个是参照的节点。

例如var div=divs.insertBefore(newNode,null);//插入成为最后一个节点。

alert(div===divs.lastChild).//true

也可以插入成为第一个节点:

var div=divs.insertBefore(newNode,divs.firstchild)

alert(div==divs.firstChild)//true


还可以替换节点,replaceChild()

var returnnode=divs.replaceChild(newnode,divs.firstnode).



Document类型:

document主要对文档进行一些操作。

获取文档标题var title=document.title;

var url=document.url

var domain=document.domain;

在查询元素方面,document提供了两个方法,一个是getElementById(),一个是getElementByTagName().

getElementById()接受参数为元素的id,如果元素存在就返回元素,如果不存在就返回null。如果页面中有多个元素的id相同,就只返回第一个元素。

var mydiv=document.getElementById("mydiv");

getElementByTagName()通过元素的标签来获得元素

例如var imgs=document.getElementByTagName("img");//获得image元素,返回的是HTMCOLLECTION类型.


特殊集合:

有些document属性可以直接获取元素,而不用专门的方法和参数获取。

document.forms功能与document.getElementTagName("form")

document.images==document.getElementTagName("image")



Element类型:

该类型提供了对元素属性的一些访问。

例如元素的nodename属性和tagname属性:

var div=document.getElementById("mydiv");

div.tagname==div.nodename;

alert(div.id)

alert(div.name)

alert(div.title)

alert(div.classname)

在element类型中有三个属性可以使用,来用来设置获得移除属性。

getAttribute(),

setAttribute()

removeAttribute()

使用方法:

var div=document.getElementById("mydiv");

alert(div.getAttribute("classname"));

在设置属性的时候,使用setAttribute()方法,参数分别为要设置的属性,和属性的新值。

创建元素:

var div=document.createElement("div");

div.id="mydiv";



DOM脚本动态加载:

向页面中添加js的方式一种是使用src来包含js文件,一种是通过元素本身来包含代码。

var script=document.createelement("script");
script.type="text/javascript";
script.text="function say(){alert("fuck")}";
//或者以下代码
script.appendchild(document.createTextNode("function say(){alert()}"));
document.body.appendchild(script);















你可能感兴趣的:(javascript,dom)