DOM

首页 > 代码库 > DOM

2024-10-15 06:54:39 211人阅读

DOM:Document Object Model 文档对象模型【当前HTML】

BOM操作不够实现页面的动态交互效果，操作html才是核心。

DOM提供了用程序动态控制html接口，描绘了一个层次化的节点树。

便于开发人员添加，移除，修改页面。DOM处于javascript的核心地位上

DOM等级分三类

1.定义CORE核心文档规范

2.定义XML文档规范

3.定义HTML文档规范

一、document属性：ws不自动提示这些单词【方法加执行符，属性直接点.】

body：返回body元素

URL:返回当前文档完整的url地址

lastModified:返回文档最后一次修改的日期和时间

charset:返回编码字符

images:返回页面中所有的image的引用

scripts:返回页面中所有脚本的集合

title:返回当前文档的标题啊，同时也可以修改标题

五个节点：HTML结构中每一个元素都是节点

加载html页面时，web浏览器生成一个树形结构，用来表示页面内部结构。

html是树形结构，DOM将这种树形结构理解为由节点组成，就是节点树。

文档本身是文档节点

所有html元素，标签是元素节点

所有html属性是属性节点

html元素内的文本是文本节点

注释是注释节点

二、document方法-获取节点\元素：

(1)getElementById("id属性值") by:按照

按照id属性值获取元素对象，返回单个对象

注意：若有相同的id属性值，以第一个为准

(2)getElementsByName("name属性值");

按照name属性值获取元素对象，返回对象数组

(3)getElementsByTagName("标签名/元素名称");

按照标签名获取元素对象，返回对象数组

(4)getElementsByClassName("class属性值");

按照class的属性值获取元素对象，返回对象数组

javascript:void(0);伪协议，表示不执行跳转而去执行指定的事件处理函数

<input type="checkbox" name="hobby" value="http://www.mamicode.com/游泳" />游泳

按照name获取元素

var ho= document.getElementsByName("hobby");

for(var i=0; i<=ho.length-1; i++) {

console.log(ho[i].value);

}

注意：

在进行dom操作时，需要等html全部加载完毕后再进行操作，两种方式

(1)可以将script标签放在html代码下面

可以放在body的最后或body下

(2)可以利用onload事件

1)可以给body标签添加onload事件函数：<body onl oad="init();">

