Web API 笔记及总结

• 为什么要学节点---更好的操作元素
• 节点的属性(.语法 可以使用元素(标签).出来----使用属性节点. 出来---- 文节点. 出来 )

nodeType：1----标签，2----属性，3----文本
nodeName：大写标签名字----标签节点，小写属性名字----属性节点，#text----文本节点
nodeValue：null----标签节点，属性值----属性节点，文本内容 ---文本节点 

• 12行代码--------熟练操作

  . parentNode              父级节点
  . parentElement           父级元素
  . childNodes              子节点
  . children                子元素
  . firstChild              第一个子节点
  . firstElementChild       第一个子元素
  . lastChild               最后一个子节点
  . lastElementChild        最后一个子元素
  . previousSibling         前一个兄弟节点
  . previousElementSibling：前一个兄弟元素
  . nextSibling             后一个兄弟节点
  . nextElementSibling      后一个兄弟元素

• 元素的创建----目的：提高用户体验
  • document.write ("标签的代码及内容");

     document.write("<p>这是一个p</p>");

  • 父级对象.innerHTML="标签及代码";- - - - - - - 大量嵌套关系的时候使用很方便

    my$("dv").innerHTML="<p>窗前明月光,疑是地上霜,举头望明月,低头思故乡</p>";
    innerHTML和innerText的区别：
        innerHTML主要的作用是在标签中设置新的html标签内容,是有标签效果的
        innerText主要是设置文本的,设置标签内容,是没有标签的效果的
    

  • document.createElement("标签的名字");  得到的是对象

    var pObj = document.createElement("p");
    setInnnerText(pObj, "这是一个p");    //自己写的兼容代码  右边这个也可以pObj.innerText="哈哈";
    my$("dv").appendChild(pObj);
    
    负责生孩子的同时 要记得上户口
    很多时候我们在使用第三种方式创建对象的时候很方便 document.createElement("p");得到的就是对象但是容易忘记把它
    追加到父级元素当中