学习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总结的一部分知识点和需要注意的。

 

学习javascript DOM的笔记,布布扣,bubuko.com

学习javascript DOM的笔记

上一篇:Javascript 基础--JS函数(三)


下一篇:python之抽象 2014-4-6