一.节点
    
    DOM中所有的内容都是节点
    
    1.每个html元素为元素节点
    
    2.每个html元素的属性为属性节点
    
    3.html里的文本为文本节点
   
    二.获得元素节点对象
    
    1.document.getElementById(“id”);
    
    通过id(唯一)来找到html元素即获取元素节点 返回元素对象
    
    2.document.getElementByName(“name”);
    
    通过name来找到元素节点,由于name不唯一所以返回元素对象数组,数组里每个值为对应的元素对象
    
    3.document.getElementByTagName(“p”);
    
    通过标签来找到元素节点,同理由于标签不唯一所以返回元素对象数组
    
    4.document.getElementByClassName(“classname”);
    
    通过class的值找到元素节点,同理返回元素对象数组
   
    三.修改元素节点内的文本节点
    
    1.innnerText(“”);
    
    例子:document.getElementById(“id”).innerText(“修改后的内容”);
    
    2.innerHTML(“”);
    
    例子:document.getElementById(“id”).innerHTML(“
   
修改后的内容
   ”);
   
   区别:innerText只能写纯文本,而innerHTML可以包含html标签,功能更强大
    四.获得或修改属性节点的值
    
    1.修改属性节点的值
    
    setAttribute(“name”,“value”); 第一个name为属性节点的名称,第二个value为修改后的内容
    
    例子:document.getElementById(“id”).setAttribute(“href”,“https”
    
     //www.baidu.com
    
    “);
    
    2.获得属性节点的值
    
    (1)getAttribute(“name”); name为属性节点的名称
    
    例子:document.getElementById(“id”).getAttribute(“title”);
    
    (2)获得元素节点后可以直接获取属性节点
    
    例子:获取超链接的地址
    
    document.getElementByTagName(“a”).href;
   
    五.改变css样式
    
    document.getElementById(“id”).style.property=“新样式”
    
    例子:document.getElementById(“id”).style.backgroundcolor=“red”;
    
    例子2:设置隐藏和可见
    
    document.getElementById(“id”).style.visibility=“hidden”/“visiable”;
   
    六.动态创建节点
    
    1.动态创建元素节点
    
    document.createElement(“标签名”);
    
    例子1:创建p标签
    
    document.createElement(“p”)
    
    例子2:创建按钮
    
    var btn = document.createElement(“input”);
    
    btn.type=“button”;
    
    btn.value=“按钮”;
    
    btn.onclick = function(){
    
    
    alert(“这是一个按钮”);
    
    }
   
    2.动态创建文本节点
    
    document.createTextNode(“文本值”);
    
    例子:document.createTextNode(document.getElementByTagName(“input”).value);
   
    3.为元素节点添加子节点
    
    (1)父元素.appendChild(子元素); 只能添加到父元素的最后一个子元素的后面
    
    括号里没有双引号
    
    例子: var td = document.createElement(“td”);
    
    var tr = document.getElementById(“tr”);
    
    tr.appendChild(td);
   
    (2)父元素.insertBefore(任意子节点,要插入的子节点); 会添加到指定的子节点的前面
    
    同样括号里两个值没有双引号
    
    例子: var td2 = document.getElementById(“td2”); //找到指定的子节点
    
    var td3 = document.createElement(“td”); //创建新的节点
    
    td2.parentElement.insertBefore(td2,); //将新节点添加到指定子节点前面
   
    4.删除节点 父元素.removeChild(要删除的子节点);
    
    var tbody = document.getElementById(“body”); //获取父元素
    
    var tr = document.getElementById(“tr”); //获取要删除的子节点
    
    tbody.removeChild(tr)
   
    七.正则表达式 又称为规则表达式
    
    var teg = /正则表达式/;
    
    var txt = document.getElementById(“text”).value; //获取文本框的值
    
    teg.text(txt); //判断是否符合正则表达式,符合返回true,否则返回false
   
    八.杂项
    
    1.dom中比较常用的属性
    
    (1)nodeName
    
    获取节点的名称 元素节点和属性节点为其本身,文本节点为#text无意义
    
    nodeValue
    
    获取节点的值 属性节点为属性值,文本节点为文本值,元素节点无意义
    
    (2)childNodes 获取节点全部子元素,返回节点对象数组
    
    (3)parentElement 获取父元素对象
    
    (4)firstChild 获取第一个子元素对象
    
    lastChild 获取最后一个子元素对象
   
    2.事件(暂时不全)
    
    (1)点击事件 onclick 鼠标点击时触发(按钮等)
    
    为按钮添加点击事件
    
    btn.onclick = function(){}
    
    另外在按钮属性添加单击事件为 onclick = “return 方法()”
    
    在表单属性中添加事件为onsubmit = “return 方法()”;
    
    (2)发生改变事件 onchange 当元素发生改变时触发 (复选框、单选按钮等)
    
    为复选框添加发生改变事件
    
    check.onclick = function(){}
   
    3.获取下拉列表框被选中的值
    
    (1)获取下拉列表对象
    
    var selectd = document.getElement(“id”);
    
    (2)获取下拉列表框被选中的索引
    
    var index =selected.selectedIndex;
    
    (3)根据索引获取下拉列表框被选中的值
    
    var value = selected.options[index].value;
    
    4.deleteRow(index) 删除一行 index为下标索引,可用于删除表格中的一行
   
 
