237、javaScript对象---DOM对象之documen文档t对象、element元素对象、Node节点对象

最新推荐文章于 2022-03-07 11:28:32 发布

l0510402015

最新推荐文章于 2022-03-07 11:28:32 发布

阅读量244

点赞数

分类专栏： 05_javascript

本文链接：https://blog.csdn.net/l0510402015/article/details/104422499

版权

05_javascript 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

## 核心 DOM 模型##
DOM基于网页会生成文档，为树状结构：document ->element->Attribute
一、document文档对象
1、创建（获取）：

        在html dom模型中可以使用window对象来获取
        1.window.document
        2.documeng

    2、方法：
      （1）、获取Elemement对象
            * getElementById()：根据id属性值获取元素对象。
            * getElementsByTagName()：根据元素(标签)名称获取元素对象
            * getElementsByClassName()：根据class属性值获取元素对象
            * getElementsByName():根据name属性值获取元素对象
        （2）、创建其它DOM对象。
            * createAttribute() 创建属性节点。
            * createComment()
            * createElement()     创建元素节点。
            * createTextNode()     创建文本节点。

方法	描述
close()	关闭用 document.open() 方法打开的输出流，并显示选定的数据。
getElementById()	返回对拥有指定 id 的第一个对象的引用。
getElementsByName()	返回带有指定名称的对象集合。
getElementsByTagName()	返回带有指定标签名的对象集合。
open()	打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。
write()	向文档写 HTML 表达式或 JavaScript 代码。
writeln()	等同于 write() 方法，不同的是在每个表达式之后写一个换行符。

3、属性

属性	描述
body	提供对 <body> 元素的直接访问。对于定义了框架集的文档，该属性引用最外层的 <frameset>。
cookie	设置或返回与当前文档有关的所有 cookie。
domain	返回当前文档的域名。
lastModified	返回文档被最后修改的日期和时间。
referrer	返回载入当前文档的文档的 URL。
title	返回当前文档的标题。
URL	返回当前文档的 URL。

二、element元素对象

* 方法
    1、获取/创建：通过document来获取和创建Element元素对象
    2、获取到的Element对象包含的方法
        * removeAttribute():删除属性，参数是标签的属性键值对的键名
        * setAttribute()：设置属性，参数是标签的属性键值对

* 属性：

1、innerHTML :获取或设置元素的内容

属性 / 方法	描述
element.accessKey	设置或返回元素的快捷键。
element.appendChild()	向元素添加新的子节点，作为最后一个子节点。
element.attributes	返回元素属性的 NamedNodeMap。
element.childNodes	返回元素子节点的 NodeList。
element.className	设置或返回元素的 class 属性。
element.clientHeight	返回元素的可见高度。
element.clientWidth	返回元素的可见宽度。
element.cloneNode()	克隆元素。
element.compareDocumentPosition()	比较两个元素的文档位置。
element.contentEditable	设置或返回元素的文本方向。
element.dir	设置或返回元素的内容是否可编辑。
element.firstChild	返回元素的首个子。
element.getAttribute()	返回元素节点的指定属性值。
element.getAttributeNode()	返回指定的属性节点。
element.getElementsByTagName()	返回拥有指定标签名的所有子元素的集合。
element.getFeature()	返回实现了指定特性的 API 的某个对象。
element.getUserData()	返回关联元素上键的对象。
element.hasAttribute()	如果元素拥有指定属性，则返回true，否则返回 false。
element.hasAttributes()	如果元素拥有属性，则返回 true，否则返回 false。
element.hasChildNodes()	如果元素拥有子节点，则返回 true，否则 false。
element.id	设置或返回元素的 id。
element.innerHTML	设置或返回元素的内容。
element.insertBefore()	在指定的已有的子节点之前插入新节点。
element.isContentEditable	设置或返回元素的内容。
element.isDefaultNamespace()	如果指定的 namespaceURI 是默认的，则返回 true，否则返回 false。
element.isEqualNode()	检查两个元素是否相等。
element.isSameNode()	检查两个元素是否是相同的节点。
element.isSupported()	如果元素支持指定特性，则返回 true。
element.lang	设置或返回元素的语言代码。
element.lastChild	返回元素的最后一个子元素。
element.namespaceURI	返回元素的 namespace URI。
element.nextSibling	返回位于相同节点树层级的下一个节点。
element.nodeName	返回元素的名称。
element.nodeType	返回元素的节点类型。
element.nodeValue	设置或返回元素值。
element.normalize()	合并元素中相邻的文本节点，并移除空的文本节点。
element.offsetHeight	返回元素的高度。
element.offsetWidth	返回元素的宽度。
element.offsetLeft	返回元素的水平偏移位置。
element.offsetParent	返回元素的偏移容器。
element.offsetTop	返回元素的垂直偏移位置。
element.ownerDocument	返回元素的根元素（文档对象）。
element.parentNode	返回元素的父节点。
element.previousSibling	返回位于相同节点树层级的前一个元素。
element.removeAttribute()	从元素中移除指定属性。
element.removeAttributeNode()	移除指定的属性节点，并返回被移除的节点。
element.removeChild()	从元素中移除子节点。
element.replaceChild()	替换元素中的子节点。
element.scrollHeight	返回元素的整体高度。
element.scrollLeft	返回元素左边缘与视图之间的距离。
element.scrollTop	返回元素上边缘与视图之间的距离。
element.scrollWidth	返回元素的整体宽度。
element.setAttribute()	把指定属性设置或更改为指定值。
element.setAttributeNode()	设置或更改指定属性节点。
element.setIdAttribute()
element.setIdAttributeNode()
element.setUserData()	把对象关联到元素上的键。
element.style	设置或返回元素的 style 属性。
element.tabIndex	设置或返回元素的 tab 键控制次序。
element.tagName	返回元素的标签名。
element.textContent	设置或返回节点及其后代的文本内容。
element.title	设置或返回元素的 title 属性。
element.toString()	把元素转换为字符串。
nodelist.item()	返回 NodeList 中位于指定下标的节点。
nodelist.length	返回 NodeList 中的节点数

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    通过两个按钮来给一段文字添加和删除超链接-->
</head>

