JS原生对节点的增删改查

1.内置对象

String(两种创建方式，直接量和new方式) Number(类似java中的整形和浮点型，不区分小数点) Boolean Array（中括号，两种创建方式；new方式创建可以不指定数组长度） Math Date（new方式创建，有无参和带参两种） RegExp（用来匹配正则表达式，两种创建方式） Function

var reg=/正则表达式/[范围];

var reg=new RegExp("正则表达式",[范围]);

字符串的正则使用
str.replace(正则，替换的内容);
str.match(正则);返回找到的内容的数组

str.search()

function 函数名(){}
var 函数名=function(){}

var 函数名=new Function("x","y","return x+y");

***js中不存在方法的重载
*调用时只要函数名称一样，无论传入多少个参数，调用的都是同一个函数
*所有的参数都传递给arguments
*我们可以根据参数个数不同，执行不同的逻辑
*变量 -作用域
js中存在变量提升现象，但是提升的是变量的声明，而不包括值
1.如果不适用var声明的变量 -全局
2.使用var声明的变量
1）定义在函数内部 ->私有变量（函数体内）

2）函数外部->整个js

几个全局函数：alert() console.log() parstInt() isNaN() eval()-计算表达式字符串，用于执行字符串中的js代码

2.外部对象

DOM-文档对象模型 通过DOM实现对html文档数据的操作定义了很多js访问和操作html的方法

BOM-浏览器对象模型 -通过BOM移动窗口更改状态栏（不跟页面的内容发生直接联系）

BOM对象：

window对象

所有的全局变量 方法 属性 都自动成为window成员
常用的属性
*location:窗口的地址对象
*document:窗口中显示的html文档对象
*history:窗口访问过的历史记录对象
*screen:当前的屏幕对象

*navigator:浏览器的相关信息

常用方法

*alert()全局的方法都在window中

一次性定时
*setTimeout()

两个参数：function,time 执行的内容，time以毫秒为单位

*clearTimeout()

在一个设定的时间之后执行代码

*setInterval()  clearInterval()周期性定时

常见对象
(wiindow的五个属性可以分别获取到其对应的5个对象）
*location
-href属性：获取当前窗口正在访问的地址
-reload():重新加载（等同于刷新）
*document
*history
-length属性 返回访问的地址的个数
-back()返回上一个地址
-forward()进入下一个地址
-go(index)
:index<0回退
:index>0前进 
*screen
-width
-availWidth
-height -实际的屏幕高度
-availHeight -可用的屏幕高度
*navigator
-userAgent -获取浏览器相关信息

DOM对象

1）动态创建html

-js改变html元素
-js改变html属性
-js改变html样式
-js对html中的事件作出反应

**DOM模型会被构造成dom树**

2）查询 读取 修改 新增 删除-js对dom的操作

*查询
  -document.getElementById(id);
  -返回一个节点
  -document.getElementsByTagName(tagName);
  -返回根据标签名称查找到的元素集合
  -document.getElementByName(name);
  -返回根据标签name属性查找到的元素集合
  -documentEle.parentNode
  -返回指定节点的父节点
  -documentEle.childNodes
  -返回指定节点的所有孩子节点
  -document.querySelector(selector)
  -根据选择器查找单个节点
  -返回符合选择器的第一个节点
  -document.querySelectorAll(selector)

  -返回符合选择器的所有节点

*读取+修改（前提：查找到了节点）
  -读取
  ~内容（值）
  innerHTML属性 -不解析html文本
  —将内容当成字符串打印
  innerText属性 -只获取解析后的文本内容
  ~属性
  ele.属性名
  ele.getAttribute(属性名)
  -修改
  ~值
  ele.innerHTML=值
  ele.innerText=值
  ~属性
  ele.属性名=值
  ele.setAttribute(属性名，值);
  *读取修改样式
  获取节点样式：ele.style;

  修改节点样式：ele.style=值;

*增加节点
    *通过属性给页面添加节点
    ele.innerHTML="html"代码
    *通过方法给页面添加节点
a.新建节点
document.createElement(节点名称)；
b.添加到指定位置
父节点.appendChild(新节点);
父节点.insertBrfore(新节点),旧节点;
*通过js添加的元素可以被js找到

*但是要注意先后顺序(先添加，再查找)

*删除节点

    父节点.removeChild(删除的节点);

事件是指页面元素状态发生改变 触发的操作

鼠标事件
       单击：onclick
       双击：ondbclick
       进入：onmouseover
       移开：onmouseout
键盘事件
       按下：onkeydown
       松开：onkeyup
状态改变
        选择：onchange(单选 复选 下拉)
失去：onblur
获取：onfocus
表单提交：onsubmit
事件的定义
*元素上添加对应的事件属性
*在js中 元素.事件名=function(){}