自己总结整理的,有什么错误的地方大家可以提出了,我进行修改。或者有什么需要添加的也可以提出来
getElementById()方法
这个方法返回一个与那个有着给定id属性值的元素节点相对应的对象。
由于js区分大小写,一定要注意该方法的大小写格式和类似方法的大小写格式。
用法: document.getElementById(“id的名称”);
getElementByTagName()方法
该方法返回值是一个对象数组,每个对象分别对应着文档里有着给定标签的元素。
getElementByTagName(tagname).length可以获取数组中对象的个数。
getAttribute()方法
获取对象的属性
Object.getAttribute(“属性名称”);
setAttribute()方法
设置对象的属性
setAttribute(“属性名称”,”属性名”);
childNodes属性
属性将返回一个数组,这个数组包含给定元素节点的全部子元素(包括元素节点,文本节点,属性节点);
用法:var array= element.childNodes; 可以继续调用length属性,获取子元素的个数。
document.body
就相当于网页中的body元素,不用专门获取。
nodeType属性
childNodes属性返回值是一个对象数组,包含所有的元素节点(包括元素节点,文本节点,属性节点)。调用nodeType属性返回值共有三种:1、2、3;如果节点类型是元素节点将返回1,如果节点类型是属性节点将返回2,如果节点类型是文本节点将返回3.
用法:node.nodeTye;
nodeValue属性
查询或者设置节点的值
用法:
查询:var des=document.getElementById(“des”);
alert(des.childNodes[0].nodeValue);
设置:var firstp=document.getElementById("myp");
// firstp.firstChild.nodeValue="我是改变后的值";
Firstp.childNodes[0].nodeValue=”我是改变后的值”;
firstChild和lastChild属性
获取该元素的第一个或者是最后一个子节点。
document.write()方法
write()方法可以快速的把字符串插入到文档里面
用法 document.write("<p>这是一个段落</p>");
缺点:必须在<body></body>部分使用<script>document.write("11")</script>标签才能调用该方法。即使将该方法写在外部js文件中,也必须在<body></body>部分使用<script></script>标签。所以尽量不要用该方法,它使js代码和html代码混在了一块,违背了分离javascript原则。
innerHTML属性(几乎所有的浏览器都支持该属性)
用来读写某给定元素里面的HTML内容
<p id=“para“> 这是一个段落</p>
用法: var p=document.getElementById(“para”);
获取: alert(p.innerHTML);// 将显示 这是一个段落(如果内部含有其他元素,会将其它的元素标签也显示出来,是HTML内容,而不是文本节点内容)
例如:<p id=“para“><strong> 这是一个段落</strong></p>
则 p.innerHTML的值为<strong> 这是一个段落</strong>
设置: p.innerHTML=”新段落”;
p.innerHTML=”<h3>新段落</h3>”
优点:该方法不用在<body></body>部分使用<script></script>标签就可以使用。
createElement()方法
用法:document.create(nodeName); eg:document.createElement(“p”);
该方法只能创建元素节点,但不能将元素节点添加到文档中,因此我们需要另外一种方法将创建的节点添加到html文档中去。
appendChild()方法
把新创建的节点插入到文档中最简单的方法是,让它成为某一个元素节点的子节点。
假设向<div id=”mydiv”></div>中添加<p>元素
用法:parent.appendChild(child);
var p=document.createElement(“<p>这是一个段落</p>”);
var div=document.getElementById(“mydiv”);
div.appendChild(p);
createTextNode()方法
添加文本节点,上面新建<p>中为空,因此向<p>中添加一个文本节点。
用法: var text=document.createTextNode(“hello world!”);
p.appendChild(text);
insertBefore()方法
将新元素添加到现有元素的前面
用法:parentElement.insertBefore(newElement,targetElement);
需要用到两个元素的父节点,两个元素有共同的父节点。
DOM并未提供insertAfter()方法。但可以自己编写,思想:比如将A插入到B的后面
需要用到nextSinling属性(返回某个元素之后紧跟的元素(处于同一树层级中));
还要用到insertBefore();
var parent=targeElement.parentNode;
if(parent.lastChild==targetElement)
parent.appendChild(newElement);
else{
parent.insertBefore(newElement,targetElement.nextSibling);
}