zoukankan      html  css  js  c++  java
  • JavaScript入门(二)

    JavaScript入门—操作DOM树

    要点

    DOM树是一个树形结构,操作DOM树通常是“更新、遍历、新增、删除”。

    更新DOM树

    • 拿到DOM节点

    var id=document.getElementById(‘id’)

           var tag=document.getElementsByTagName(‘TagName’);

           var class=document.getElementsByClassName(‘className’);

    • 更新节点内容

           内容:例如(id.innerHTML=’’;)

           样式(DOM节点的style属性对应所有的CSS,可以直接获取或设置):

                  Id.style.color=’red’;

    插入DOM

    • 使用appendChild()

    //将一个子节点插入到一个父节点的最后一个节点,这个节点会从原先位置上删除

    <!-- HTML结构 -->

    <p id="js">JavaScript</p>

    <div id="list">

        <p id="java">Java</p>

        <p id="python">Python</p>

        <p id="scheme">Scheme</p>

    </div>

    //把<p id="js">JavaScript</p>添加到<div id="list">的最后一项:

    var
        js = document.getElementById('js'),
        list = document.getElementById('list');
    list.appendChild(js);
     
    //从零创建一个新的节点,然后插入到指定位置
    Var list = document.getElementById('list'),
    Var haskell = document.createElement('p');
    haskell.id = 'haskell';
    haskell.innerText = 'Haskell';
    list.appendChild(haskell);
    • 使用insertBefore将新增节点插入到指定位置。

    思路:1、获取父节点。

    2、创建新节点

    3、取得插入位置的后一个节点

    4、使用父节点的insertBefore();

    //把Haskell插入到Python之前
    Var list = document.getElementById('list'),
    Var ref = document.getElementById('python'),
    Var haskell = document.createElement('p');
    haskell.id = 'haskell';
    haskell.innerText = 'Haskell';
    list.insertBefore(haskell, ref);
  • 相关阅读:
    提升开发效率的十个工具
    JQuery常用函数及功能小结
    jquery-validation 学习总结
    JavaScript:避免代码的重复执行
    18 个最好的CSS框架用于提高开发效率
    如何书写高质量的jQuery代码
    13个 ASP.NET MVC 的扩展
    CSS_LESS 语法/函数详解
    21个值得收藏的Javascript技巧
    JQuery常用功能的性能优化
  • 原文地址:https://www.cnblogs.com/ZM191018/p/11724794.html
Copyright © 2011-2022 走看看