<body>
    <a>超链接测试</a>
    <input type="button" value="添加属性" id="btn_add">
    <input type="button" value="删除属性" id="btn_del">

    <script>
        var element1 = document.getElementById("btn_add");
        element1.onclick = function () {
            var eTag = document.getElementsByTagName("a")[0];
            eTag.setAttribute("href","http://www.baidu.com")
        }

        var element2 = document.getElementById("btn_del");
        element2.onclick = function () {
            var eTag = document.getElementsByTagName("a")[0];
            eTag.removeAttribute("href")
        }
    </script>
</body>
</html>

三、Node节点对象
    1、特点：所有dom对象都可以被认为是一个节点
    2、方法：
        * CRUD(增删改查) dom树
            * appendChile()：向节点的子节点列表的结尾添加新的子节点。
            * removeChild()：删除（并返回）当前节点的指定子节点
            * replaceChild():用新节点替换一个子节点
    3、属性：
        * parentNode 返回节点的父节点。

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    1\生产两个存在子父级关系的div，然后可以通过按钮删除子div-->
<!--    2\通过按钮可以给上面的父div添加一个新的div-->
    <style>
        div{
            border: 1px red solid;
        }
        #div1{
            height: 200px;
            width: 200px;
        }
        #div2{
            height: 100px;
            width: 100px;
        }
        #div3{
            height: 100px;
            width: 100px;
        }
    </style>
</head>
<body>
    <div id="div1">
        div1
        <div id="div2">
            div2
        </div>
    </div>

    <a href="javascript:void(0);" id="a_del">删除子节点</a>
    <a href="javascript:void(0);" id="a_add">添加子节点</a>
    <script>
        var elmt_del = document.getElementById("a_del");
        elmt_del.onclick = function () {
            var elem_div1= document.getElementById("div1");
            var elem_div2= document.getElementById("div2");
            elem_div1.removeChild(elem_div2);
        }

        var elmt_add = document.getElementById("a_add");
        elmt_add.onclick = function () {
            var elem_div1= document.getElementById("div1");
            var elem_div3 = document.createElement("div");
            elem_div3.setAttribute("id","div3");
            elem_div1.append(elem_div3);
        }

        var elem02 = document.getElementById("div2");
        var parentNode = elem02.parentNode;
        alert(parentNode);
    </script>
</body>
</html>

l0510402015

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
237、javaScript对象---DOM对象之documen文档t对象、element元素对象、Node节点对象

## 核心 DOM 模型##DOM基于网页会生成文档，为树状结构：document ->element->Attribute一、document文档对象1、创建（获取）：在html dom模型中可以使用window对象来获取1.window.document2.documeng2、方法：1、获取Ele...
复制链接

扫一扫

专栏目录