javaScript文档对象模型DOM

文档对象模型（document object model）

是针对HTML和XML文档的应用程序接口（API），通过 DOM，JavaScript 能够访问和改变 HTML 文档的所有元素。
总之：DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。

有一个表格，点击添加按钮添加事件

例题图片:

1. 在添加js之前首先创建一个html对象，进行样式添加。最后得到图片上的基础样式。
2. 进行js样式的添加

 //根据ID查找页面元素
        var banner = document.getElementById('banner');
        var user = document.getElementById('userName');
        var age = document.getElementById('age');
        document.getElementById('btn').onclick = function () {
            //创建节点对象
            var otr = document.createElement('tr');
            var otd0 = document.createElement('td');
            var otd1 = document.createElement('td');
            var otd2 = document.createElement('td');
            // 将td放入tr中
            otr.appendChild(otd0);
            otr.appendChild(otd1);
            otr.appendChild(otd2);
            // 将tr放入tbody中
            banner.appendChild(otr);

            otd1.innerHTML = user.value;
            otd2.innerHTML = age.value;
            otd0.innerHTML = document.links.length;
            //复制节点
            var otd3 = document.getElementById('sc');
            var newotd3 = otd3.cloneNode(true);
            otr.appendChild(newotd3);

            //删除节点
            var len = document.links.length;
            for (var i = 1; i < len; i++) {
                document.links[i].onclick = function () {

                    banner.removeChild(this.parentNode.parentNode);
                }
            }
        }

DOM中的属性和方法的理解

属性是您能够获取或设置的值（就比如改变 HTML 元素的内容）。
方法是您能够完成的动作（比如添加或删除 HTML 元素）。

DOM中属性的操作：

1. 属性值的修改
   obj.属性名=值;

2. 属性值的获取
   obj.属性名

属性映射表

         最特殊的就是class和for的写法，其他的在HTML和DOM用的名称一样
            HTML               DOM
            src                src
            alt                alt
            type               type
            title              title
            class              className
            for                htmlFor
            ...                 ...