一个菜鸟的前端之路

2017/11/28

前言：自学前端快3个月了，学习过程中碰到许多问题，第一次写博客，以后坚持每天写一篇，算是对自己每天学习的内容有一个总结。在以后碰到相似问题能够解决，加油！

常用的节点属性操作方法

1. setAttribute(name,value):给某个节点添加一个属性

例如：在创建一个新的元素节点时给新的元素添加一个id属性和一个onclick属性

    var para = document.createElement('div');

    var node = document.createTextNode(data[i]);

    var x = Math.ceil(Math.random()*100);//生成随机数

    para.setAttribute('id',x);

    para.setAttribute("onclick", "removeHandler(this)");

    para.appendChild(node);

    var element = document.getElementById('numbersquar');

    element.appendChild(para);

2.getAttribute(name):获取某个节点属性的值。

3.removeAttribute(name):删除某个节点的属性。

4.生成一个随机数，今天写的小程序里面，需要给创建的div添加一个id，每个div的id都不能相同，故想到用随机数来生成一个id值

var x = Math.ceil(Math.random()*100);//生成随机数

 

5.给一个节点添加一个onclick属性，并添加一个回调函数，在该节点点击事件是执行该函数，今天的小程序里需要实现对创建的元素进行删除，下面的代码可以实现

para.setAttribute("onclick", "removeHandler(this)");

function removeHandler(divNode) {

  var pNode = divNode.parentNode;

pNode.removeChild(divNode);

}

6.target事件属性

定义和用法

target可以返回事件的目标节点（触发该事件的节点），如生成事件的元素，文档或窗口

语法：

Event.target

7.HTML5增加了一项新功能是自定义数据属性，也就是data-*自定义属性。在HTML5中我们可以使用以 data- 为前缀来设置我们需要的自定义属性，来进行一些数据的存放。