zoukankan      html  css  js  c++  java
  • no-jquery 02 DOM

    DOM Manipulation

    Creating Elements

    // IE 5.5+
    document.createElement('div');
    

    Inserting Elements Before & After

    // IE 4+
    document.getElementById('1')
        .insertAdjacentHTML('afterend', '<div id="1.1"></div>');
        
    // IE 4+
    document.getElementById('1')
        .insertAdjacentHTML('beforebegin', '<div id="0.9"></div>');
    

    Inserting Elements As Children

    // IE 4+
    document.getElementById('parent')
        .insertAdjacentHTML('afterbegin', '<div id="newChild"></div>');
    
    // IE 4+
    document.getElementById('parent')
        .insertAdjacentHTML('beforeend', '<div id="newChild"></div>')
    

    Moving Elements

    // IE 5.5+
    document.getElementById('parent')
        .appendChild(document.getElementById('orphan'));
    
    // IE 5.5+
    document.getElementById('parent')
        .insertBefore(document.getElementById('orphan'), document.getElementById('c1'));
    

    Removing Elements

    // IE 5.5+
    document.getElementById('foobar').parentNode
        .removeChild(document.getElementById('foobar'));
    

    Adding & Removing CSS Classes

    // All modern browsers, with the exception of IE9
    document.getElementById('foo').classList.add('bold');
    
    // All browsers
    document.getElementById('foo').className += 'bold';
    
    
    // All modern browsers, with the exception of IE9
    document.getElementById('foo').classList.remove('bold');
    
    // All browsers
    document.getElementById('foo').className = 
        document.getElementById('foo').className.replace(/^bold$/, '');
    

    Adding/Removing/Changing Attributes

    // IE 5.5+
    document.getElementById('foo').setAttribute('role', 'button');
    
    // IE 5.5+
    document.getElementById('foo').removeAttribute('role');
    

    Adding & Changing Text Content

    // IE 5.5+
    document.getElementById('foo').innerHTML = 'Goodbye!';
    
    // IE 5.5+ but NOT Firefox
    document.getElementById('foo').innerText = 'GoodBye!';
    
    // IE 9+
    document.getElementById('foo').textContent = 'Goodbye!';
    

    Adding/Updating Element Styles

    // IE 5.5+
    document.getElementById('note').style.fontWeight = 'bold';
    
  • 相关阅读:
    HDU4452——模拟——Running Rabbits
    URAL1711——模拟——Code Names
    URAL1721——匈牙利算法——Two Sides of the Same Coin
    Codeforces Round #FF (Div. 1)——A贪心——DZY Loves Sequences
    Codeforces Round #326 (Div. 2)
    URAL 7077 Little Zu Chongzhi's Triangles(14广州I)
    Codeforces Round #325 (Div. 2)
    位运算 UEST 84 Binary Operations
    LCA UESTC 92 Journey
    Codeforces Round #324 (Div. 2)
  • 原文地址:https://www.cnblogs.com/jinkspeng/p/4478203.html
Copyright © 2011-2022 走看看