zoukankan      html  css  js  c++  java
  • 五、了解DOM

    core DOM

    xml DOM

    html DOM

    DOM是一个文档树,根节点是HTML元素。

    documentElement的属性就表示HTML对象;

    firstChild,lastChild 一般就是head和body。

    获取元素有方法:

    1、getElementById 只能通过document对象调用。

    2、getElementsByName 一般只有获取表单时候才用。获取一组元素。

    3、getElementsByTagName 通过元素名称获取一组元素。

    下面是通过DOM操作HTML元素,动态创建一个div。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>Untitled Page</title>
        <script type="text/javascript">
            function onLoad() {
                var oHtml = document.documentElement;
                var oBody = oHtml.lastChild;
                var oDiv = document.createElement("div");
                var oText = document.createTextNode("Hello DOM");
                oDiv.appendChild(oText);
                oBody.appendChild(oDiv);
            }
        </script>
    </head>
    <body onload="onLoad()">

    </body>
    </html>

    如果要设置元素的CSS样式类型,要使用的是DOM属性className 而不是 HTML的class。

  • 相关阅读:
    Vue 从入门到进阶之路(十四)
    Vue 从入门到进阶之路(十三)
    Vue 从入门到进阶之路(十二)
    Vue 从入门到进阶之路(十一)
    vue-cli 3.x 开发插件并发布到 npm
    2018 年终总结 & 2019 年度计划
    帝都夜话
    移动端实现拖拽的两种方法
    前端面试(原生js篇)
    在前端获取图片宽高
  • 原文地址:https://www.cnblogs.com/tomkillua/p/2613840.html
Copyright © 2011-2022 走看看