javascript文档对象模型(DOM)

来源：互联网发布：手机模拟打碟机软件编辑：程序博客网时间：2024/05/01 04:08

DOM是文档对象模型(Document Object Model)的缩写。
DOM使用树形结构表示HTML文档的层次结构。
在整个DOM标准中，最核心的接口是Node,它与DOM树所有的节点都对应，各种类型的节点接口均继承自Node接口
interface Node:{很多属性和方法}
interface Document : Node {很多属性和方法}
interface HTMLDocument : Document {很多属性和方法}
interface Element : Node {很多属性和方法}
interface HTMLElement : Element{很多属性和方法}
……

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body>    <div class="container">        <div id="main">            <ul>                <li>                    <a href = "" name = "city">上海</a>                </li>                <li>                    <a href = "" name = "city">北京</a>                </li>                <li>                    <a href = "" name = "city">安徽</a>                </li>                <li>                    <a href = "" name = "city">湖南</a>                </li>            </ul>            <div class="header">                <h1>header</h1>            </div>        </div>    </div></body><script>    function domOperate(){        /**         * 获取节点         * @type {NodeList}         */        var nodesContainer = document.getElementsByTagName('div');        var nodesA = document.getElementsByName('city');        var nodeMain = document.getElementById('main');        var nodeHeader = document.querySelector('.header');        /**         * 创建节点         */        var nodeDiv = document.createElement('div');        nodeDiv.setAttribute('class','section');        nodeDiv.innerHTML = '<h1>section</h1>';        nodeMain.appendChild(nodeDiv);        var nodeInput = document.createTextNode('input');        var frag = document.createDocumentFragment();        for(var i=0;i<10;i++){            var nodeBtn =document.createElement('input');            nodeBtn.setAttribute('type','button');            nodeBtn.setAttribute('value','ok'+ i);            nodeBtn.onclick = function(event){                alert(event.target.value);            };            frag.appendChild(nodeBtn);        }        nodeDiv.appendChild(frag);//添加节点    }    domOperate();</script></html>

0 0