• 读《JavaScript dom编程艺术(第2版)》笔记 7-8


    动态创建标记:

    传统方法:document.write、innerHTML

    document.write : 方法可以方便快捷地把字符串插入到文档里,但是缺点是违背了“行为应该与表现分离”的原则。即使把document.write语句挪到外部函数里,也还是需要在标记的<body>部分使用<script>标签才能调用那个函数。应该避免在<body>部分乱用<script>标签,避免使用document.write方法。

    innerHTML:用来读、写某给定元素里的HTML内容。        

    <div id="text">
    <p>This is <em>my</em>content.</p>
    </div>

                                                                                                              元素节点

    div

                                                                                                     

    <p>This is <em>my</em>content.</p>

                                                                                                                HTML

    就innerHTML属性来看,id为text的标记里面只有一个值为<p>This is <em>my</em>content.</p>的HTML字符串。

    innerHTML属性是HTML专有属性,不能用于任何其他标记语言文档。

    DOM方法:createElement、appendChild、createTextNode

    createElement :创建一个元素节点 ,语法:document.createElement(nodeName)   eg:document.createElement("p");创建一个p元素。

    appendChild :插入节点, 语法:parent.appendChild(child)

    createTextNode :创建文本节点 ,语法:document.createTextNode(text)  eg:document.createTextNode("Hello world!");就会创建一个内容为”Hello World“的文本节点  。

    insertBefore :将一个新元素插入到一个现有元素的前面 , 在调用这个方法时,必须得知三件事:1、新元素:你想插入的元素(newElement)  2、目标元素:想把这个新元素插入到哪个元素(targetElement)之前  3、父元素:目标元素的父元素(parentElement)   语法:patentElement.insertBefore(newElement,targetElement)   我们不必搞清楚父元素到底是哪个,因为targetElement元素的parentNode属性值就是它。  属性节点和文本节点的子元素不允许是元素节点

    在现有元素后插入一个新元素:DOM中没有这个方法,但是我们可以写出这个函数  

    function insertAfter(newElement,targetElement){
       var parent=targetElement.parentNode;
       if(parent.lastChild==targetElement){
         parent.appendChild(newElement);
        }else{
         parent.insertBefore(newElement,targetElement.nextSibling);
       }
    }

    nextSibling:相同层的下一个节点,即下一个兄弟节点

    <abbr>缩略语,它是对单词或短语的简写形式的统称。

    <acronym>单词,首字母缩写词。

    eg:如果把DOM念成一个单词dom,他就是一个首字母缩写词;如果把它念成D-O-M三个字母,就是一个缩略语。

    在html5中<acronym>标签已被<abbr>标签代替。

    XHTML中所有标签都必须闭合,对诸如<img>和<br>之类的孤立元素也不例外:在书写时他们必须有一个反斜线字符表示标签结束:即<img/>和<br/>这样。注意为了与早期的浏览器保持兼容,应该再反斜杠字符的前面保留一个空格。

    若要使用XHTML DOTYPE,应该再文档开头:

      <!DOCTYPE html

       PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

      "http://www.w3.org/TR/xhtml1-strict.dtd">

    HTML5的文档类型声明,对应默认的为标准模式

    for/in循环:   for(variable in array)  把某个数组的下标赋给一个变量   =>array[variable]

    blockquote元素包含一个属性cite,这是一个可选属性,给他一个url地址,告诉人们blockquote元素的内容引自哪里。

    accesskey属性,可以把一个元素(如链接)与键盘上的某个特定按键关联在一起,eg:<a href="index.html" accesskey="1">HOME</a>

    在适用于windows系统的浏览器里,快捷键的用法是在键盘上同时按下alt键和特定按键;在适用于mac系统的浏览器里,快捷键的用法是同时按下ctrl键和特定按键。

    <!DOCTYPE html>  这个文档声明同样也支持HTML和XHTML标记。

  • 相关阅读:
    HDU 1010 Tempter of the Bone(DFS剪枝)
    HDU 1013 Digital Roots(九余数定理)
    HDU 2680 Choose the best route(反向建图最短路)
    HDU 1596 find the safest road(最短路)
    HDU 2072 单词数
    HDU 3790 最短路径问题 (dijkstra)
    HDU 1018 Big Number
    HDU 1042 N!
    NYOJ 117 求逆序数 (树状数组)
    20.QT文本文件读写
  • 原文地址:https://www.cnblogs.com/wyy725872/p/4452182.html
Copyright © 2020-2023  润新知