js添加节点的方法（js创建节点时同时添加属性）
//逗比小憨憨
/*第一章
*HTML引用方法：
*1,外部引用：HTML外部引用js：
*2,内部引用：
*3,元素事件引用：
*/
/*第二章
* 变量定义：
* 1，变量由数字，字母，下划线，$组成，且不能以数字开头
* 2，变量不能使用系统关键词
* 3变量定义语法：var 变量1=变量值,变量2=变量值,…;
*/
//举例：
var a = 10;
document.write(a);//在页面输出一个内容
/*
* 数据类型：
* 1，基本数据类型：数字，字符串，布尔值，未定义值(undefined)，空值(null)
* 2，引用数据类型：数组，对象
* 其中：数字不区分整型和浮点型
*/
/*
* 运算符：
* 1，算术运算符:+ – * / % ++ —
* 加法运算规则：数字+数字=数字； 数字+字符串=字符串； 字符串+字符串=字符串
* 2，
*/
//举例：
var a = 10;
var str = “逗比小憨憨”;
document.write(str + a, typeof(str + a));
/*
* 赋值运算符：= += -= *= /=
* 比较运算符：> < >= <= == !=
* 逻辑运算符：&& || !
* 条件运算符：var b=条件?表达式1:表达式2;//相当于C语言中三目运算符
*/
/*
* 表达式语句：一个分号对应一条语句
* 类型转换：
* 1，隐式类型转换（js自动完成的）
* 2，显式类型转换
* (1)字符串转数字：Number(),parseInt(),parseFloat()（字符串必须是数字字符串）
* (2)数字转字符串：toString
* (3)转义字符：\’ \” \n等
* 3，注释： 单行注释 和 多行注释 用法：与C语言注释一样
*/
//举例：
document.write(“Number(\”123\”):” +Number(“123”) + “
”);
document.write(parseInt(“+123.456px”));//第一个字符为+或-也进行转换，从左往右取整数
document.write(parseFloat(“123.456px”));
var num = 123;
document.write(num.toString());
/*第三章
* 流程控制：
* 1，顺序结构：程序代码从上到下，从左到右依次执行
* 2，选择结构：
* (1)if语句:（单重if）
* <1>:if(条件){语句块}
* <2>:if(条件){语句块} else{语句块}
* <3>:if(条件){语句块} else if(条件){语句块} else{语句块}
* (2)switch语句：
* switch(判断值){ case 取值1:语句块1;break;
* case 取值2:语句块2;break;
* …
* default:语句块n;break;}
* 3,循环结构：
* (1)while循环：
* while(条件){语句块}
* (2)do…while循环：
* do{语句块}while(条件);
* (3)for循环：
* for(初始化表达式;条件表达式;循环后操作表达式){语句块}
*/
//举例：计算1+2+3+…+100
var n = 1, sum = 0;
while(n <= 100)
{
sum += n;
n++;
}
document.write(sum);
//找出100-1000中的水仙花数
var str1 = “”;
for(var i = 100; i < 1000; i++)
{
var a = i / 100; //取百位上的数字
a = parseInt(a);
var b = i % 100 / 10; //取十位上的数字
b = parseInt(b);
var c = i % 10; //取个位上的数字
c = parseInt(c);
if(i == (a * a * a + b * b * b + c*c*c))
{
str1 = str1 + i + “、”;
}
}
document.write(“水仙花数有：” + str1);
//判断一个数是不是整数
window.onload = function()
{
var n = 3.14159;
if(parseInt(n) == parseFloat(n))
{
document.write(n + “是整数”);
}
else
{
document.write(n + “不是整数”);
}
}
/*第四章
* 函数：
* 1，函数的定义:函数名命名规则遵循变量命名规则
* (1)没有返回值的函数定义：function(参数1，参数2，…){语句块}
* (2)有返回值的函数定义：function(参数1，参数2，…){语句块; return 返回值}
* 2，变量的作用域：全局变量，局部变量
* 3，函数的调用：
* (1)直接调用：函数名(实参1,实参2,…);
* (2)在表达式中调用:例如：var sum = 函数名(实参1,…)
* (4)在事件中调用
* 4，函数嵌套
* 5，内置函数：比如：parseInt()
*/
//举例：
function add_sum(e, f){
var sum = e + f;
document.write(sum);
}
add_sum(10, 20);
function test(){alert(“doubi”);}//供超链接调用测试的函数
/*第五章
* 1，js中对象分为：自定义对象和内置对象
* 2，常用的内置对象：字符串对象，数组对象，日期对象，数值对象
* 3，字符串对象相关知识点：
* 3.1 获取字符串长度：语法： 字符串名.length
* 3.2大小写转换： 字符串名.toLowerCase(),字符串名.toUpperCase()
* 3.3获取一个字符：字符串名.charAt(n)
* 3.4获取字符串： 字符串名.substring(start, end)
* 3.5替换字符串： 字符串.replace(原字符串或正则表达式, 替换字符串)
* 3.6分割字符串： 字符串.split(“分隔符”)
* 3.7检索字符串的位置： 字符串.indexOf(指定字符串),字符串.lastIndexOf(指定字符串)
* indexOf：返回首次出现的位置 lastIndexOf：返回最后一次出现的位置 没找到返回-1
* 3.8删除字符串中的一个字符：
*/
//举例
var str = “This is doubixiaohanhan”;
document.write(“字符串长度为：” + str.length);//空格也计算在内
document.write(“转为大写字母:” + str.toUpperCase());
document.write(“转为小写字母:” + str.toLowerCase());
document.write(“获取第3个字符: ” + str.charAt(3));//字符串下标从0开始计算
document.write(str.substring(8, 23));
document.write(str.replace(“doubixiaohanhan”, “hahahahahaha”));
var str1 = str.split(” “);//以空格作为分隔符
for(var i = 0; i < 3; i++)
document.write(str1[i]);
document.write(str.indexOf(“bi”));
document.write(str.lastIndexOf(“han”));
//找出字符串中所有字符b,不区分大小写
var n = 0,str1 = “doubixiaohanhan”;
document.write(“源字符串:” + str1);
for(var j = 0; j < str1.length; j++)
{
var char = str1.charAt(j);
if(‘h’ == char.toLowerCase())
{
document.write(char);
n = n + 1;
}
}
document.write(“字符串中有” + n + “个字符h”);
//统计字符串中数字的个数
function get_number(str){
var num = 0, i = 0;
while(i < str.length){
var char = str.charAt(i);
if((char != ” “) && (!isNaN(char))){//isNaN:不是数字则返回true
num++;
}
i++;
}
alert(“执行完毕”);
return num;
}
var ret = get_number(“dou120k53KDDD6656”);
document.write(ret);
/*第六章：数组对象
* 1，数组的创建：（数组 中可以存储不同类型的数据）
* (1)完整形式：var 数组名=new Array(元素1,元素2,..)
* (2)简写形式：var 数组名=[元素1,元素2,…]
* 2，数组的获取：使用下标获取，下标从0开始
* 3，数组的赋值：arr[i]=值;
* 4，获取数组的长度： 数组名.length
* 5，截取数组： 数组名.slice(start, end)
* 6，为数组添加元素：
* (1)在数组开头添加元素： 数组名.unshift(元素1,元素2,…)
* (2)在数组末尾添加元素： 数组名.push(元素1,元素2,…)
* (3)在数组首部删除元素： 数组名.shift()
* (4)在数组末尾删除元素： 数组名.pop()
* (5)数组排序： 升序：数组名.sort(up) 降序：数组名.sort(down)
* 其中：function up(a,b){return a-b;} function down(a,b){return b-a;}
* (6)数组颠倒顺序： 数组名.reverse()
* (7)将数组元素连接成字符串： 数组名.join(“连接符”)
* (8)
*/
//举例
var arr = [“js”,”jquery”];
document.write(arr + ‘\n’);
arr.unshift(“db”);
arr.push(“ab”);
document.write(arr);
arr.shift();
arr.pop();
document.write(arr);
var arr1 = [3, 6, 2, 5, 8, 1];
document.write(arr1);
function up(a,b){return a-b;}
arr1.sort(up);
document.write(arr1);
function down(a,b){return b-a}
arr1.sort(down);
document.write(arr1);
var arr = [“js”,”jquery”,”abcd”];
var re = arr.join(“”);
document.write(re);
document.write(typeof(re));
//例题：将字符串所有字符颠倒顺序
function test(str){
var arr = str.split(“”);
document.write(typeof(arr));
arr.reverse();
var re = arr.join(“”);
document.write(typeof(re));
return re;
}
document.write(“javascript颠倒后： ” + test(“javascript”));
/*第七章：时间对象
* 创建一个日期对象必续使用new关键字：语法： var 日期对象名 = new Date();
* Date对象的方法有很多，主要分为两大类：获取时间：getXxx() 和 设置时间：setXxx()
*
* getFullYear() 获取年份：取值4位数字
* getMonth() 获取月份：取值0（一月）-11（十二月）整数
* getDate() 获取日数：取值0-31整数
* getHours() 获取小时：取值0-23整数
* getMinutes() 获取分钟：取值0-59整数
* getSeconds() 获取秒数：取值0-59整数
* getMilliseconds() 获取毫秒
* getDay() 获取星期几：0表示星期天
* setFullYear(year,month,day) 设置年月日
* setMonth(month,day) 设置月日
* setDate(day) 设置日 : 1-31整数
* setHours(hour,min,sec,millsec) 设置时分秒毫秒
* setMinutes(min,sec,millsec) 设置分秒毫秒
* setSeconds(sec,millsec) 设置秒毫秒
*/
//举例
var d = new Date();
var myyear = d.getFullYear();
var mymonth = d.getMonth();
var myday = d.getDate();
var myday1 = d.getDay();
var weekend = [“星期天”,”星期一”,”星期二”,”星期三”,”星期四”,”星期五”,”星期六”];
document.write(myyear + “年”+(mymonth+1)+”月”+myday+”日”+weekend[myday1]);
/*第八章：数学对象
* 数学对象不需要使用new关键字来创造，而是直接使用它的属性和方法
* 语法： Math.属性 Math.方法
* 注：属性往往都是常量，比如：圆周率：PI （常用格式：度数*Math.PI/180）
* Math中方法常用有：
* max min sin cos tan asin acos atan floor ceil random atan2
* Math中方法不常用有：
* abs sqrt log pow exp
* random():用于生成0-1之间的随机数，即： [0,1)
* 随机生成某个范围的任意数：
* 1，Math.random()*m:生成0~m之间的随机数
* 2，Math.random()*m+n:生成n~m+n之间的随机数
* 3，Math.random()*m-n:生成-n~m-n之间的随机数
* 4，Math.random()*m-m:生成-m~0之间的随机数
*/
//举例
var a = Math.max(3,9,10,2,4,6,12,67,9);
document.write(a);
var b = 0.6;
document.write(Math.floor(b));//floor向下取整
document.write(Math.ceil(b)); //ceil向上取整
document.write(Math.random()*10);
//例题：生成随机验证码
function random_validate(str){
var arr = str.split(“”);
var result = “”;
for(var i = 0;i < 4; i++){
var n = Math.floor(Math.random()*arr.length);
result += arr[n];
}
return result;
}
document.write(random_validate(“asjcbakavbavakvhakjbvkvJASSDKABKAVAVJ24123435”));
/*第九章：DOM基础
* DOM：document object model文档对象模型（W3C定义的一个标准）
* DOM操作：理解：元素操作；DOM采用树形结构
* 重点：每一个元素就是一个节点，每个节点就是一个对象。操作元素时其实就是把这个元素看成一个对象，
* 然后使用其对象的属性和方法进行操作。节点包括元素，二者实际不是同一概念
* DOM节点有12种类型，其中常用的三种：元素节点，属性节点，文本节点
* 不同节点的nodeType属性值：
* 元素节点：1
* 属性节点：2
* 文本节点：3
*
* 一，获取元素（实际获取元素节点），js种有以下方式：
* 1，getElemnetById()
* 2，getElemnetByTagName():返回一个类数组（伪数组）：只能使用length属性和下标形式
* 3，getElemnetByClassName()
* 4，getElemnetByName():只用于表单元素，一般用于单选按钮和复选框
* 5，querySelector()和querySelectorAll()
* 6，document.title()和document.body()
* 二，创建元素：（动态DOM操作）
* 创建元素节点：createElement()
* 创建文本节点：createTextNode()
* 总结：创建一个元素的步骤：
* (1)创建元素节点：createElement()
* (2)创建文本节点：createTextNode()
* (3)把文本节点插入元素节点：appendChild()
* (4)把组装好的元素插入到已有的元素中：appendChild()
* 三，插入元素
* 1，appenChild() :把一个元素插到父元素的内部子元素的末尾
* 2，insertBefore():把一个元素插到父元素的内部某个子元素的之前
*
* 四，删除元素：removeChild()
* 五，赋值元素：obj.cloneNode(bool)
* obj:被复制的对象
* bool:参数 true：复制元素本身及其子元素 false：仅仅复制本身
* 六，替换元素：replaceChild(new,old)
*/
//创建简单元素
window.onload =function(){
var oDiv = document.getElementById(“content”);
var oStrong = document.createElement(“strong”);
var oTxt = document.createTextNode(“逗比小憨憨”);
oStrong.appendChild(oTxt);
oDiv.appendChild(oStrong);
}
//创建带属性的元素
window.onload =function(){
var oInput = document.createElement(“input”);
oInput.id = “sumit”;
oInput.type = “button”;
oInput.value = “提交”;
document.body.appendChild(oInput);
}
//创建动态图片
window.onload =function(){
var oImg = document.createElement(“img”);
oImg.className = “doubi”;
oImg.src = “img/doubi.jpg”;
oImg.style.border = “1px solid silver”;
document.body.appendChild(oImg);
}
//创建多个元素
window.onload =function(){
var oTable = document.createElement(“table”);
for(var i = 0; i < 3;i++){
var oTr = document.createElement(“tr”);
for(var j = 0; j < 3; j++){
var oTd = document.createElement(“td”);
oTr.appendChild(oTd);
}
oTable.appendChild(oTr);
}
document.body.appendChild(oTable);
}
//子元素插到末尾
window.onload =function(){
var oBtn = document.getElementById(“btn”);
oBtn.onclick = function(){
var oU1 = document.getElementById(“list”);
var oTxt = document.getElementById(“txt”);
var textNode = document.createTextNode(oTxt.value);
var oLi = document.createElement(“li”);
oLi.appendChild(textNode);
oU1.appendChild(oLi);
}
}
//子元素插到某个子元素之前
window.onload =function(){
var oBtn = document.getElementById(“btn”);
oBtn.onclick = function(){
var oU1 = document.getElementById(“list”);
var oTxt = document.getElementById(“txt”);
var textNode = document.createTextNode(oTxt.value);
var oLi = document.createElement(“li”);
oLi.appendChild(textNode);
oU1.insertBefore(oLi, oU1.firstElementChild);
}
}
//删除子元素
window.onload =function(){
var oBtn = document.getElementById(“btn”);
oBtn.onclick = function(){
var oU1 = document.getElementById(“list”);
oU1.removeChild(oU1.lastElementChild);
}
}
//复制元素
window.onload =function(){
var oBtn = document.getElementById(“btn”);
oBtn.onclick = function(){
var oU1 = document.getElementById(“list”);
document.body.appendChild(oU1.cloneNode(1));
}
}
//替换元素
window.onload =function(){
var oBtn = document.getElementById(“btn”);
oBtn.onclick = function(){
var oFirst = document.querySelector(“body *:first-child”);
var oTag = document.getElementById(“tag”);
var oTxt = document.getElementById(“txt”);
var oNewTag = document.createElement(oTag.value);
var oNewTxt = document.createTextNode(oTxt.value);
oNewTag.appendChild(oNewTxt);
document.body.replaceChild(oNewTag, oFirst);
}
}
/*第十章：DOM进阶
* 操作HTML元素属性的方式：对象属性和对象方法
* 不管是用那种方式，都需要涉及两个操作：获取HTML属性值，设置HTML属性值
* 一，获取HTML属性值：
* 语法： obj.attr (obj是元素名，是一个DOM对象，指的是getElementById()
* 等方法获取到的元素节点)
* 二，设置HTML属性值： obj.attr = “值”;
* 三，HTML属性操作(对象方法)
* 1，getAttribute()：获取元素的某个属性值
* 2，setAttribute()：设置元素的某个属性值,参数1：属性名 参数2：属性值
* 3，removeAttribute()：删除某个属性
* 4，hasAttribute()：判断元素是否含有某个属性
* 四，总结：
* 1，“对象属性方式”和“对象方法方式”都可以操作静态HTML的属性和动态DOM属性
* 2，只有“对象方法方式”才可以操作自定义属性
*
* 五，CSS属性操作：是指js操作一个元素的CSS样式
* 1，获取CSS属性值：getComputeStyle(obj).attr <==> getComputeStyle(obj)[“attr”]
* obj：DOM对象 attr：CSS属性名
* 2，设置CSS属性值
* (1)style对象：行内样式 语法：obj.style.attr=”值”
* (2)cssText方法
* 六，DOM遍历
* 1，查找父元素：obj.parentNode obj:DOM对象
* 2，查找子元素：
* (1)childNodes,firstChild,lastChild
* (2)children,firstElementChild,lastElementChild
* 注：childNodes：获取所有节点包括文本节点 children：获取所有元素节点，不包括文本节点
* 3，查找兄弟元素:
* (1)previousSibling：查找前一个兄弟节点
* (2)nextSibling：查找后一个兄弟节点
* (3)previousElementSibling：查找前一个兄弟元素节点
* (4)nextElementSibling：查找后一个元素节点
* 七，innerHTML与innerText
*/
//获取静态HTML中的属性值
window.onload = function(){
var oBtn = document.getElementById(“btn”);
oBtn.onclick = function(){
alert(oBtn.id);
}
}
//获取动态HTML中的属性值
window.onload = function(){
var oInput = document.createElement(“input”);
oInput.id = “submit”;
oInput.type = “button”;
oInput.value = “提交”;
document.body.appendChild(oInput);
oInput.onclick = function(){
alert(oInput.id);
}
}
//获取单行文本框的值
window.onload = function(){
var oBtn = document.getElementById(“btn”);
oBtn.onclick = function(){
var oTxt = document.getElementById(“txt”);
alert(oTxt.value);
//document.write(oTxt.value);
}
}
//获取单选框的值
window.onload = function(){
var oBtn = document.getElementById(“btn”);
var oFruit = document.getElementsByName(“fruit”);
oBtn.onclick = function(){
for(var i = 0; i < oFruit.length; i++){
if(oFruit[i].checked){
alert(oFruit[i].value);
}
}
}
}
//获取复选框的值
window.onload = function(){
var oBtn = document.getElementById(“btn”);
var oFruit = document.getElementsByName(“fruit”);
var str = “”;
oBtn.onclick = function(){
for(var i = 0; i < oFruit.length; i++){
if(oFruit[i].checked){
str +=oFruit[i].value;
}
}
alert(str);
}
}
//获取下拉列表的值
window.onload = function(){
var oBtn = document.getElementById(“btn”);
var oSelect = document.getElementById(“select”);
oBtn.onclick = function(){
alert(oSelect.value);
}
}
//设置属性值
window.onload = function(){
var oBtn = document.getElementById(“btn”);
oBtn.onclick = function(){
oBtn.value = “button”;
document.write(oBtn.value);
}
}
//获取固有属性值
window.onload = function(){
var oBtn = document.getElementById(“btn”);
oBtn.onclick = function(){
alert(oBtn.getAttribute(“id”));
}
}
//获取自定义属性值
window.onload = function(){
var oBtn = document.getElementById(“btn”);
oBtn.onclick = function(){
//alert(oBtn.data);//oBtn.data是不能获取自定义属性值
alert(oBtn.getAttribute(“data”));
}
}
//获取自定义属性值
window.onload = function(){
var oTd = document.getElementsByTagName(“td”);
for(var i = 0;i < oTd.length; i++){
oTd[i].onclick = function(){
var oParent = this.parentNode;
oParent.style.color = “white”;
oParent.style.backgroundColor = “red”;
};
}
}
//childNodes与children的比较
window.onload = function(){
var oU1 = document.getElementById(“list”);
var childNodes = oU1.childNodes.length;
var children = oU1.children.length;
alert(“childNodes的长度：”+childNodes + “\n” +”children的长度：”+children);
}
/*第十一章：事件基础
* 一，在js中一个事件分为三部分：
* 1，事件主角：是按钮还是div元素或是其它？
* 2，事件类型：是点击还是移动或其它？
* 3，事件过程：这个事件都发生了些什么？
* 二，js中常用的事件：
* 1，鼠标事件
* 2，键盘事件
* 3，表单事件
* 4，编辑事件
* 5，页面事件
* 三，js中事件调用方式：
* 1，在script标签中调用：指的是在