js之文档对象模型

最新推荐文章于 2022-10-07 12:40:44 发布

不想有bug的小菜鸟

最新推荐文章于 2022-10-07 12:40:44 发布

阅读量154

点赞数 1

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_45030966/article/details/120135432

版权

javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

DOM是针对HTML对XML文档的API，DOM描绘一个层次化的节点数，允许开发人员添加，移除，修改页面的某一部分。

Node类型

JavaScript中所有的节点类型都继承自Node类型，所有的节点类型都共享着相同的基本属性和方法。

Node类型的属性

1.nodeType 表示节点类型

Element	1
TextNode	3
Comment	8
Document	9

a.document是Document构造函数的实例

b.document.body是Element构造函数的实例

c.document.body.firstChild是Comment构造函数的实例

2.nodeName 该属性取决于节点类型，如果是元素类型,值为元素的标签名

3.nodeValue 该属性取决于节点类型，如果是元素类型，值有null

4.childNodes 保存一个NodeList对象，NodeList是一种类数组对象，用来保存一组有序的节点。

5.parentNode 指向文档树中的父节点

6.previousSibling 兄弟节点中的前一个节点

7.nextSibling 兄弟节点中的下一个节点

8.firstChild childNodes列表中的第一个节点

9.lastChild childNodes列表中的最后一个节点

10.ownerDocument 指向表示整个文档的文档节点

Node类型的方法

1.hasChildNodes() 在包含一个或多个子节点的情况下返回true

var myDiv = document.getElementById("myDiv");

console.log(myDiv.hasChildNodes());

2.appendChild() 向childNodes列表末尾添加一个节点。返回新增的节点

3.InsertBefore() 第一个参数：要插入的节点第二个参数：作为参照的节点；被插入的节点会变成参照节点的前一个同胞节点，同时被方法返回。

4.replaceChild() 第一个参数：要插入的节点；第二个参数：要替换的节点

5.removeChild() 一个参数，即要移出的节点

6.cloneNode() 用于创建调用这个方法的节点的一个完全相同的副本。有一个参数为布尔类型参数为true时，表示深复制，即复制节点以及整个子节点数。参数为false的时候，表示浅复制，只复制节点本身。

Document类型

Javascript通过使用Document类型表示整个文档。

Document类型属性

document	始终指向 HTML 页面中的 <html> 元素
body	直接指向 <body> 元素
doctype	访问 <!DOCTYPE>, 浏览器支持不一致，很少使用
title	获取文档的标题
URL	取得完整的 URL
domain	取得域名，并且可以进行设置，在跨域访问中经常会用到
referrer	取得链接到当前页面的那个页面的 URL ，即来源页面的 URL
images	获取所有的 img 对象，返回 HTMLCollection 类数组对象
forms	获取所有的 form 对象，返回 HTMLCollection 类数组对象
links	获取文档中所有带 href 属性的 <a> 元素

Document类型方法

getElementById()	参数为要取得元素的 ID ，如果找到返回该元素，否则返回 null 如果页面中多个元素的 ID 值相同，只返回文档中第一次出现的元素。如果某个表单元素的 name 值等于指定的 ID ，该元素也会被匹配。
getElementsByTagName()	参数为要取得元素的标签名，返回包含另个或者多个元素的 NodeList ，在 HTML 文档中该方法返回的是 HTMLCollection 对象，与 NodeList 非常类似。可以通过 [index/name],item(),namedItem(name) 访问
getElementsByName()	参数为元素的 name, 返回符合条件的 HTMLCollection
getElementsByClassName()	参数为一个字符串，可以由多个空格隔开的标识符组成。当元素的 class 属性值包含所有指定的标识符时才匹配。 HTML 元素的 class 属性值是一个以空格隔开的列表，可以为空或包含多个标识符。

var classApp = document.getElementsByClassName("app");

console.log(classApp[0]);

var idApp = document.getElementById("app");

console.log(app);

var name = document.getElementsByName("app");

console.log(name);

var tagApp = document.getElementsByTagName("form");

console.log(tagApp);

var myDiv = document.getElementsByName("")

Element类型

Element类型属性

