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);
  • 相关阅读:
    商品
    正向代理和反向代理
    JS中的bind方法
    本地安装并运行http-server、browser-sync、webpack
    NPM——常用命令
    两层遍历的递归写法
    vue-cli中的index.html ,main.js , App.vue的关系
    NPM的由来——为什么要使用NPM
    关于this的指向
    MapReduce编程模型详解(基于Windows平台Eclipse)
  • 原文地址:https://www.cnblogs.com/ZM191018/p/11724794.html
Copyright © 2011-2022 走看看