移动端开发

1. 原生App开发
2. web App开发(html5+css3+js)
3. 混合(hybird)模式的开发

   HTML5的标签和表单

4. 标签
   • 结构标签:
     div,p,ul,li,ol li,dl dt dd,h1~h6,a,span,img,em,i(表现形式的标签),strong,b,input,form,table,tr td
     1. 语义化:用合理的标签做合适的事情
     2. 作用:更有利于搜索引擎,让页面的结构更加清晰,更能适应未来的浏览器
     • section 块
     • header 网页的头部或者是一个块区的头部
     • nva 导航
     • main 主体
     • aside 边栏
     • article 完整的独立区域,强调的是独立性
     • footer 网页的页脚或者一个块区的尾部
     • figure 图例
     • figcaption 图例的说明信息
   • 功能标签
     • mark 高亮显示标签内的内容
     • progress 进度条
     • wbr 软换行
     • datalist 获取输入框焦点后显示提示信息
     • details 点击出现下详细的信息 -》summary

5. 表单(Forms)

   • HTML表单种类(input)
     1. search:搜索输入框 获取焦点后,虚拟键盘右下角->回车为”搜索/search”
     2. tel:电话号码输入框(数字键盘)
     3. url:当输入的不为url地址的时候,提交时会进行提示
     4. email:当输入的不为email地址的时候,提交时会进行提示
     5. number:只可以输入数字
     6. range:数值选择器
     7. color:颜色选取器
     8. datatime:显示完整日期和事件UTC标准事件
     9. datatime-local：显示完整日期和时间
     10. month显示月
     11. week：显示周

   • HTML5表达的新特性

     1. placeholder 提示占位符
     2. autocomplete boolean(true/off)
     3. autofocus 光标自动聚焦
     4. required 必填,不能为空
     5. pattern 值为正则,输入的内容如果不符合正则的规则则不能提交,空可以通过验证
     6. formnovalidate和novalidate
        -HTML5表单的验证
     7. 当表单元素验证不通过的时候,会触发invalid事件
     8. 如何判断表单元素有没有验证通过

     9. 所有的表单元素上都有一个validity对象,validity对象上有一些属性

        • valid –>不通过,返回false
        • valueMissing –>输入值为空的时候,值为空

        • patternMismatch –> 正则验证不通过的时候返回true

          1 2 3 4 5

          obj.addEventListener('invalid',function(){ if(this.validity.patternMismatch){ this.setCustomValidity('只能输入n位数字');//自定义提示信息 }else{this.setCustomValidity('');} })

        • typeMismatch –>类型返回不通过的时候返回为true

        • customError –>不符合自定义验证的时候返回为true
        • setCustomValidity –>设置自定义验证规则
   • HTML4表单:text radio checkbox submit button password reset file

     全局属性

6. data-yourAttribute
   • doc.dataset.nameAge
7. ele.classList
   • add() 添加类名
   • remove() 移除类名
   • toggle() 有则移除,没有则填加
8. querySelector
9. Hidden :加上这个属性,元素则为不可见状态
10. spellcheck=boolean 对你输入的内容自动纠错,无默认值
11. tabindex :按下tab键可以根据设置的顺序进行跳转
12. contenteditable=boolean 默认为false
13. desginMode –>window.document.designMode=’on’;

观察者模式(订阅-发布-取消订阅)

1. 发布-订阅模式也被称为观察者模式,他定义了对象间的一种一对多的关系,让多个观察者对象同时监听某一个主题对象,当一个主题对象发生改变时,它所有的观察者都会得到通知.

1. []
   • 产生:绑定事件对应的那个函数中，并且可以作为参数传递
   • ps:标准浏览器中事件对象存在于绑定的函数中,在ie8-中这个事件对象在window.event属性上 ==>e=e||window.event
   • clientX:鼠表点击位置相对于窗口的x轴坐标
   • clientY:鼠表点击位置相对于窗口的y轴坐标
   • pageX:鼠标位置相对于页面的x轴坐标
   • pageY:鼠表位置相对于zzz页面的y轴的坐标
   • e.preventDefault():组织默认行为
   • e.returnValue=false; for IE8-
   • return false; –>>>>也能处理默认行为
   • e.type –>>>>>>>>>当前事件类型(string) *
   • e.target –>>>>>>>事件源
   • ele.srcElement –>>>>>>>for ie8–
   • e.stopPropagation() –>>>>阻止事件传播,ie8-中不存在
   • e.cancelBubble=true; –>>> 阻止事件传播

1. 事件冒泡:
   • 点击当前元素会触发所有祖先元素的对应事件

     Math

2. Math.atan2(y,x) =>
   • 360deg = 2PI*弧度
   • 180/PI 约等于 57.29….

     键盘事件

3. key 按键
4. keyCode 按键编码
   • Enter -> 13
   • BackSpace -> 8
   • space -> 32
   • left -> 37
   • top -> 38
   • right -> 39
   • bottom ->40
   • 0-9 -> 48-57(非主键盘)

     二级事件-EventListener

5. addEventListener 添加监听事件
6. removeEventListener 移除监听事件
7. attachEvent –>ie中的移除事件

let声明变量(来w3cscholl)

1. let声明变量不会进行预解释(不存在变量提升);
2. 不允许重复声明
3. 块级作用域
   • {code} -》代码块
4. 暂时性死区(TDZ)：只要块级作用域内存在let命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响。
5. let声明的并不等价于window的一个全局属性

   const 声明一个只读的常量

6. 定义后不可以修改
7. 同let一样,也会产生一个块级作用域
8. 不存在变量提升

   解构赋值：把数组和对象中的值取出,赋给变量

   1 2 3 4 5 6 7 8 9 10 11

   // var a = 1; // var b = 2; //var c = 3; //ES6允许写成下面这样。 var [a, b, c] = [1, 2, 3]; //交换赋值： [a,b,c]=[c,a,b]; //a->3 //b->1 //c->2

数组的一些新方法

1. Array.from(obj) ->
2. Array.of()创建一个数组的实例
3. 遍历

   1 2 3 4 5

   var arr=[5,5] for(var [key,value] of arr.entries()){ console.log(key+":"+value) }

将类数组转化为数组

1. let newArr=[…divs];

   1 2 3

   var arr=[1,2,3,4,5]; let[aa,...reset]=arr; reset -> [2,3,4,5]

图片的延迟加载;

1. img的src属性会去默认加载src对应的资源，当图片已经完全进入到可是窗口内再去加载这张图片。=》当图片完全进入窗口内再给img的src属性赋值
   • 如何判断图片是否已经完全进入到窗口内
   • window的clientHeight+window的scrollTop的值>img元素相对于body的上偏移量.的时候，img元素则进入window的可是窗口内
   • 获取设置img的src-》img.src=;

2. onload事件的应用(用于测试src地址是否能加载)：

   1 2 3 4 5 6 7

   var tempImg=document.createElement('img');//创建一个临时图片 tempImg.src=img.getAttribute('real'); tempImg.onload=function(){//只要图片的src被赋值就会立刻去加载资源，当加载成功就会触发onload事件 img.src = img.getAttribute('real');//this.src 304 fadeInt(img); }

3. fadeInt(ele):淡入效果的实现

   • 设置ele的css中opacity的值为0;
   • 利用定时器迭代opacity的值;

     1 2 3 4 5 6 7 8 9 10 11

     function fadeInt(ele) { ele.timer = window.setInterval(function () { var opa = utils.getCss(ele, 'opacity');//获取当前ele的透明度样式 if (opa >= 1) { window.clearInterval(ele.timer); return; } opa += 0.01; utils.setCss(ele, 'opacity', opa); }, 10); }

注意：

1. 加载图片时只加载一次就好，通过表示变量来优化性能

   1 2 3 4 5 6 7 8 9

   //在事件的开始进行判断，该时间是否发生过 if (img.isLoaded) { return; } //给元素所绑定的事件末尾设置 img.isLoaded = true //表示该事件已经发生过

onscroll：代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body, img {
            width: 100%;
        }
        a.btn {
            text-decoration: none;
            color: #ffffff;
            display: none;
            width: 40px;
            height: 40px;
            font-size: 12px;
            text-align: center;
            background: blue;
            position: fixed;
            bottom: 100px;
            left: 100px;
            line-height: 40px;
        }
    </style>
</head>
<body>
<img src="1.png" alt="">
<img src="1.png" alt="">
<img src="1.png" alt="">
<img src="1.png" alt="">
<a class="btn" href="javascript:;">顶</a>
</body>
</html>
<script src="utils.js"></script>
<script>
    var btn = document.getElementsByClassName('btn')[0];
    var a = true;
    window.onscroll = fn;
    function fn() {
        if (a) {
            var scrollTop = utils.win('scrollTop'); //在滚动的过程中不断的去获取滚出去的高度，判断这个高度是否超过了一个屏的高度。如果超过按钮出现
            var winHeight = utils.win('clientHeight');
            if (scrollTop >= winHeight) {
                utils.setCss(btn, 'display', 'block');
            } else {
                utils.setCss(btn, 'display', 'none');
            }
        }
        btn.onclick = function () {
            //每次点击都会启动换一个定时器，这样就有可能同时存在多个定时器同时工作。效果就是越点击越快。所以每次点击开始无论上一次定时器是够到达终点都要把上一次的定时器清掉
            this.style.display = 'none';
            window.clearInterval(btn.timer);
            btn.timer = window.setInterval(function () {
                var curScrollTop = utils.win('scrollTop');
                if (curScrollTop <= 0) {
                    a = true;
                    window.clearInterval(btn.timer);
                }
                curScrollTop -= 5;
//                debugger;
                utils.win('scrollTop', curScrollTop);
            }, 1);
            a = false;//由于定时器在滚动条回到顶部的过程中又触发了window.onscroll事件。又把按钮显示出来了。=》当点击事件发生之后让window.onscroll事件移除
        };
    }
    //异步：ajax 定时器 事件 回调函数
    //事件拦截：借助第三方变量，然后不断去修改一个条件。当事件触发的时候这个条件作为是否执行的代码的依据=》开关
</script>

div的原型

1. attributes
   • 行内属性
2. classList:
   • classList.add() 增加类名
   • classList.remove(); 移除类名
   • classList.toggle(‘d’) 如果有类名d就移除类名d，若果没有就添加类名d（toggle:en,n.触发器、开关）
3. firstChild/lastChild
4. firstElementChild/lastElementChildren
5. hidden
6. innerHTML
7. innerText
8. localName:小写的标签名
9. nodeType: 1/2/3/8/9/12……

盒子模型

1. client

   • Width:内容宽度+左右padding
   • Height:内容高度+上下adding
   • Left:左边框的宽度
   • Top: 上边框的宽度
     • ps：右边框的宽度

       1	offsetWidth-clientWidth-clientLeft

2. draggable:true/false 能否被拖拽

3. offset

   • Width:clientWidth+左右border
   • Height:clientHeight+上下border
   • Parent: 如果父元素存在定位属性(position:relative|absolute|fixed)那么这个offsetParent的值为父元素，如果不是则继续向上级找，查找的body后还没有，则将body作为属性值; => 父级参照物
     • ps：body.offsetParent => null;
     • ps:document.parentNode => null;
   • Left:取决于offsetParent，获取都是当前盒子的外边框距离到offsetParent的内边框的距离 ==》左偏移量
   • Top:取决于offsetParent，获取都是当前盒子的上边框距离到offsetParent的内边框的距离 ==》上偏移量
     • ps： body.offsetLeft => 0

       1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

       /** * 求元素相对于body的偏移量 * @param ele 元素 * @returns {{left:左偏移量 , top: 上偏移}} */ function offset(ele) { var l = null, t = null; l += ele.offsetLeft; t += ele.offsetTop; var par = ele.offsetParent; while (par) { l += par.clientLeft + par.offsetLeft; t += par.clientTop + par.offsetTop; par = par.offsetParent; //更新迭代的par } return { left: l, top: t } }

4. scroll

   • Height:上padding+内容的高度(有溢出)
   • Left:横向滚动条滚出去的高度(支持赋值，不支持负值)
   • Top:纵向滚动条滚出去的高度(支持赋值，不支持负值)

   • Width:左padding+内容宽度(有溢出)

     1 2 3 4 5

     document.documentElement.clientWidth || document.body.clientWidth; //可是窗口滚出去的高度 var a = 'scrollTop' document.documentElement.scrollTop||document.body[a]

   • 只有scrollTop和scrollLeft支持赋值

     事件

5. onfocus :获取焦点
6. onblur： 失去焦点
7. oncanplay：一般用于媒体文件可以播放的时候
8. oncanplay

9. onchange ==>select

   1 2 3 4 5 6 7 8 9 10

   <select name="" id="select"> <option value="0">沈阳</option> <option value="1">大连</option> <option value="2">鞍山</option> <option value="3">抚顺</option> <option value="4">本溪</option> </select> select.onchange =function(){}

10. ondblclick:双击

11. onload:加载成功
12. onerror：加载失败
13. oninput
14. onkeydown:键按下
15. onkeyup：键弹起
16. onmousedown：鼠标按下的时候
17. onmouseup：当鼠标弹起的时候
18. onmousemove：鼠标移动
19. onmouseover：鼠标悬停
20. onmouseout：鼠标离开
21. onmouseenter：onmouseover
22. onmouseleave：onmouseleave
23. onmousewheel：鼠标滚轮 =》判断滚轮的方向
24. onpause：暂停
25. onpaly：开始
26. onprogress：进度条
27. onratechange：码率
28. onresize：当大小发生改变的时候==》window.onresize/文本域
29. onscroll:滚动条滚动的时候
30. onsubmit:提交按钮提交的时候触发的时候

util==>offset、win、jsonParse、listToArray、getCss

1
2
3
4
5
6
7

function win(attr,value){
    if((Number(value))>=0 && attr ){
        document.documentElement[attr]=document.body[attr]=value;
    }else{
    return document.documentElement[attr]||document.body[attr];
  }
}

如何获取元素已经生效的样式

1. window.getComputedStyle(ele)[attr]; ie8-不兼容
2. 兼容写法：ele.currentStyle[attr];
   • 关于透明度
     • 标准中的透明度是 opacity:0-1;
     • ie中的透明度为 filter:alpha(opacity=0-100);
     • 所以为了兼容ie捕获透明度必要时要用正则进行筛选、捕获、和转换

       1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

       function getCss(ele, attr) { // debugger; var val = null; if (window.getComputedStyle) { val = window.getComputedStyle(ele)[attr]; } else { if (attr == 'opacity') { val = ele.currentStyle.filter; var reg = /alpha\(opacity=(\d+(?:\.\d+)?)\)/; if (reg.exec(val)) { val = reg.exec(val)[1] / 100 } else { val = 1 } } else { val = ele.currentStyle[attr]; } } var reg = /^-?\d+(?:\.\d+)?(px)?$/; //如果验证能通过就去掉引号和单位否则返回字符串格式 return reg.test(val) ? parseFloat(val) : val; }

设置css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

function setCSS(ele,attr,val){
    if(attr=='opacity'){
        ele.style.opacity=val;
        ele.style.filter ='alpha(opacity'+val*100+')'
        return;
    }
    if(attr=='float'){
        ele.style.cssFloat=val;
        ele.style.styleFloat=val;
        return;
    }
    var reg=/width|height|top|left|right|bottom|(?:margin|padding)(?:Left|Right|Top|Bottom)?/;
    if(reg.test(val)&&!isNaN(val)){
        val+='px';
    }
    ele.style[attr]=val;
}

正则的用法

1. 验证字符串是否符合正则所制定的规则，如
   • 注册输入用户名密码
2. 把符合规则的部分从字符串中捕捕获，如：
   • 从名字中获取到姓

• ps：基本就是用来操作字符串的

  字面量和实例创建正则的区别：

1. 如果使用实例创建，特殊元字符\d需要在创建的时刻

   1 2	var reg1 = new RegExp('\\d',i); //=》第二个参数就是修饰符，实例的方式可以传入变量参数 var reg = /\d/i; //=>在匹配的时候忽略大小写，不能写入变量

   • i:ignoreCase 忽略大小写
   • m:multiline多行匹配
   • g:global 全局全文（一般用于捕获exec）
2. 实例创建，new的过程中的第二个参数就是修饰符；
3. 只要正则中有需要变量的时刻，那么就只能使用实例的创建方式；

   正则的方法

4. reg.test(‘’);验证

5. reg.exec(‘’);捕获

   特殊的元字符

• \d 0-9之间的任意一个数字
• \w 数字、字母、下划线（0-9、a-z、A-Z、_）
• \s 空格或者空白
• \b 边界,不占位–>边界不一定是字符串的开始或结束，一些特殊字符的两边
• \n 匹配一个换行的
• . 匹配任意字符，但是除了\n
• \ 转义符 ==>把特殊意义的字符转变成本来的意思
• ^ 以什么开始，不占位
• $ 以什么结束，不占位
• . ‘.’本身
• \B 匹配非单词边界
• \D 除了/d
• \W 除了/w
• \S 除了\s

  1 2	var reg = /^\d$/; //如果^、$、同时出现，那么对这个字符串的个数就限制了 var reg1 = /a/i; //字面量 =》 只要字符串中包含字母a就可以 ==》在正则的后边加一个i的时候，忽略正则中的大小写

正则中的量词：放在修饰的元字符的后面=》修饰前面的元字符出现的次数

• + 1到多个
• * 0到多个
• ?
  • 量词
  • (?:\d…) 放在一个分组的开头，匹配不捕获，破坏分组
• {n} 出现n个
• {n,} 至少n个
• {n,m} 出现n到m个

  1	var phoneReg=/^1\d{10}$/;

正则中的或者：

1. x|y|z x或者y或者z中的一个

   1 2	var reg = /^(18|19)$/; //由于或者干洗是满足其中一个就可以， //所以处理或者关系的时候我们不妨用()去改变运算的优先级

2. [xyz] x或者y或者z中的一个

3. [^xyz] 除了xyz,返回值是false的时候，字符串中只能有xyz
4. [+-] ‘+’或者’-‘中的一个
5. [\d\w] 数字字母中还有下划线中的一个
6. \w [0-9a-zA-Z] ‘-‘表示的是到的意思
7. [.] “.”代表的不是任意字符，而是代表的.本身

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

   //简单的有效数字验证 var reg =/^[+-]?\d+(\.\d+)?$/; console.log(reg.test('-6.666')); // 文本框的非空验证 var input = document.getElementById('input'); //获得焦点 onfocus // 失去焦点 onblur input.onblur = function () {//失去焦点判断是否输入 var str = this.value; //value塑性就是获取的输入到文本框的内容 var reg = /^\s*$/; if (reg.test(str)) { console.log('输入不能为空') } }; //简单的邮箱判断 var reg1 =/^\w{1,16}(@[0-9a-zA-Z]{2,20}(\.[a-zA-Z]{2,3}){1,2})$/;

正则中的exec方法

1. 捕获结果

   • 返回一个数组：[正则捕获回来的结果,index:捕获开始位置的索引,input:原有字符串]

     1 2 3 4 5 6 7 8

     var str = 'zhu2017feng20000aaaaa1231231'; var reg = /\d+/g; //g：global var ary = []; var text = null; while (text = reg.exec(str)) { ary.push(text[0]); } text = null;

2. reg.lastIndex属性 =》 下次捕获从哪个索引开始，当捕获结果为null，这个属性值会重新赋值为0，然后就又从开始捕获。

   正则中的match方法:str.match(reg)

3. 返回一个数组
4. 会把所有符合要求的的匹配一块返回

   1 2 3 4

   var str = 'a222b333'; var reg = /\d+/g; var res = str.match(reg) console.log(res) //--> ["222","333"]=

正则中的分组和分组中的引用:想获取到字符串中的一部分那么可以使用分组 =》在正则中使用小括号；

1. 分组影响捕获结果：exec返回的结果数组，从第二项开始分别是分组捕获到的内容

   1 2 3

   var id = '211224198602108210'; var reg =/^\d{6}(\d{4})\d{6}(\d)(?:\d|X)$/; //?: console.log((reg.exec(id))) // -》["211224198602108210", "1986", "1", index: 0, input: "211224198602108210"]

2. 括号从左到右依次出现的顺序作为分组的顺序，RegExp.$1-RegExp.$9,保存着正则实例最后的一次被使用的分组的内容

• /(\d)(\d)\1\2/ ->abab

  split和replace

1. split的用法：split的参数可以是一个正则，拆分字符串的时刻会把正则匹配到的位置全部拆分

   1 2 3

   var str = 'a b-c d'; var res = str.split(/[ -]/); //空格或者-拆分 console.log(res)

2. replace的用法：(会在原字符串的副本上进行操作)

• 将副本返回
• 如果第二个参数是一个函数，是这个函数的返回值return来替换第一个参数所匹配到的内容。=》函数执行的次数取决于第一个参数成功匹配的次数
• 第二个参数是一个函数的话，其中的arguments:[总正则在当次执行匹配到的内容,从第二项开始分别是分组n…,index,input]
• 当第二个参数是”$1”字符串，如果有分组那么代表就是分组

  1 2 3 4 5 6

  var str ='53124'; var str2='零一二三四五'; str=str.replace(/\d/g,function(){ return str2.charAt(arguments[0]); return str2[Number(arguments[0])]; })

1
2
3
4
5
6
7
8

var str ="asdafawfwaf? wd = 几哈哈 && kw =xx"
String.prototype.s=function(){
        var obj={};
        this.replace(/([^?&=]+)=([^?&=]+)/g,function(){
            obj[arguments[1]]=arguments[2];
        });
        return obj;
    }

正向预查和负向预查

1. ?= 正向预查： zero-width-lookahead
   • 必须是什么,肯定,不参与捕获
2. ?! 负向预查: zero-width-lookbehind
   • 不能是什么,否定,不参与捕获

createElement和createNodeValue，将创建的节点用appendChild添加到元素当中

• 创建节点：
  • createElement()
  • createAttribute()
  • createTextNode()
  • createFragment()
  • createFragment()

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

    var oDiv = document.createElement("div"); document.body.appendChild(oDiv); oDiv.setAttribute("tittle","my demo"); var oTextNode=document.createTextNode("my demo"); var mes = document.createTextNode("Hello World"); var container = document.createElement("p"); container.appendChild(mes); document.body.appendChild(container); oDiv.appendChild(oTextNode); // 元素节点是没有nodeValue的只有文本节点才有nodeValue； // 在ie9以下的ie浏览器中国，回车换行不算一个文本节点，但标准浏览器中这是个文本节点。 //下为使用createDocumentFragment()作为仓库向元素中appendChild. var oUl= document.createElement("ul"); oDiv.appendChild(oUl); var frg = document.createDocumentFragment(); var oLi = null; for(var i=0;i<10;i++){ oLi = document.createElement("li"); oLi.appendChild(document.createTextNode('这是第'+(i+1)+'个li。')); frg.appendChild(oLi); }; oUl.appendChild(frg);

插入节点：appendChild(node)和insertBefore(newNode,oldNode);

• 下例为insertBefore():

  1 2 3 4 5 6 7 8 9 10 11 12

  <div id="parent"> <p id="content">珠峰培训，专注前端面向未来</p> <div id="msg">msg <div>test</div></div> <p id="222">222</p> <p id="aaa">aaaaaaaa</p> </div> <script> var msg =document.getElementById("msg"); var aaa= document.getElementById("aaa"); var parent = document.getElementById("parent"); parent.insertBefore( msg, aaa); //将msg节点调度到aaa前面

替换节点：replaceChild(newNode,oldNode);

• 被替换的节点没有消失，只是在文档树中被移除了没有了它的位置。
• 如果替换成功返回被替换的节点，如果失败返回null。

  复制节点 cloneNode(boolean)：

• cloneNode()的参数是一个boolean值:
  • true: 深复制 –》赋值本身节点及其整个子节点树
  • false：浅复制–》只复制节点本身

    删除节点 removeChild(node)

• 如果删除成功返回被删除的节点，如果不成功则返回null;

  判断节点 node.hasChildNodes(node1)

• 判断node的子节点中是否存在node1，如果存在返回true，如果不存在返回false

  属性操作;

1. getAttribute() 若果属性存在的话就返回value，如果不存在就返回空；
2. setAttribute(value,att)
3. removeAttribute(att); 删除属性
4. hasAttribute(att) 判断att是否在，返回一个boolean值