zoukankan      html  css  js  c++  java
  • 读《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标记。

  • 相关阅读:
    java 死锁
    阿里云 zookeeper
    spring 单元测试
    java hashmap分段锁实现
    java lambda 列表生成列表
    springAOP简介
    spring IOC小知识点
    spring中相互依赖的问题
    linux学习02-虚拟机安装CentOS之后联网
    linux学习01-虚拟机VirtualBox上安装centos7,小白第一步
  • 原文地址:https://www.cnblogs.com/wyy725872/p/4452182.html
Copyright © 2011-2022 走看看