JavaScript DOM 事件(三)

点击每个li节点,若li节点的文本值没有以^^ 开头,则加上,有则去掉

    id="city">
  • id="bj" name="beijing">北京
  • id="sh" name="beijing">上海
  • id="zz" name="beijing">郑州

具体实现代码如下:

window.onload = function(){
    var liNodes = document.getElementsByTagName("li");
    for(var i=0; ilength; i++){
        liNodes[i].onclick = function(){
            var val = this.firstChild.nodeValue;
            //使用正则表达式来判断是否以^^ 开头
            var reg = /^\^{2}/g;
            if(reg.test(val)){
                // 使用replace方法进行去除^^开头
                val = val.replace(reg, "");
            }else{
                val = "^^"+ val;
            }
            //nodeName nodeType nodeValue 节点的属性
            this.firstChild.nodeValue = val;
        }
    }
}

 

备注:这里使用了正则表达式来进行匹配字符

//g : 全局

^ 因为是特殊字符,所以需要进行转义


效果如下:

JavaScript DOM 事件(三)_第1张图片




你可能感兴趣的:(HTML,JavaScript)