DOM初用

DOM 文档对象模型
js操作HTML文档的api   1998年10月
IE中的dom对象是以com对象的形式实现的
实例化
1.通过dom拿到我们想要的节点
  var myDiv=document.getElementById("myDiv");
    console.log(myDiv);
2.通过dom创建节点
//创建一个lt节点
    var node =document.createElement("lt");
    //创建text节点
    var txetNode=document.createTextNode("hello");
    //将text节点添加到lt节点上
    node.appendChild(txetNode);
    //
    document.getElementById("myDiv")

document类型
表示整个HTML文档 document
属性：body 指向body元素
     head   获取HTML头部
     title   获取文档标题
     doctype  获取<!document> 很少用
     url 获取完整的URL
     domain 获取域名
     referrer 获取链接到当前页面的那个页面的url
     images 获取页面所有的img对象 返回值：HTMLcollection
     forms 获取所有的form对象 返回值：HTMLcollection
     links 获取文档中带有href属性的a元素
方法 getElementById（）//通过元素的id获取元素节点
调用者：document
参数：想要获取的元素id
返回值：找到的第一个元素，如果没有返回null
getElementClassName（“app app1”）//通过元素的类名获取元素节点
  调用者：document
  参数：为一个字符串，表示元素的类名 可以用空格隔开
  返回值： HTMLcollection  list包含一个或多个元素 可以使用数组的操作方式去处理结果

getElementByTagName（“”）
作用： 通过元素的标签名找到节点
调用者：document
参数：为一个字符串，表示元素的元素名（标签）
返回值：HTMLcollection list 包含一个或多个元素 可以使用数组的操作方式去处理结果

getElementByName（“”）
作用： 通过元素的名找到节点
调用者：document
参数：为一个字符串，表示元素的名（）
返回值：Nodelist list 包含一个或多个元素 可以使用数组的操作方式去处理结果

Element类型
属性
id 元素在文档中的唯一标志符
className 与元素的class特性相对应 可以重复 可以有多个 用空格分隔
title 与元素相关的附加信息
src 
alt
自定义属性
设置属性
  node.className="two";//设置类名
    node.setAttribute("className","three");//第二种
    获取属性
    node.getAttribute("class")
node.setAtt
setAttribute();
作用：给获取到的元素设置属性
调用者： 要设置属性的元素
参数：两个参数 属性名 对应的值
返回值：对应的属性值
注意点：要设置的值存在的话，修改原来的值，不存在就添加

getAttribute();
作用：给获取到的元素设置属性
调用者： 元素
参数：属性名 
返回值：对应的属性值
移除属性
removeAttribute（）
作用：给获取到的元素移除属性
调用者： 元素
参数： 属性名 
返回值：对应的属性值
创建元素
createElement
作用：创建一个dom节点
调用者：document
参数：一个参数，要创建元素的标签名在html中不区分大小写，
在xml中区分
返回值：
var node = document.createElement("LI");
        // 创建一个text节点
        var textNode = document.createTextNode("Hello");
        // 将text节点追加到li节点上
        node.appendChild(textNode);

firstElementChild 某个节点的第一个孩子节点
lastElementChild  某个节点的最后一个孩子节点

nextElementSibling  某个节点的下一个兄弟节点
previousElementSibling  某个节点的上一个兄弟节点

childElementcount：该节点子元素数 子元素的数量，返回值和children.length值相等
innerHtml：该元素内容
textContent：该元素内部的文本
text类型
属性
length 文本长度
appendData
作用：给文本节点 添加节点
调用者：文本节点
参数：要添加的文本内容
deleteData（）；
作用：删除文本
调用者：文本节点
参数：两个参数 开始的位置 要剩余的数量
var textNode = document.createTextNode("hello,");
      textNode.appendData("world");
    deleteData(0, 2);
    
insertData（）；
作用：插入文本
调用者：文本节点
参数：两个参数 开始的位置 要插入的文本
 var textNode = document.createTextNode("hello,");
        textNode.insertData(6, "world!")

replaceData（）；
作用：替换文本
调用者：文本节点
参数：三个参数 开始的位置 要替换的文本长度 替换的文本
  var textNode = document.createTextNode("hello,");
        textNode.replaceData(0, 2, "-"); // "-llo,"

splitText（）；
作用：将一个文本节点分割成两个
调用者：文本节点
参数：一个 分割点的位置
返回值：分割好的后面的文本节点
    var textNode = document.createTextNode("helloworld");
        console.log(textNode); // "hello"
        console.log(textNode.splitText(5)); // "world"

substringData（）；
作用：提取文档节点中的字符串
调用者：文本节点
参数： 两个参数 开始的位置 要提取的文本个数
返回值： 提取出来的字符串
注意点：不改变原文本
   var textNode = document.createTextNode("helloworld");
        console.log(textNode.substringData(0, 5)); // hello
        console.log(textNode); // "helloworld"

createElementData（）；
作用：创建一个文本节点
调用者：文本内容
参数： 
返回值：
注意点：   var textNode = document.createTextNode("helloworld");
comment类型
注释
创建：createComment();
作用：创建注释节点
const comment = document.createComment('注释')
document.body.appen(commnet)