来自 软件资讯 2019-11-21 04:18 的文章
当前位置: 威尼斯国际官方网站 > 软件资讯 > 正文

DOM 操作

DOM,文书档案对象模型。是HTML和XML文书档案的编制程序接口。它给文书档案(结构树卡塔 尔(英语:State of Qatar)提供了多少个结构化的表述並且定义了风流倜傥种艺术—程序能够对组织树进行拜候,以转移文书档案的结构,样式和剧情。

DOM 提供了风华正茂种表述格局将文书档案作为一个结构化的节点组以至含有属性和措施的对象。从实质上说,它将web 页面湖剧本或编制程序语言连接起来了。

 

图片 1

要退换页面包车型地铁某部东西,JavaScript就供给获得对HTML文书档案中负有因素实行拜见的入口。那几个进口,连同对 HTML 成分实行增添、移动、退换或移除的法子和性能,都以透过DOM来得到的

document 对象

每一种载入浏览器的HTML文书档案都会成为document目的。document对象包蕴了文书档案的主导新闻,我们能够由此JavaScript对HTML页面中的全体因素进行访问、修正。

document对象常用属性

document对象有无数属性来陈述文书档案消息,介绍多少个常用的

    document.doctype
    document.title
    document.characterSet
    document.head
    document.body
    document.images

document.location

document.location 也可直接运用 location

document.location === location //true
document.location === window.location  //true

location属性再次回到二个只读对象,提供了这段时间文书档案的UMuranoL消息

// 假定当前网址为http://user:passwd@www.example.com:4097/path/a.html?x=111#part1

document.location.href // "http://user:passwd@www.example.com:4097/path/a.html?x=111#part1"
document.location.protocol // "http:"
document.location.host // "www.example.com:4097"
document.location.hostname // "www.example.com"
document.location.port // "4097"
document.location.pathname // "/path/a.html"
document.location.search // "?x=111"
document.location.hash // "#part1"
document.location.user // "user"
document.location.password // "passed"

// 跳转到另一个网址
document.location.assign('http://www.google.com')
// 优先从服务器重新加载
document.location.reload(true)
// 优先从本地缓存重新加载(默认值)
document.location.reload(false)
// 跳转到另一个网址,但当前文档不保留在history对象中,
// 即无法用后退按钮,回到当前文档
document.location.assign('http://www.google.com')
// 将location对象转为字符串,等价于document.location.href
document.location.toString()

就算如此location属性再次来到的目的是只读的,可是可以将UPRADOL赋值给这么些天性,网页就能够自动跳转到钦定网址。

document.location = 'http://www.example.com';
// 等价于
document.location.href = 'http://www.example.com';

 

document.open() 与 document.close()

document.open方法用于新建一个文书档案,供write方法写入内容。它实质上等于消逝当前文书档案,重新写入内容

document.close方法用于关闭open方法所新建的文档。一旦关闭,write方法就不可能写入内容了。

document.write()

document.write方法用于向当前文书档案写入内容。只要当前文书档案还并未有用close方法关闭,它所写入的剧情就能大增在本来就有内容的末尾。

document.open();
document.write("hello");
document.write("world");
document.close();
  1. 设若页面已经渲染实现再调用write方法,它会先调用open方法,擦除当前文书档案全数剧情,然后再写入。

  2. 如若在页面渲染进度中调用write方法,并不会调用open方法。

亟待介意的是,尽管调用close方法之后,无法再用write方法写入内容,但这个时候近日页面包车型地铁此外DOM节点依然会继续加载。

除此而外有些特殊情状,应该尽量幸免使用document.write那一个措施。

Element

除了document对象,在DOM中最常用的就是Element对象了,Element对象表示HTML成分。

Element 对象可以有所项目为成分节点、文本节点、注释节点的子节点,DOM提供了黄金年代比比皆已经的办法能够拓展成分的增、删、改、查操作

Element有多少个根性情质

  • nodeName:成分标签字,还恐怕有个八九不离十的tagName
  • nodeType:成分类型
  • className:类名
  • id:元素id
  • children:子成分列表(HTMLCollection卡塔尔国
  • childNodes:子成分列表(NodeList卡塔尔国
  • firstChild:第三个子成分
  • lastChild:最终四个子成分
  • nextSibling:下贰个兄弟成分
  • previousSibling:上壹个小家伙成分
  • parentNode、parentElement:父元素

 

查询成分 (ES3措施)

getElementById()

getElementById方法重临相配内定ID属性的要首秋点。若无发觉相配的节点,则赶回null。那也是赢得四个因素最快的法子

var elem = document.getElementById("test");

 

getElementsByClassName()

getElementsByClassName方法再次回到叁个相符数组的对象(HTMLCollection类型的对象卡塔尔,富含了全部class名字切合钦定条件的要素(寻觅范围饱含小编卡塔尔,成分的变动实时反映在重临结果中。这几个法子不仅可以够在document对象上调用,也足以在任何因孟秋点上调用。

var elements = document.getElementsByClassName('tab');

getElementsByClassName方法的参数,能够是三个空格分隔的class名字,再次回到同时具备那些节点的因素。

document.getElementsByClassName('red test');

 

getElementsByTagName()

getElementsByTagName方法重临全数钦定标签的因素(寻觅范围包含我卡塔尔国。重临值是多个HTMLCollection对象,也正是说,寻找结果是一个动态集合,任何因素的改造都会实时反映在回去的群集中。这些点子不仅可以够在document对象上调用,也足以在别的因素秋点上调用。

var paras = document.getElementsByTagName("p");

地方代码重回当前文书档案的保有p成分节点。注意,getElementsByTagName方法会将参数转为小写后,再拓宽检索。

getElementsByName()

getElementsByName方法用于选拔具备name属性的HTML元素,举个例子form、img、frame、embed和object,重回叁个NodeList格式的对象,不会实时反映要素的生成。

// 假定有一个表单是<form name="x"></form>
var forms = document.getElementsByName("x");
forms[0].tagName // "FORM"

专心,在IE浏览器接纳那么些方式,会将未有name属性、但有同名id属性的要素也回到,所以name和id属性最棒设为不肖似的值。

询问成分 更加好的格局

querySelector()

querySelector方法重回相称钦命的CSS选拔器的因晚秋点。倘若有多个节点满意匹配原则,则赶回第一个十三分的节点。若无开掘相称的节点,则赶回null。

var el1 = document.querySelector(".myclass");
var el2 = document.querySelector('#myParent > [ng-click]');

querySelector方法比超小概选中CSS伪成分。

querySelectorAll()

querySelectorAll方法重临相称内定的CSS采取器的兼具节点,重返的是NodeList类型的对象。NodeList对象不是动态会集,所以成分节点的变型不只怕实时反映在回去结果中。

elementList = document.querySelectorAll(selectors);

querySelectorAll方法的参数,能够是逗号分隔的多个CSS选取器,再次回到全体相配在那之中多少个接纳器的要素。

var matches = document.querySelectorAll("div.note, div.alert");

下边代码重返class属性是note或alert的div成分。

创办成分

createElement()

createElement方法用来生成HTML成分节点。

var newDiv = document.createElement("div");

createElement方法的参数为要素的标签字,即成分节点的tagName属性。若是传入大写的标签字,会被转为小写。要是参数带有尖括号(即<和>卡塔尔可能是null,会报错。

createTextNode()

createTextNode方法用来变化文书节点,参数为所要生成的公文节点的内容。

var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");

上边代码新建一个div节点和叁个文书节点

newDiv.append(newContent);  //即把上面的Hello加入到div中

 

createDocumentFragment()

createDocumentFragment方法生成一个DocumentFragment对象。

var docFragment = document.createDocumentFragment();

DocumentFragment对象是多个存在于内部存款和储蓄器的DOM片段,但是不归于当前文书档案,平时用来生成较复杂的DOM结构,然后插入当前文书档案。那样做的补益在于,因为DocumentFragment不属于当前文书档案,对它的此外退换,都不会迷惑网页的再一次渲染,比直接改换当前文书档案的DOM有越来越好的天性表现。

更易懂的说,createDocumentFragment()哪怕开辟了一块第三方区域,等具有DOM的更换都在此片区域达成操作之后,再统意气风发的插入当前文书档案。通过这种艺术达到裁减渲染次数的指标,进而改善质量表现。

 

增添/修改 元素

appendChild()

在要素末尾添美成分

var fatherDiv = document.querySelector('#father'); //父级id为fahter的div
var newDiv = document.createElement("div"); //新增的div
var newContent = document.createTextNode("Hello");  //新增div中的内容
newDiv.append(newContent);  //将内容添加到div中
fatherDiv.appendChild(newDiv); //将新增的div放置到id为father的div的最后

 

insertBefore()

在有些成分以前插入成分

var fatherDiv = document.querySelector('#father');
var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.append(newContent);
fatherDiv.insertBefore(newDiv,fatherDiv.chlidren[0]);  //放到最前

 

replaceChild()

replaceChild()选择多个参数:要插入的因素和要替换的要素

newDiv.replaceChild(newElement, oldElement);

 

剔除成分

除去成分运用removeChild()方法就可以

parentNode.removeChild(childNode);

 

clone元素

cloneNode()方法用于克隆成分,方法有三个布尔值参数,传入true的时候会深复制,也正是会复制元素及其子元素(IE还有或许会复制其事件卡塔尔,false的时候只复制作而成分本人

node.cloneNode(true);

 

性情操作

getAttribute()

getAttribute()用于获取成分的attribute值

node.getAttribute('id');

 

createAttribute()

createAttribute()方法生成一个新的质量对象节点,并重返它。

attribute = document.createAttribute(name);

createAttribute方法的参数name,是性质的名目。

setAttribute()

setAttribute()方法用于安装成分属性

var node = document.getElementById("div1");
node.setAttribute("my_attrib", "newVal");

等同于

var node = document.getElementById("div1");
var a = document.createAttribute("my_attrib");
a.value = "newVal";
node.setAttributeNode(a);

 

removeAttribute()

removeAttribute()用于删除成分属性

node.removeAttribute('id');

 

品质操作 案例:

使用setAttribute()、getAttribute()、removeAttribute()方法开展id的增加和删除改查

 

 

图片 2

 

内容

innerText

innerText是一个可写属性,再次回到成分内含有的文本内容,在多档案的次序的时候会安份守己成分由浅到深的逐条拼接其内容

<div>
    <p>
        123
        456
    </p>
</div>

外层div的innerText再次回到内容是 "123456"

innerHTML

innerHTML属性功能和innerText相同,不过否回去元素的公文内容,而是回到成分的HTML结构,在写入的时候也会自行营造DOM

<div>
    <p>
        123
        456
    </p>
</div>

外层div的innerHTML再次来到内容是 "<p>123456</p>"

左近使用方式

校正样式

可校正成分的 style 属性,改良结果一向反映到页面成分

document.querySelector('p').style.color = 'red'
document.querySelector('.box').style.backgroundColor = '#ccc'

 

赢得样式 getComputedStyle

使用getComputedStyle获取成分总括后的体裁,不要通过 node.style.属性 获取

var node = document.querySelector('p')
var color = window.getComputedStyle(node).color
console.log(color)

 

class 操作

var nodeBox = document.querySelector('.box')
console.log( nodeBox.classList )
nodeBox.classList.add('active')   //新增 class
nodeBox.classList.remove('active')  //删除 class
nodeBox.classList.toggle('active')   //新增/删除切换
node.classList.contains('active')   // 判断是否拥有 class

体制的改变尽量使用 class 的骤增加和删除除来促成

关于 DOM操作/事件 的Demo

DEMO

本文由威尼斯国际官方网站发布于软件资讯,转载请注明出处:DOM 操作

关键词: