js获取html页面节点方法,Javascript中call的两种用法实例

很久没有操作过递归调用了。看完之后,蓦然惊醒啊!

appendChild定义 appendChild(newChild: Node) : Node
Appends a node to the childNodes array for the node.
Supported: IE 5.0+, Mozilla 1.0+, Netscape 6.0+, Safari 1.0+, Opera
7.0+
添加一个节点到指定的节点的子节点数组中,读起来好象有点拗口,简单地说就是将元素添加到指定的节点中

用法一(常见用法):

复制代码 代码如下:

appendChild用法 target.appendChild(newChild)

表现形式为:一个对象.方法.call(另一个对象),意义是用另一个对象代替当前对象,执行当前对象的方法。先看示例:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<title>统计Element节点</title>
   <script language=”javascript”>
         var  elementName=””;
   function countTotalElement(node)
   {
       ///Attribute  nodeType值为2,表示节点属性
    ///Comment    nodeType值为8,表示注释文本
    ///Document   nodeType值为9,表示Document
    ///DocumentFragment   nodeType值为11,表示Document片段
    ///Element            nodeType值为1,表示元素节点
    ///Text               nodeType值为3,表示文本节点
       var total=0;
    if(node.nodeType==1) //1代表节点的类型为Element
    {
       total++;
    elementName=elementName+node.tagName+”\r\n”;

newChild作为target的子节点插入最后的一子节点之后

复制代码 代码如下:

    }

appendChild例子 var newElement = document.Document.createElement(‘label’);
newElement.Element.setAttribute(‘value’, ‘Username:’);

function Class1(){
    this.name = “class1”;
    this.showName = function(){
        alert(this.name);
    }
}
function Class2(){
    this.name = “class2”;
}
var c1 = new Class1();
var c2 = new Class2();

    var childrens=node.childNodes;
    for(var i=0;i<childrens.length;i++)
    {
        total+=countTotalElement(childrens[i]);
    }
    return total;
   }
   </script>
</head>

var usernameText = document.Document.getElementById(‘username’);
usernameText.appendChild(newElement);

c1.showName.call(c2);
c2.showName();        //不能执行

<body>
     <h1>测试</h1>
     <table width=”100″ border=”2″ cellpadding=”0″
cellspacing=”0″>
         <tr><td>
         <form name=”form1″ action=”” method=”post”>
               <input type=”text” name=”ipput1″
value=”测试”><br />
               <input type=”password” name=”password” value=””>
         </form>
         </td></tr>
     </table>
     <a href=”javascript:void(0)”
onClick=”alert(‘标记总数’+countTotalElement(document)+’\r\n
全部标记如下:\r\n’+elementName);”>开始测试</a>
</body>
</html>

insertBefore定义 The insertBefore() method inserts a new child node before an existing
child node.

我们先分别定义了两个function,分别是Class1和Class2,它们的主要区别是Class2比Class1多了一个showName()方法。接着定义了与Class1、Class2对应的对象c1和c2,这时候我们清醒的知道,c1有showName()方法而c2没有。但是奇迹出现了,当我们执行
c1.shoName.call(c2)
时,会弹出c2的name值,即”class2″。其实,我们执行的任然是c1的方法,只不过临时起意地把对象c2偷换成对象c1,执行完毕后,它们任然是定义时的样子,c2并没有因此多了些什么方法。为了检测c2有没有多了方法,示例加了行
c2.showNmae(); 它是不能被执行的,浏览器会报出 Object #<Class2>
has no method ‘showName’ 的错误。

其实,通过递归调用也可以实现
想百度蜘蛛爬虫一样的效果!这个值得一试,或许可以通过这个方法,写一个sitemap生成器!

insertBefore() 方法的作用是:在现有的子节点前插入一个新的子节点

为什么要这么做?前面说了,这是一种临时起意的使用方法,我们就是利用其高效的编程而已。但这并不是没有限制的,假设用c1和c2表示被替换的对象和替换对象,用fun1表示c1固有的方法。1、当fun1不需要参数,且不用到父函数中的任意局部变量时,其实c1.fun1.call(c2)
和 c1.fun1()
没什么区别;2、当fun1不需要参数但是用到父函数中的变量,那么就要求生成c1和c2的function有相同名称的那些个被fun1使用的变量;3、当fun1需要参数时,形式要改写成c1.fun1.call(c2,
参数1, 参数2,
…参数n),这个时候生成c1的function中的变量名就不必和生成c2的function的变量名同名了,只需对应即可。其实,我们在用到call的这种用法时,c2和c1往往在结构和功能上已经有很大的相似性了,所以上述三点很容易避免。

发表评论

电子邮件地址不会被公开。 必填项已用*标注