Dom学习内容_dom要学习哪些内容-CSDN博客

本文链接：https://blog.csdn.net/m0_46390177/article/details/124233583

文档对象模型（Document Object Model）

1.定义

DOM是针对HTML和XML文档的一个API（Application programming interfaces--应用程序编程接口,

DOM描绘了一个层次化的节点树，允许开发人员添加，移除，修改页面的某一部分。

对DOM树进行增删改查

2.Node类型

1.DOM1级定义为一个Node接口，该接口将由DOM中的所有节点类型实现。

javascript中所有的节点类型都继承自Node类型，

所有节点类型都共享着相同的基本属性和方法。

//因为js代码从上到下执行,这里页面节点还没加载完毕就进行了获取

//文档加载完毕之后执行js代码

window.onload = function () {

var div = document.getElementById('one');

console.log(div)

}

<body>

hello

div的内容

</div>

text

</body>

alert()弹框会阻止下面代码的执行,只有点击确定之后才会执行下面代码

3.Node类型的属性和方法

1.body节点

1.//获取body节点

var body=document.body;

2.查看节点类型(nodeType) 9Document 1Element 3Text 8Comment

console.log(document.nodeType)//9

3.//获取节点名称返回纯大写节点名称

console.log(body.nodeName)

4.//获取子节点 childNodes保存一个NodeList对象

console.log(body.childNodes);

5.//获取兄弟节点中的前一个节点

var childs=body.childNodes;

console.log(childs[1].previousSibling);

6.//获取兄弟节点的下一个节点

console.log(childs[1].nextSibling)

7.//或取childNodes列表中的第一个节点

console.log(body.firstChild)

8.//或取childNodes列表中的最后一个节点

console.log(body.lastChild)

9.//指向表示整个文档的文档节点。

console/log(body.ownerDocument)

10.//查看body节点是否有孩子节点

console.log(body.hasChildNodes());

11.//获取某一元素节点内的元素孩子节点

console.log(body.children);

2. //类数组转数组 es5

var result=Array.prototype.slice.call(childs,0);

console.log(result);

//es6 Array.from(childs);

var temp=Array.from(childs);

console.log(temp)

3.//从孩子节点中过滤出元素节点

var temp=Array.from(childs);

var result=temp.filter(function(item){

return item.nodeType === 1

})

console.log(result)

4.操作节点(以下四个方法都需要父节点对象进行调用!) *****

1.appendChild()追加节点

//1.获取到父节点

//2.找到孩子

//3.添加

var parent=document.getElementsByClassName('parent')[0];

var newChild=document.createElement('div');

//添加内部文本

// newChild.innerText='four';

/添加内部内容 innerHTML可以设别html代码片段可以识别标签

newChild.innerHTML=`<div class='child'>newChild</div>`

parent.appendChild(newChild);

console.log(parent)

console.info(parent)

console.debug(parent)

console.error(parent)

console.warn(parent)

2.insertBefore()在参照节点前插入节点第一个参数要插入的节点第二个参数参照节点

同一个节点在页面中只存在一个

var two=parent.children[1];

parent.appendChild(two)

parent.insertBefore(newChild,two);

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

parent.replaceChild(newChild,two)

4.removeChild()一个参数要移除的节点

parent.removeChild(two)

----------------------------

以下属性和方法可以任意元素节点调用

5.获取节点内部内容

parent.innerHTML;设别HTML代码片段

parent.innerText;；只识别文本去除空格和回车

parent.textContent;只识别文本，不去除空格和回车

6.清空节点内部内容

parent.innerHTML=""

7.cloneNode();复制节点有参数true代表深复制

//浅复制只复制节点不复制内容

var cloneTwo=two.cloneNode();

parent.appendChild(cloneTwo);

// 深复制复制节点和内容

var cloneTwo=two.cloneNode(true);

parent.appendChild(cloneTwo);

5.Document类型--属性和方法

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

。在浏览器中，document对象是HTMLDocument的一个实例，

表示整个HTML页面。document对象是window对象的一个属性，

因此可以直接调用。HTMLDocument继承自Document。

window.document.body

属性:

1. //document-*-表示整个html文档页面

console.log(document)

2. // html元素

console.log(document.documentElement);

// body元素

console.log(document.body);

// img元素

console.log(document.images)

// form元素

console.log(document.forms);

// a标签带有href属性的

console.log(document.links);

// 获取域名 --只能通过服务器打开

console.log(document.domain);

// 获取文档头信息

console.log(document.doctype);

// 获取文档标题

console.log(document.title);

// 获取URL

console.log(document.URL);

// 获取页面来源地址--只能通过服务器打开

console.log(document.referrer)

3.查找元素--方法

getElementById()

getElementsByTagName()

getElementsByName()

getElementsByClassName()

6.Element类型

1.获取属性值,使用.访问自有属性,使用getAttribute获取自定义属性

// 获取div的id属性

console.log(div.id)

// 获取div的类名属性

console.log(div.className)

// 获取div的title属性

console.log(div.title)

// 使用[]也可以获取属性

console.log(div['title'])

2.// 获取自定义属性

// console.log(div.flag) 使用.获取不到自定义属性

console.log(div.getAttribute('data-flag'))

console.log(div.getAttribute(['data-flag']))

3.//修改属性

div.setAttribute('data-flag','test1');

4.//获取style属性和onclick属性 .style .onclick拿到的对象或函数 getAttribute拿到的是字符串

console.log(div.style) {}对象

div.style.width='200px'

console.log(div.onclick) function(){}函数

console.log(div.getAttribute('style')) 字符串

console.log(div.getAttribute('onclick'))

5.// 移除属性

div.removeAttribute('title');

console.log(div);