JavaScript中DOM基础概念

    科技2022-07-12  105

    DOM(对象文档模型(Document Object Model)),是W3C组织推荐的处理可扩展置标语言的标准编程接口。DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。

    DOM技术是用户页面可以动态的变化,从而大大使页面的交互性增强。

    document 对象是 HTMLDocument 的一个实例,表示整个 HTML 页面。而且 document 是 window 对象的一个属性。因此可以作为全局对象来访问。

    节点分类(nodeType)

    实例:

    1、document.createElement()方法通过指定名称创建一个元素 2、document.createTextNode()可创建文本节点 3、appendChild()方法可向节点的子节点列表的末尾添加新的子节点

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script> var h = document.createElement("h1");//创建了一个h1标记 var t = document.createTextNode("大家好,我是js动态创建的!")//创建了一段文本 h.appendChild(t);//将这段文本添加到了h1标记中 document.body.appendChild(h);//将h1添加到了body中 document.title = "标题头";//修改文档标题 var t1 = document.createTextNode("大家好,我只是一段文本"); document.body.appendChild(t1); console.log("h1标记的nodetype值为:"+h.nodeType);//可以参考节点分类表 console.log("文本t的nodetype值为:"+t.nodeName); </script> </body> </html>
    Processed: 0.013, SQL: 8