id	元素在文档中的唯一标识符
title	有关元素的附加说明信息
className	与元素class特性对应
src	img 元素具有的属性
alt	img 元素具有的属性
lang	元素内容的语言代码，很少使用
dir	语言方向， ltr,rtl 左到右，右到左

window.onload = function() {

    var myDiv = document.getElementById("myDiv");

    console.log(myDiv.getAttribute("id"));

    console.log(myDiv.getAttribute("class"));

    console.log(myDiv.getAttribute("style"));

    var myImg = document.getElementsByTagName("img")[0];

    console.log(myImg.getAttribute("src"));

    console.log(myImg.getAttribute("alt"));

    console.log(myImg.getAttribute("style"));

    myDiv.removeAttribute("id");

    console.log(myDiv);

}

getAttribute()	参数为实际元素的属性名， calss,name,id,title,lang,dir 一般只有在取得自定义
setAttribute()	设置属性，两个参数，第一个参数为要设置的特性名，第二个参数为对应的值。如果该值存在，替换
removeAttribute()	移除指定的特姓
createElement()	创建元素，一个参数，要创建元素的标签名。该标签名在 HTML 中不区分大小写，但是在 XML 中区分大小写

var node = document.getElementsByClassName("one")[0];

    console.log(node);

    node.className = "two"; //可以重新设置类名

    node.setAttribute("className", "three"); //添加属性

    var input = node.getAttribute("class");

    console.log(input);

作为文档树的文档

children	类似于 childNodes, 返回 NodeList 对象，但是该对象中仅包含 Element 对象
firstElementChild	第一个孩子元素节点
lastElementChild	最后一个孩子元素节点
nextElementSibling	下一个兄弟元素节点
previousElementSibling	上一个兄弟元素节点
childElementCount	子元素的数量，返回值和 children.length 值相等

var myDiv = document.getElementById("myDiv");

    console.log(myDiv.hasChildNodes());

    console.log(myDiv.firstElementChild.nextElementSibling); //获取第一个孩子的下一个兄弟元素

    console.log(myDiv.lastElementChild); //最后一个孩子元素节点

    console.log(myDiv.nextElementSibling); //下一个兄弟元素节点

    console.log(myDiv.childElementCount); //子元素的数量，返回值和children.length值相等

元素内容

innerHTML	返回元素内容
textContent	非 ie 浏览器
innerText	ie 浏览器

Text类型

文本节点。包含的是可以按照字面解释的存文本内容

length	文本长度
appendData(text)	追加文本
deleteData(beginIndex,count)	删除文本
insertData(beginIndex,text)	插入文本
replaceData(beginIndex,count,text)	替换文本
splitText(beiginIndex)	从 beginIndex 位置将当前文本节点分成两个文本节点
document.createTextNode()	创建文本节点，参数为要插入节点中的文本
substringData(beiginIndex,count)	从 beginIndex 开始提取 count 个子字符串

var myDiv = document.getElementsByTagName("div")[0];

    // console.log(myDiv.innerHTML); //innerHTML返回元素内容

    // console.log(myDiv.textContent);

    // var textNode = document.createTextNode("hello,");

    // myDiv.appendChild(textNode);

    // console.log(myDiv.textContent);

    console.log();

    //尝试获取已有的文本节点

    var textNode = myDiv.firstChild;

    console.log(textNode);

    console.log(textNode.nodeName);

    textNode.appendData("!!!!!!");

    textNode.deleteData(0, 2); //删除文本内容的方法，但是需要获取当前文本的文本节点

    console.log(textNode);

    textNode.insertData(6, "插入文本");

    textNode.replaceData(0, 2, "替换"); //替换文本的内容

    var split = textNode.splitText(7);

    console.log(split);

    var substring = textNode.substringData(5, "#");

    console.log(substring);

Comment类型注释类型

<div id = "myDiv"></div>

 Comment 类型

不想有bug的小菜鸟

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js之文档对象模型

目录Node类型Node类型的属性Node类型的方法Document类型Document类型属性 Document类型方法Element类型Element类型属性Text类型Comment类型注释类型DOM是针对HTML对XML文档的API，DOM描绘一个层次化的节点数，允许开发人员添加，移除，修改页面的某一部分。Node类型JavaScript中所有的节点类型都继承自Node类型，所有的节点类型...
复制链接

扫一扫