function init(){

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

btn.onclick=function(){

alert("你好");

2)写在style下面在js中编写：

window.onload = function () {

//js代码

window.onscroll=function(){}

}

三、document方法2-创建元素，貌似只能在控制台查看。。。

createElement:创建标签，可以指定任何标签

createTextNode:创建文本节点

createAttribute:创建属性节点

createComment:创建一个注释

创建图片对象

var img=new Image() ,通过new 的方式创建一个图片对象

img.src=http://www.mamicode.com/‘‘; 指定src路径

document.body.appendChild(img); 把图片放入页面中 appendChild

一、操作属性/操作元素属性的方法：

attributes: 返回一个元素的属性数组/对象

setAttribute()：设置或者改变指定属性并指定值

（改变或增加属性）第一个参数：属性；第二个参数：属性名称

d.setAttribute(‘id‘,‘test1‘);//改变id为test1

hasAttribute(): 如果元素中存在指定的属性，返回true,否则false ; 一个参数

hasAttributes(): 如果元素有任何属性返回true,否则返回false ; 无需传参

二、操作样式

d.classList: 返回class的类名，以数组形式

["cont", "bg", "btn", value: "cont bg btn"]

d.className: 返回类名的数组形式！因为class是保留字，不能直接使用

d.style: 返回行间定义的样式

style只能获取在行间设置的样式,不能获取外部引用的样式

如何获取行间样式的值？对象.属性可以取值，也可以赋值，还可以增加属性

d.style.font-size 会报错 ——>d.style[‘font-size‘] | fontSize

d.style.textAlign = ‘center‘;

获取元素实际的css样式值

function getStyle(ele) {

var style = null;

if (window.getComputedStyle) {//在谷歌/火狐等现代浏览器使用

style = window.getComputedStyle(ele, null);

} else {//IE用这个属性

style = ele.currentStyle;

}

return style;

}

console.log(getStyle(d).fontSize);//24px

一、节点\标签：基本属性

nodeType 节点类型；返回节点类型的常数，1-12种类型的常数值

nodeValue 节点的值

nodeName 节点的名字

Node类型 Named Constant 说明<br>

* 1 ELEMENT_NODE 元素节点<br>

* 2 ATTRIBUTE_NODE 属性节点<br>

* 3 TEXT_NODE 文本节点<br>

* 9 DOCUMENT_NODE 文档节点<br>

d.attributes 获取所有属性

d.attributes.id.nodeValue //test

d.attributes.id.nodeType //2

二、获取节点的属性

ownerDocument: 返回顶层文档，#document owner:所有者

parentNode: 返回父节点

childNodes: 返回子节点，包含文本节点，空格也是一个文本节点

firstChild: 第一个子节点 //#text 空格

lastChild: 最后一个子节点

firstElementChild: 第一个子元素

lastElementChild: 最后一个子元素

previousSibling: 前面的一个同级节点 previous:前一个 sibling:兄弟

nextSibling: 后面的一个同级节点

previousElementSibling: 前面的一个同级元素，没有返回null

nextElementSibling: 后面的一个同级元素，没有返回null

三、操作节点节点的方法

cloneNode():复制节点

浅复制：不传参数或者传入false,只会复制元素本身

深复制：传入参数true,把元素本身及其子元素都复制出来

appendChild():添加子元素，子元素成为了父元素的最后一个子节点【对象】

var div=document.createElement(‘div‘)

d.appendChild(div)

insertBefore(): 把元素插入到指定元素之前，（新节点，指定位置）

创建一个节点

var span = document.createElement(‘span‘);

var a = document.getElementById(‘a‘);

d.insertBefore(span,a);//第一个参数新元素,第二个参数是位置

removeChild( 需要被移除的元素 ): 返回值是被移动的节点

replaceChild( 新节点，需要被替换的元素 ) ：返回值是被替换的元素

四、检测节点：

hasChildNodes()：检测元素是否有子节点，如果有子节点返回true,无false

注意：文本注释都可以被检测到

contains(): 检测某个节点是否是另外一个节点的子节点（子孙元素也可以检测）contains:包含

用法：父元素.contains(子元素）；返回值为true和false

注意：检测自身返回的也是true

isEqualNode(): 检测2个节点是否一样（必须是一模一样）

用法：元素1.isEqualNode(元素2），返回值为true和false

var span01 = spans[0];

一、文本操作

innerText: 返回内部文本，不返回内部的标签结构，不解析标签！！！

innerHTML: 返回内部的HTML结构！（使用频率非常高！！！）【字符串】

使用：1.控制台打印：innerText只有文本内容 innerHTML返回内部结构

2.向页面中增加标签，会覆盖原有的文本【页面时间刷新】

p.innerHTML = ‘<h3>梅雨季节大上海！！！</h3>‘+‘<h1>SHSXT!!</h1>‘;

了解：元素大小和偏移量： ——>属性【贪吃蛇】

offsetHeight：返回元素的高度包括边框和填充

offsetWidth：返回元素的宽度包括边框和填充

offsetLeft：返回当前元素的相对水平偏移位置

offsetTop：返回当前元素的相对垂直偏移位置

offsetParent：返回元素的偏移容器

length属性，可以使用length进行遍历

var items = document.getElementsByClassName(‘item‘);

console.log(items.length);//

for (var i = 0; i < items.length; i++) {

var obj = items[i];

console.log(obj);

}

链式操作：就是：方法.方法.方法.方法.方法.方法...

在js中，只有返回节点集合的情况下才可以使用链式调用。(这里只是说在DOM操作范围)

var cont = document.getElementById(‘cont‘);

var divs = document.getElementById(‘cont‘)

.getElementsByTagName(‘div‘)[0]

.getElementsByTagName(‘span‘);

console.log(divs); //span

window 指窗体。document指页面。document是window的一个子对象。

操作节点：

cloneNode():复制节点

浅复制：不传参数或者传入false时，只会复制元素本身

深复制：传入参数true,把元素本身及其子元素都复制出来

只是复制下来，原DOM结构不会发生改变

appendChild():增加子元素

子元素成为父元素的最后一个子节点

新增元素节点

1.write()

将任意的字符串插入到文档中

2.createElement();

创建一个元素节点

参数：传入标签名称

返回值：返回创建的元素对象

3.createTextNode()

创建一个文本节点

4.appendChild()

向元素中添加新的子节点，作为最后一个子节点

5.insertBefore()

向指定的已有的节点之前插入新的节点

setAttribute()

第一个参数：要设置的属性

第二个参数：属性值

步骤：

1.获取元素要添加的位置

2.创建要添加的元素

3.若要设置元素的属性，通过元素对象操作属性即可

元素对象.属性名/元素对象.setAttribute("属性名","属性值")

4.将新元素添加到要添加的位置上

创建option标签的方式

1.通过createElement()方法创建

2.new Option(text值,value值);

//添加p元素

function addP() {

//获取p元素要插入的位置

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

/*第一种方式*/

1.创建一个p元素

var p = document.createElement("p");

2.创建一个文本节点

var txt = document.createTextNode("这是一个新增的p标签");

3.将文本节点追加到p元素中

p.appendChild(txt);

4.将p元素追加到div中

container.appendChild(p);

/*第二种方式*/

1.创建一个p元素

var p = document.createElement("p");

2.向p元素添加文本

p.innerHTML = "这是一个新增的p标签";

3.将p元素追加到div中

container.appendChild(p);

/*第三种方式*/

//innerHTML在赋值时新的内容覆盖原有内容，若要保留原有内容，拼接上原有内容

container.innerHTML += "<p>这是一个新增的p标签</p>";

}

插入文本节点

insertBefore(newItem,exsitingItem)

向指定的已有的节点之前插入新的节点

newItem：要插入的节点

exsitingItem：参考节点

格式：

exsitingItem.parentNode.insertBefore(newItem,exsitingItem)

首先通过参考节点获取父节点，然后根据参考节点向父节点中插入新元素

exsitingItem.parentNode.insertBefore(newItem,null)

相当于

exsitingItem.parentNode.appendChild()

parentNode：可以获取某个元素的父节点

nextSibling：获取当前元素的下一个同胞

function insert () {

//1.获取参考节点

var span = document.getElementById("span1");

//2.创建一个新节点

var p = document.createElement("p");

p.innerHTML = "新节点";

//3.向参考元素的父节点中插入内容，插入的位置是在参考节点之前

//span.parentNode.insertBefore(p,span);

//span.parentNode.insertBefore(p,null);

span.parentNode.insertBefore(p,span.nextSibling);

}

修改元素节点

replaceChild(newNode,oldNode)

用新的节点替换旧的节点

newNode：新的节点

oldNode：要被替换掉的节点

格式：

oldNode.parentNode.replaceChild(newNode,oldNode)

首先通过旧节点定位到父节点，然后用新的节点替换旧节点

cloneNode()

复制节点

var 复制好的节点 = 被复制的节点.cloneNode([true/false]);

true：深度克隆，可以克隆结构和内容

false(默认值)：只克隆结构

function replaceNode () {

//1.获取旧的节点

var span = document.getElementById("span1");

//2.创建一个新的节点

var div = document.createElement(‘div‘);

div.innerHTML = "这是新的节点";

//3.用新节点替换旧节点

span.parentNode.replaceChild(div,span);

}

//复制节点

function copy () {

//1.获取要复制的元素

var ul = document.getElementById("ul1");

//2.复制

var ul2 = ul.cloneNode(true);

//3.将复制好的内容添加到div中

document.getElementById("div1").appendChild(ul2);

}

删除节点

removeChild()

从元素中删除子节点

格式：

要被删除的元素.parentNode.removeChild(要删除的元素)

function delSpan () {

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

span.parentNode.removeChild(span);

}

节点的属性

1）innerHTML

获取文本内容，元素节点使用,文本节点不能使用(使用 nodeValue)。

innerHTML在设置值时可以识别字符串中的html代码并执行

2）innerText

获取文本内容，从起始位置到终止位置的内容, 但它去除Html标签

3）firstChild

获取当前元素节点的第一个子节点

4）lastChild

获取当前元素节点的最后一个子节点

4）nextSibling

获取当前节点的后一个同级节点

5）previousSibling

获取当前节点的前一个同级节点

6）parentNode

获取当前元素的父节点

7）childNodes

获取当前元素的所有子节点

操作元素的属性

1）通过获取元素对象来操作属性

如：

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

txt.id、txt.value......

2）通过方法来操作属性

获取：getAttribute()

设置：setAttribute()

删除：removeAttribute()

----------

获取标签之间的文本：

innerHTML innerText

获取表单元素的值时：

value

var txt = document.getElementsByTagName("input")[0];

//获取元素属性

console.log(txt.type);

console.log(txt.getAttribute("type"));

//设置元素的属性

txt.value = "http://www.mamicode.com/123456";

txt.setAttribute("type","password");

//删除属性

document.getElementsByTagName("a")[0].removeAttribute("href")

DOM

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > DOM

DOM

看完仍有疑问？有类似问题直接问程序猿