zoukankan      html  css  js  c++  java
  • 学习javascript DOM的笔记

    一、DOM
    作用:
      DOM(Document Object Model)


    1.document 文档 HTML XML (标记语言)
    <body>
      <div>
        <a>你好</a>
      </div>
    </body>
    2.object 对象 (HTML元素 转成的对象(js对象))
    注意:如果使用js操作HTML文档,就需要先将HTML文档结构转成JS对象
      a.操作属性

      b.操作内容
      innerText
      innerHTML
      outerText
      outerHTML

      表单
      value
      c.操作样式
       对象名.style.background="#ccc";
    注意:标签里面有"-"的要去掉,后面的单词首字母大写(如:font-size)
      aobj.style.fontSize="3cm";

    className

      对象名.className="class1";//当个引用
      对象名.className+=" class2";//多个引用,注意class前面要有空格

      对象名.className="class1 class2"
      对象名.className="";//清除样式

    有以上三点的操作之前先转成对象

    转成对象的两种形式:
    1.标记名(多个)、id(唯一)、name(多个)

      document中的三个方法

      var 对象名=document.getElementsByTagName("标签名");
      var 对象名=document.getElementsById("id名");
      var 对象名=document.getElementsByName("name名");

    2.通过数值

      document.title="你好";
      document.body=[object];
      document.frames=[object];

      document.all=[object];
      document.embeds=[object];
      document.scripts=[object];
      document.applets=[object];
      document.image=[object];
      document.forms=[object];
      document.anchors=[object];
      document.styleSheets=[object];
      document.links=[object];

    有七种访问方式:
    例子:
    <form name="frm1">
    <input type="text" name="username" value="赵丹"><br />
    </form>

    <form name="frm2">
    <input type="text" name="username" value="赵"><br />
    </form>

    <form name="frm3">
    <input type="text" name="username" value="丹"><br />
    </form>

    document.forms[0].username.value;
    document.forms["frm1"].username.value;
    document.forms.item(0).username.value;
    document.forms.item("frm1").username.value;
    document.forms.frm1.username.value;
    document.frm1.username.value;
    document["frm1"].username.value;
      3.Model 模式
        a、将文档想成一个倒树,每一个部分(元素,内容,实行,注释)都是一个节点
        b、只要知道一个节点,按关系就可以找到其他的节点
            父节点 parentNode
            子节点(第一个,最后一个) childNodes firstChild lastChild
            同胞节点(上一个,下一个) nextSibling previousSibling

        c、找到节点:节点类型nodeType、节点名nodeName、节点值nodeValue

        每个节点都拥有包含着关于节点某些信息的属性。这些属性是:
            nodeName(节点名称)
            nodeValue(节点值)
            nodeType(节点类型)

      nodeName属性含有节点的名称
        元素节点的nodeName是标签名称
        属性节点的nodeName是属性名称
        文本节点的nodeName永远是#text
        文档节点的nodeName永远是#document
      注释:nodeName所包含的XML元素的标签名称永远是大写的
        对于文本节点,nodeValue属性包含文本。
        对于属性节点,nodeValue属性包含属性值。
        nodeValue属性对于文档节点和元素节点是不可用的。

        nodeType属性克返回节点的类型。
        最重要的节点类型是:
        元素类型          节点类型
         元素            1
         属性            2
         文本            3
         注释              8
         文档            9

      可以在一个文档流中
        1.创建节点
          document.createElement("img");

          appendChild();
          insertBefore();
        2.添加到文档流中
        3.删除节点
          removeChild();

     自己学习javascript DOM总结的一部分知识点和需要注意的。

  • 相关阅读:
    项目总结
    个人博客
    个人博客
    个人博客
    个人博客
    个人博客
    个人博客
    个人博客
    个人博客
    浅谈Vue与swiper轮播图框架结合小案例
  • 原文地址:https://www.cnblogs.com/zhaodan/p/3650461.html
Copyright © 2011-2022 走看看