zoukankan      html  css  js  c++  java
  • DOM document object model learn

    DOM
    对W3C DOM而言,HTML文档中任何一样东西都是一个节点,而且节点之间是有层次的。
    如<p>I am a JavaScript hacker.</p>
    有两个节点,一个是P标签的元素节点,一个是文字节点,P节点包含文本节点。
    按照这样的节点层次,所有节点构成了一棵文档树。
    节点类型
    文档节点 nodeType :9
    元素节点 nodeType :1
    文本节点 nodeType :3
    属性节点 nodeType :2
    注释节点 nodetype :8

    寻找元素:
    长途搜索:document.getElementById and document.getElementByTagName
    短途查找:parentNode,firstChild,lastChild,previousSibling,nextSibling
    每一个节点都拥有包含节点列表的两个属性,childNodes[] and children[]
    它们之间的不同在于,children[]仅包含类型为元素节点的子节点,不包含文本节点,
    而前者包含所有的子节点。
    firstChild最常用的地方就是访问元素的文本内容。
    <p>I am a JavaScript Hacker.</p>
    var par = [the paragragh];
    var text = par.firstChild.nodeValue;
    每一个节点都有一些属性,并分别包含一些节点的信息,它们是nodeName,nodeValue,
    nodeType,and tagName.
    nodeName是大写的HTML标签。
    对于文本节点,nodeValue就是其实际包含的文本内容。
    对于属性节点,nodeValue就是其属性的值,
    而对文档节点和元素节点不可用,即返回undefined.
    修改文档结构
    w3c dom 提供了4种方法来修改文档树,常用的是
    appendChild and insertbefore
    removeChild and replaceChild比较少用。
    createElement() 和 createTextNode()
    cloneNode 可以用来克隆一个节点,它能对节点做一个完美的复制。
    innerHTML 原本是微软专有的属性,现在获取了所有流行的浏览器的支持。
    它以字符串的形式返回一个元素的HTML内容,它也允许你把新的HTML内容写入一个元素。
    而且使用它创建元素的速度要优于使用其他的方法。
    属性
    它也是节点类型,总是以键值对的形式出现。
    W3CDOM 提供了两个方法 getAttribute() setAttribute()
    .它位可以用玩HTML元素包含的任何属性,甚至是自定义的属性。

    在HTML中空格,換行和TAB都是文本空节点,这样使nextSibling和previousSibling就没有了用处。
    document.forms[0].elements[]包含文档中每一个表单的所有表单域。
    JS常用修改CSS的方式:
    1.修改元素的STYLE属性,(element.style.margin='10%')
    2.修改元素的class或id(element.className='error')
    CSS中的含有破折号的属性如font-size之类的,在对应的JS中会变成驼峰表示的属性。例如
    element.style.fontSize='120%';
    margin-left <> marginLeft
    添加与移除class
    obj.className += ' errorMessage';
    this.className = this.className.replace(/errorMessage,'');

    通过XMLHttpRequest对象发送HTTP请求进行数据检索需要如下步骤:
    1.创建一个XMLHttpRequest对象
    2.提示该对象打开特定的文件(open)
    3.告诉该对象如何处理服务器返回的数据(注册onreadystatechange事件处理程序)
    4.给出指令让该对象发送请求(send)

  • 相关阅读:
    hiho 103 平衡树·Treap
    HDU 5738 Eureka
    codeforces 682D Alyona and Strings
    Photoshop cs5 永久序列号
    httpd.exe你的电脑中缺失msvcr110.dll怎么办
    Gzip压缩启用图文方法详细说明
    帝国CMS开启全站搜索功能
    怎么给电脑统一设置查看文件为列表形式?
    帝国CMS网站地图sitemap的制作教程,分享2种帝国cms网站地图模板
    lol安装包打开没反应
  • 原文地址:https://www.cnblogs.com/huaxiaoyao/p/5992956.html
Copyright © 2011-2022 走看看