网站建设学习（十三）——DOM对象

最新推荐文章于 2024-05-29 19:02:09 发布

QJM1995

最新推荐文章于 2024-05-29 19:02:09 发布

阅读量551

点赞数

文章标签：网站 DOM JavaScript

本文链接：https://blog.youkuaiyun.com/QJM1995/article/details/86710027

版权

上一篇介绍了BOM编程与事件对象，这一篇介绍DOM编程，DOM主要是对html标签进行查找或者修改，以js的方式对html页面进行修改，因为js本身具有互动性，所以应用DOM可以实现动态网页的制作。之前有小伙伴反馈说不好区分BOM与DOM的区别，其实BOM主要是操作浏览器，修改或者获取浏览器的动作，DOM操作网页，直接对网页内容进行判断修改，静态的html与css样式不能实时交互，BOM与DOM这样的组合可以根据浏览器与人的要求进行网页操作。DOM的标准也不是统一的，同时DOM的对象方法属性也比较多，文末会附有链接。本篇文章代码的理解不够全面没关系，只要理解含义即可，后期我会实践写一个网站，整个过程和源码也会同步到博客上。

html：

<html>
<!--  标签html：内部包含整个HTML页面，所有的设计均在当前的html标签内部进行-->
    <head>
    <!--整个文件的头部，里面包括一些属性供浏览器识别解析，对用户不可见-->

        <title>标题</title>
        <!--标签title，说明整个页面的标题，最终显示在浏览器加载页面的标签页-->

        <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
        <!--告诉浏览器以utf-8的码表进行解码，防止中文乱码，meta标签是无标签体标签，结束在开始标签后加反斜杠，即空标签-->

        <script src="DOM编程.js"></script>
        <!--引入js文件-->

    </head>


    <body>
    <!--整个文件的体，设计元素在这个部分中，最终展示给用户-->

    </body>
</html>

DOM编程.js：

/*
html页面加载完毕后，js会将每一个标签封装成对象，使这些对象标签形成树状结构，
通过操作找到对应标签，在对相应标签进行相应操作
*/


//document对象集合
document.write(typeof(document.all.length)+"<br/>");
for (var i = 0; i<5; i++){
    document.write(document.all[i].nodeName+"<br/>");
}//这里只加载到script标签，是因为文件执行到此为止，为了全部展示，可以使用onload事件

function test_onload(){
    var number = document.all.length;
    document.write(number);
    for (var i = 0; i<number; i++){
        document.write(document.all[i].nodeName+"<br/>");
    }
}

//anchors[]	返回对文档中所有 Anchor 对象的引用。
//applets	返回对文档中所有 Applet 对象的引用。
//forms[]	返回对文档中所有 Form 对象引用。
//images[]	返回对文档中所有 Image 对象引用。
//links[]	返回对文档中所有 Area 和 Link 对象引用。

//document对象属性
document.write(document.cookie+"<br/>");//设置或返回与当前文档有关的所有 cookie。
document.write(document.domain+"<br/>");//返回当前文档的域名
document.write(document.lastModified+"<br/>");//返回文档被最后修改的日期和时间。
document.write(document.referrer+"<br/>");//返回载入当前文档的文档的 URL。
document.write(document.title+"<br/>");//返回当前文档的标题。
document.write(document.URL+"<br/>");//返回当前文档的 URL。

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


//Element对象，表示html元素，这个对象对于返回标签更加细致
//可以返回父节点，子节点，兄弟结点等等
//element是document返回的对象，可以根据此对象的数组进行操作
document.writeln(document.head.nodeName+"<br/>");
document.writeln(document.head.childNodes[0].nodeName+"<br/>");
/*
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.id	设置或返回元素的 id。
element.innerHTML	设置或返回元素的内容。
element.insertBefore()	在指定的已有的子节点之前插入新节点。
element.isContentEditable	设置或返回元素的内容。
element.style	设置或返回元素的 style 属性。
element.tabIndex	设置或返回元素的 tab 键控制次序。
element.tagName	返回元素的标签名。
element.textContent	设置或返回节点及其后代的文本内容。
element.title	设置或返回元素的 title 属性。
*/


//Attribute对象，这个对象主要返回一些值，名称属性等等，也是有doc对象而来
/*
attr.isId	如果属性是 id 类型，则返回 true，否则返回 false。
attr.name	返回属性的名称。
attr.value	设置或返回属性的值。
attr.specified	如果已指定属性，则返回 true，否则返回 false。
nodemap.getNamedItem()	从 NamedNodeMap 返回指定的属性节点。
nodemap.item()	返回 NamedNodeMap 中位于指定下标的节点。
nodemap.length	返回 NamedNodeMap 中的节点数。
nodemap.removeNamedItem()	移除指定的属性节点。
nodemap.setNamedItem()	设置指定的属性节点（通过名称）。
*/


/*
总结：拿到标签的方法有三种：1、通过集合获取：例如all[]
                          2、通过属性获取：例如父子结点
                          3、通过方法获取：例如id获取方式
     修改标签方法有两种：1、通过对象属性，修改诸如文本，标签属性值
                       2、通过对象方法进行修改，添加删除结点等等
*/

JavaScript参考手册链接：JavaScript参考手册

这其中有不合适或者不正确的地方欢迎指正，我的QQ号码：2867221444（乔金明），谢谢，也可以相互交流下，备注信息随意，只要能看得出是开发者或者学习者即可。