在看javascript中string对象时候看到有一个Anchor方法,这个方法比较陌生,没用过。根据定义:anchor方法用于创建HTML锚点。用法:stringObject.anchor(anchorname)。于是写了如下代码:
<div id=“app”>
</div>
<script>
Var text = “hello world”;
Var anchorElement = text.anchor(“myanchor”);
Var app = document.getElementById(“app”);
app.appendChild(anchorElement);
</script>运行之后代码报错:Failed to execute 'appendChild' on 'Node': parameter 1 is not of type ‘Node'。在node上执行appendChild操作失败,原因是第一个参数不是node类型。
后来打印之后发现:anchorElement是String类型,不是node类型。
怎么将String类型转换为node类型呢?
解决方案:1、直接用innerHTML,将app.appendChild(anchorElement)改为app.innerHTML = anchorElement.
2、写函数:function parseDom(arg) {
Var objE = document.createElement(“div”);
objE.innerHTML = arg;
Return objE.childNodes;
}
此函数返回的是nodeList,要插入html中需要将nodeList转化为数组。这里的nodeList实际就是伪数组,这里问题又转化为伪数组如何转换为数组?
伪数组如何转换为数组?
1、用push方法将伪数组转为数组。
2、使用数组的Slice方法,使用Call或者apply指向伪数组。var arr = Array.prototype.slice.call(nodeList);
3、ES6数组新方法:Array.from(nodeList);
4、jq的makeArray和toArray方法。
5、原型继承:nodeList.__proto__ = Array.prototype.但这种方法对其他伪数组是管用的,但对nodeList转换不成功。nodeList转换完了之后,用几种方法来验证一下其是否是数组。验证数组的方法我们一般用的有三种:
(1) Array.isArray(nodeList) 返回的是FALSE
(2)nodeList instanceof Array 返回的是true
(3)Object.prototype.toString.call(nodeList) === ‘[object Array]’ 返回的是FALSE。而且Object.prototype.toString.call(nodeList)返回的是”[object NodeList]”