javascript常用方法

自己总结整理的,有什么错误的地方大家可以提出了,我进行修改。或者有什么需要添加的也可以提出来

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);

}

原文地址:https://www.cnblogs.com/sunran/p/3848212.html