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)

  • 相关阅读:
    03.友盟项目--原始日志数据生成(改进版)---redis存储 用户设备的信息
    Java中的字符集
    时间复杂度
    Hive建模
    08、Spark常用RDD变换
    06、部署Spark程序到集群上运行
    05、Spark
    04、Spark Standalone集群搭建
    02、体验Spark shell下RDD编程
    03、IDEA下Spark API编程
  • 原文地址:https://www.cnblogs.com/huaxiaoyao/p/5992956.html
Copyright © 2011-2022 走看看