JavaScript DOM

HTML DOM (文档对象模型)

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model），形成一个DOM树。
JS操作DOM
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

通过 id 查找 HTML 元素

var x=document.
getElementById("intro");
function demo() {
   
    //     document.getElementById('iddemo').innerHTML='This is getElementById';
    


//通过id选取

通过标签名查找 HTML 元素

var y=document.
getElementsByTagName("p");



    //     var btn = document.getElementsByTagName('p');
    //     btn[0].innerHTML = 'This is  getElementsByTagName'

    //通过标签名

通过类名找到 HTML 元素

  // var btn = document.getElementsByClassName('ming');
    //     btn[0].innerHTML='This is getElementsByClassName'

    //通过类选取



    //     var btn = document.getElementsByName('name');
    //     btn[0].innerHTML = 'Name';

    //通过name
    //
    //         var btn = document.getElementsByTagName('font');
    //         btn[0].color='red';
    //改变字体颜色
}

改变 HTML 内容

修改 HTML 内容的最简单的方法时使用 innerHTML 属性。
document.getElementById(id).innerHTML=新的 HTM