• 技术文章 >web前端 >js教程

    完全掌握DOM属性成员与文档流

    长期闲置长期闲置2022-08-05 15:36:50原创150
    本篇文章给大家带来了关于javascript的相关知识,其中主要介绍了关于DOM属性成员与文档流的相关问题,将窗体自上而下分成一行一行,并在每行中按从左至右的挨次排放元素,即为文档流,下面一起来看一下,希望对大家有帮助。

    【相关推荐:javascript视频教程web前端

    文档流:

    将窗体自上而下分成一行一行,并在每行中按从左至右的挨次排放元素,即为普通流/文档流。

    文本流:

    文档的读取和输出顺序,也就是我们通常看到的由左到右、由上而下的读取和输出形式。

    脱离文档流的情况:

    1、float 浮动

    浮动会脱离文档流而不会脱离文本流,其他盒模型中的文字还是会为其让出位置,> 环绕在其周围

    2、position:absolute/fixed 绝对定位

    绝对定位会使元素脱离文档流同时脱离文本流,其他盒模型元素和其中的文字的排> 列都会忽略它

    文档流和文本流可以理解为定位/位置

    DOM

    JavaScript操作网页的接口,全称为“文档对象模型”(Document Object Model)。

    有这几个概念:文档、元素、节点

    整个文档是一个文档节点

    每个标签是一个元素节点

    包含在元素中的文本是文本节点

    每一个属性是一个属性节点

    注释属于注释节点

    DOM树:

    DOM树是结构

    所谓层级结构是指元素和元素之间的关系

    父子,兄弟

    解析器输出的树是由DOM元素和属性节点组成的

    当我们说树中包含DOM节点时,意思就是这个树是由实现了DOM接口的元素组成。这些实现包含了其它一些浏览器内部所需的属性。

    脱离文档流后层级结构关系还是没有变的

    html DOM属性

    属性是节点(HTML 元素)的值,您能够获取或设置。

    编程接口

    可通过 JavaScript (以及其他编程语言)对 HTML DOM 进行访问。

    所有 HTML 元素被定义为对象,而编程接口则是对象方法和对象属性。

    方法是您能够执行的动作(比如添加或修改元素)。

    属性是您能够获取或设置的值(比如节点的名称或内容)。

    innerHTML 属性

    获取元素内容的最简单方法是使用 innerHTML 属性。

    innerHTML 属性对于获取或替换 HTML 元素的内容很有用。

    实例

    下面的代码获取 id="intro" 的 <p> 元素的 innerHTML:

    <html>
    <body>
    <p id="intro">Hello World!</p>
    <script>
    var txt=document.getElementById("intro").innerHTML;
    document.write(txt);
    </script>
    </body>
    </html>

    输出结果:

    01.png

    在上面的例子中,getElementById 是一个方法,而 innerHTML 是属性。

    innerHTML 属性可用于获取或改变任意 HTML 元素,包括 <html> 和 <body>。

    nodeName 属性

    nodeName 属性规定节点的名称。

    nodeName 是只读的

    注释:nodeName 始终包含 HTML 元素的大写字母标签名。

    nodeValue 属性

    nodeValue 属性规定节点的值。

    获取元素的值

    下面的例子会取回 <p id="intro"> 标签的文本节点值:

    实例

    <html>
    <body>
    <p id="intro">Hello World!</p>
    <script type="text/javascript">
    x=document.getElementById("intro");
    document.write(x.firstChild.nodeValue);
    </script>
    </body>
    </html>

    输出结果:

    02.png

    nodeType 属性

    nodeType 属性返回节点的类型。nodeType 是只读的。

    比较重要的节点类型有:

    03.png

    【相关推荐:javascript视频教程web前端

    以上就是完全掌握DOM属性成员与文档流的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:javascript
    上一篇:JavaScript中window对象常用方法总结 下一篇:javaScript归纳总结之Dom获取集合元素对象
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• 什么是this?深入解析JavaScript中的this• 深入浅析JavaScript中的定时器• 深入了解JavaScript中的事件冒泡与捕获• JavaScript实例解析之window页面加载事件• JavaScript中window对象的成员属性(总结分享)
    1/1

    PHP中文网