javascript文档对象模型(DOM)

最新推荐文章于 2022-09-24 22:21:40 发布

qq_28813211

最新推荐文章于 2022-09-24 22:21:40 发布

阅读量299

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/qq_28813211/article/details/71330683

版权

javascript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

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>