澳门威斯尼人平台登录JS之DOM的重要内容,原生JS中DOM节点相关API合集

伪代码如下所示:

Element节点的艺术
  • getBoundingClientRect :重回四个目的,包括top,left,right,bottom,width,height // width、height 成分本人宽高
    // top 元素上国外国语大学边界距窗口最下面的相距
    // right 成分右外边界距窗口最上边的偏离
    // bottom 成分下外边界距窗口最上边的离开
    // left 成分左外边界距窗口最下边的间距
    // width 成分本身宽(包涵border,padding卡塔尔(قطر‎
    // height 元素自己高(包括border,padding卡塔尔
  • getClientRects(State of Qatar //再次来到当前因素在页面上形参的全部矩形。
    // 成分在页面上的偏移量
var rect = el.getBoundingClientRect() 
  return { 
      top: rect.top + document.body.scrollTop, 
      left: rect.left + document.body.scrollLeft 
    }
createElement()

createElement方法用来生成HTML成分节点。参数为要素的标签字,即元高商点的tagName属性。
假如传入大写的标签字,则会转为小写。
借使参数带有尖括号(<和>)只怕null,则报错。

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

Node.removeChild方法从DOM中剔除三个子节点并重回删除的节点。 请注意,重回的节点不再是DOM的黄金年代部分,而是仍存在于内部存款和储蓄器中。 假若管理不当,大概会变成内部存款和储蓄器泄漏。

质量方法
  • Element.getAttribute(State of Qatar:读取钦定属性
  • Element.setAttribute(卡塔尔(قطر‎:设置钦点属性
  • Element.hasAttribute(State of Qatar:重回叁个布尔值,表示方今成分节点是或不是有钦定的属性
  • Element.removeAttribute(卡塔尔国:移除钦命属性
  • Element.querySelector()
  • Element.querySelectorAll()
  • Element.getElementsByTagName()
  • Element.getElementsByClassName()
  • Element.addEventListener(卡塔尔(قطر‎:加多事变的回调函数
  • Element.removeEventListener(卡塔尔(قطر‎:移除事件监听函数
  • Element.dispatch伊夫nt(卡塔尔:触发事件
  • Element.attachEvent(oneventName,listener)
  • Element.detachEvent(oneventName,listener)
// event对象 
var event = window.event||event; 
// 事件的目标节点 
var target = event.target || event.srcElement;
// 事件代理 
ul.addEventListener('click', function(event) { 
  if (event.target.tagName.toLowerCase() === 'li') { 
  console.log(event.target.innerHTML) 
 } 
});
  • Element.scrollIntoView(卡塔尔(قطر‎ //滚动当前成分,进入浏览器的可以预知区域
    //剖析HTML字符串,然后将扭转的节点插入DOM树的钦命地点。
  • Element.insertAdjacentHTML(where, htmlString);
  • Element.insertAdjacentHTML('beforeBegin', htmlStringState of Qatar; // 在该因素前插入
  • Element.insertAdjacentHTML('afterBegin', htmlStringState of Qatar; // 在该因素第3个子元素前插入
  • Element.insertAdjacentHTML('beforeEnd', htmlString卡塔尔国; // 在该因素最终二个子成分前边插入
  • Element.insertAdjacentHTML('afterEnd', htmlString卡塔尔(قطر‎; // 在该因素后插入
  • Element.remove(卡塔尔 //用于将近期因凉秋点从DOM中移除
  • Element.focus(卡塔尔国 //用于将最近页面包车型客车要点,转移到内定成分上
createAttribute()

转移贰个新的性质,并回到它

var class = document.createAttribute("class");
class.value = "server"; //生成class="server"
let list = document.querySelector('ul');let clone = list.cloneNode();

节点操作

  • Node.appendChild(nodeState of Qatar //向节点加多最终叁个子节点
  • Node.hasChildNodes(卡塔尔国 //重回布尔值,表示近来节点是还是不是有子节点
  • Node.cloneNode(true卡塔尔(قطر‎; // 暗中同意为false(克隆节点卡塔尔国, true(克隆节点及其天性,以至后代卡塔尔国
  • Node.insertBefore(newNode,oldNode卡塔尔 // 在钦命子节点早先插入新的子节点
  • Node.removeChild(nodeState of Qatar //删除节点,在要去除节点的父节点上操作
  • Node.replaceChild(newChild,oldChild卡塔尔国 //替换节点
  • Node.contains(node卡塔尔//重回一个布尔值,表示参数节点是不是为当前节点的子孙节点。
  • Node.compareDocumentPosition(node卡塔尔(قطر‎//再次回到一个7个比特位的二进制值,表示参数节点和眼下节点的涉及
  • Node.isEqualNode(noe卡塔尔国//重回布尔值,用于检查三个节点是还是不是等于。所谓相等的节点,指的是多个节点的类型相近、属性相近、子节点相像。
  • Node.normalize(State of Qatar//用于清理当前节点内部的具备Text节点。它会去除空的公文节点,而且将毗邻的文件节点合併成叁个。
  • Node.remove(State of Qatar //用于删除当前节点
  • Node.before() //
  • Node.after()
  • Node.replaceWith()
getAttribute()

获取成分的属性值

node.getAttribute("id");

Element.hasAttribute / Element.removeAttribute

其他
  • document.hasFocus(State of Qatar//再次来到叁个布尔值,表示如今文书档案之中是不是有元素被激活或获得主旨。
  • document.adoptNode(externalNodeState of Qatar//将某些节点,从其原来所在的文书档案移除,插入当前文书档案,并赶回插入后的新节点。
  • document.importNode(externalNode, deepState of Qatar//从外表文书档案拷贝钦命节点,插入当前文书档案。

质量操作

var list = document.querySelector('ul');list.insertAdjacentHTML('afterbegin', 'li First/li');

Document节点

  • document.doctype //
  • document.documentElement //再次来到当前文书档案的根节点
  • document.defaultView //再次来到document对象所在的window对象
  • document.body //重返当前文书档案的节点
  • document.head //再次来到当前文书档案的节点
  • document.activeElement //再次来到当前文书档案中得到宗旨的极其元素。
  • document.links //重返当前文书档案的富有a成分
  • document.forms //重临页面中持有表单成分
  • document.images //再次回到页面中装有图片成分
  • document.embeds //再次回到网页中存有嵌入对象
  • document.scripts //重临当前文书档案的具备脚本
  • document.styleSheets //再次来到当前网页的具有样式表
  • document.documentUEscortI //表示方今文书档案的网站
  • document.U帕杰罗L //再次回到当前文书档案的网站
  • document.domain //重返当前文书档案的域名
  • document.lastModified //重临当前文书档案最终改革的年华戳
  • document.location //重临location对象,提供当前文书档案的U福特ExplorerL新闻
  • document.referrer //重回当前文书档案的探访来源
  • document.title //重回当前文书档案的标题
  • document.characterSet属性重临渲染当前文书档案的字符集,比方UTF-8、ISO-8859-1。
  • document.readyState //重临当前文书档案的图景
  • document.designMode //调整当前文书档案是不是可编写制定,可读写
  • document.compatMode //再次来到浏览器管理文档的格局
  • document.cookie //用来操作Cookie
getElementsByClassName()

getElementsByClassName方法再次回到三个好像数组的靶子(HTMLCollection类型的靶子),饱含了有着class名字适合钦赐条件的要素(搜索范围包罗小编),成分的转换实时反映在回来结果中。

Element.insertAdjacentHTML

Element节点及其性质

innerHTML

innerHTML是可写属性,重返成分的HTML构造,在写入的时候也会活动构建DOM布局。

Node.replaceChild

探求节点
  • document.querySelector(selectors)//选用多少个CSS采纳器作为参数,重返第叁个相当该选拔器的要素秋点。
  • document.querySelectorAll(selectors卡塔尔//选用三个CSS选取器作为参数,再次来到全部相称该选拔器的因穷秋点。
  • document.getElementsByTagName(tagName卡塔尔(قطر‎ //再次来到全数钦定HTML标签的要素
  • document.getElementsByClassName(classNameState of Qatar//重临包蕴了装有class名字相符钦赐条件的成分
  • document.getElementsByName(name卡塔尔(قطر‎//用于选拔具有name属性的HTML成分(比如、、、、和等)
  • document.getElementById(idState of Qatar //重返相称钦定id属性的因白藏点。
  • document.elementFromPoint(x,y卡塔尔//重返坐落于页面钦赐地方最上层的Element子节点。

新建变成分

beforebegin:元素自个儿的前方。afterbegin:插入元素内部的第一身形节点在此以前。beforeend:插入成分内部的最后一个子节点之后。afterend:元素自个儿的末端。

特点属性
  • Element.attributes //再次来到当前成分节点的具备属性节点
  • Element.id //重返钦点元素的id属性,可读写
  • Element.tagName //重返钦点成分的大写标具名
  • Element.innerHTML //再次来到该因素包罗的HTML代码,可读写
  • Element.outerHTML //再次来到钦命成分节点的全部HTML代码,富含它本人和包涵的的享有子成分,可读写
  • Element.className //重临当前因素的class属性,可读写
  • Element.classList //重回当前元新秋点的有着class集结
  • Element.dataset //再次来到元商节点中具备的data-*属性。
    尺寸属性
  • Element.clientHeight //再次来到元素秋点可以预知部分的冲天
  • Element.clientWidth //重返成分节点可以预知部分的增长幅度
  • Element.clientLeft //重临成分节点侧面框的上升的幅度
  • Element.clientTop //重临成分节点顶上部分边框的宽度
  • Element.scrollHeight //再次来到成分节点的总中度
  • Element.scrollWidth //再次来到成分节点的总幅度
  • Element.scrollLeft //重临成分节点的档次滚动条向右滚动的像素数值,通过设置这几个天性能够改换成分的滚动地点
  • Element.scrollTop //再次回到成分节点的垂直滚动向下滚动的像素数值
  • Element.offsetHeight //再次回到成分的垂直高度(包括border,paddingState of Qatar
  • Element.offsetWidth //再次回到成分的水平大幅(满含border,padding卡塔尔
  • Element.offsetLeft //重返当前元素左上角相对于
  • Element.offsetParent节点的垂直偏移
  • Element.offsetTop //再次来到水平位移
  • Element.style //重返成分节点的行内样式
    节点相关属性
  • Element.children //蕴含当前因新秋点的装有子元素
  • Element.childElementCount //再次来到当前成分节点饱含的子HTML成分节点的个数
  • Element.firstElementChild //再次来到当前节点的率先个Element子节点
  • Element.lastElementChild //再次来到当前节点的末段三个Element子节点
  • Element.nextElementSibling //再次回到当前因秋天点的下叁个小家伙HTML成分节点
  • Element.previousElementSibling //再次来到当前成分节点的前三个小朋友HTML节点
  • Element.offsetParent //重临当前因穷秋点的最临近的、并且CSS的position属性不等于static的父成分。
createDoucmentFragment()

createDocumentFragment生成贰个DocumentFragment对象。

var docmentFragment = document.createDocumentFragment();

DocumentFragment对象是存在于内部存款和储蓄器的DOM片段,不过不归属当前文档,平常用于转移复杂的DOM布局,然后插入当前文书档案。

DocumentFragment对象不归于当前文书档案,对它的操作不会引发页面包车型大巴的重新渲染,比直接改正当前文书档案DOM有更加好的质量表现。

Node.insertBefore

读写方法
  • document.open(卡塔尔(قطر‎ //用于新建并开荒三个文书档案
  • document.close(卡塔尔国 //不安比open方法所新建的文书档案
  • document.write(卡塔尔(قطر‎ //用于向当前文书档案写入内容
  • document.writeIn(卡塔尔(قطر‎ //用于向当前文档写入内容,尾巴部分增加换行符。

Element

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

Node.appendChild(State of Qatar方法将节点增多到给定父节点的子节点列表的结尾。 请注意,若是给定的儿孙是文书档案中幸存节点的援引,则它将移动到新岗位。看看示例:

节点属性

  • Node.nodeName //重回节点名称,只读
  • Node.nodeType //再次来到节点类型的常数值,只读
  • Node.nodeValue //重返Text或Comment节点的文本值,只读
  • Node.textContent //重返当前节点和它的保有后代节点的文本内容,可读写
  • Node.baseU昂CoraI //重临当前网页的绝对路线
  • Node.ownerDocument //重回当前节点所在的顶层文书档案对象,即document
  • Node.nextSibling //再次来到紧跟在当前节点前面包车型的士第一个汉子节点
  • Node.previousSibling //再次回到当前节点前边的、间距近期的二个男士节点
  • Node.parentNode //重临当前节点的父节点
  • Node.parentElement //再次来到当前节点的父Element节点
  • Node.childNodes //再次回到当前节点的全数子节点
  • Node.firstChild //再次回到当前节点的率先身形节点
  • Node.lastChild //重临当前节点的末了一个子节点
  • Node.children //重临内定节点的全数Element子节点
  • Node.firstElementChild //再次回到当前节点的首先个Element子节点
  • Node.lastElementChild //重回当前节点的最终一个Element子节点
  • Node.childElementCount //重回当前节点全部Element子节点的多少。
removeAttribute()

删去元素的性质

node.removeAttribute("id");

辛辛那提京城东方之珠尼科西亚

扭转节点
  • document.createElement(tagName卡塔尔 //用来生成HTML成分节点。
  • document.createTextNode(text卡塔尔 //用来扭转文书节点
  • document.createAttribute(name卡塔尔国//生成一个新的特性对象节点,并赶回它。
  • document.createDocumentFragment(卡塔尔(قطر‎ //生成贰个DocumentFragment对象
  • document.createEvent(type) //生成二个事变目的,该目的能被-
  • element.dispatchEvent(卡塔尔方法应用
  • document.add伊芙ntListener(type,listener,captureState of Qatar //注册事件
  • document.remove伊芙ntListener(type,listener,captureState of Qatar //注销事件
  • document.dispatch伊芙nt(event卡塔尔(قطر‎ //触发事件
setAttribute()

设置成分的习性

var node = document.getElementById("sname");
node.setAttribute("class","server");

等同于

var node = document.getElementById("sname");
var class = document.createAttribute("class");
class.value = "server"; //生成class="server"
node.getAttribute(class);

此方法在加以的父节点内的子引用节点早前插入给定节点(并回到插入的节点)

Document节点的办法

createTextNode()

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

var newsContent = document.createTextNode("这是一段文字节点");
// 返回第一个 ul 元素const list = document.querySelector('ul')// 返回所有类名为 info 或者 warning 的 div 元素const elements = document.querySelectorAll('div.info, div.warning');

document

每一种载入浏览器的HTML文书档案都会产生document对象。document对象满含了文书档案的骨干新闻,大家得以透过JavaScript对HTML页面中的全部因素举行拜望、校勘。

常用属性

属性 含义
document.doctype 返回当前文档的 Document Type Definition (DTD)
document.title 设置或获取当前文档的标题
document.characterSet 返回文档使用的字符集
document.head 返回当前文档的<head>元素
document.body 返回当前文档的<body>元素
doucment.images 返回当前文档所有images元素的集合
document.readyState 返回当前文档的状态(loading:加载HTML代码阶段,尚未完成解析;interactive:加载外部资源;complete:全部加载完成)
document.compatMode 返回浏览器处理文档的模式(BackCompat:向后兼容模式,即没有添加DOCTYPE;CSS1Compat:严格模式,添加了DOCTYPE)
document.location 返回当前文档的URI
document.open 打开一个要写入的文档,如果目标中存在文档,则此方法将清除它。要与window.open区分开
document.close 用来关闭向当前文档的数据写入,如果想要打开,使用document.open
document.write 用于向当前文档写入内容。只要当前文档还没有用close方法关闭,它所写入的内容就会追加在已有内容的后面。

时间: 2019-12-09阅读: 86标签: dom

cloneNode()

cloneNode方法用于克隆成分,有三个布尔值参数,为true时会深复制,即会复制元素及其子成分(IE还恐怕会复制其事件),为false时只复制作而成分本身。

node.cloneNode(true);

例子

HTML部分
<header>
    <div>首页</div>
</header>
JS部分
var newDiv = document.querySelector("header").cloneNode(true);
console.log(newDiv);

首都法国巴黎布拉迪斯拉发

querySelector()

querySelector方法重返相称内定的css选择器的要金秋点。假若有八个节点满意相配原则,则赶回首个极度的节点。若无发觉相称的节点,重返null。

document.querySelector("#nav");
document.querySelector(".server");

querySelector方法不恐怕选中css伪成分。

let list = document.createElement('ul');['北京', '上海', '深圳'].forEach(city = { let listItem = document.createElement('li') listItem.innerText = city list.appendChild(listItem)})document.body.appendChild(list)
innerText

innerText是可写属性,再次来到成分内富含的文件内容,在多档案的次序的时候根据成分由浅到深的种种拼接内容。

text是要被深入分析为HTML或XML,并插入到DOM树中的字符串。

改正成分

此形式替换父节点中的子节点(并回到替换后的旧子节点卡塔尔国。请留意,假设管理不当,此办法大概招致与Node.removeChild类似的内部存款和储蓄器泄漏难点。

根本的数据类型

数据 含义
document 每个载入浏览器的HTML文档都会成为document对象,document对象包含了文档的基本信息
element element 是指由 DOM API 中成员返回的类型为 element 的一个元素或节点
attribute 属性

Element.getAttribute方法重临成分上给定属性的值,反之亦然,Element.setAttribute设置给定成分上品质的值。

询问成分

Node.cloneNode

removeChild()
parentNode.removeChild(childNode);

例子

HTML部分
<header>
    <div>首页</div>
</header>
JS部分
document.querySelector("header").removeChild(document.querySelector("div"));

Node.appendChild

clone元素

document.createElement

删去成分

!-- beforebegin --div !-- afterbegin -- pHello World/p !-- beforeend --/div!-- afterend --
querySelectorAll()

querySelectorAll方法重回相称钦定的css接纳器的保有节点,重回NodeList类型的靶子。NodeList对象不是动态集合,所以成分节点的退换不能够实时反映在重返结果中。

document.querySelectorAll(".server");

Node.insertBefore('厦门','北京')

getElementsByName()

getElementsByName方法用于选用具有name属性的HTML成分,举个例子form、img、frame、embed和object,重临多个NodeList格式的指标,不会实时反映要素的调换。

潜心,在IE浏览器选拔这些情势,会把未有name属性、但有同名id属性的要素也回到,所以name和id属性最棒设为不相像的值。

Element.getAttribute / Element.setAttribute

replaceChild()

轮流节点,选拔八个参数:要插入的要素和要替换的要素。

newDiv.replaceChild(newElement, oldElement);
let list = document.querySelector('ul');let firstItem = list.querySelector('li');let removedItem = list.removeChild(firstItem);
getElementsByTagName()

getElementsByTagName方法再次回到全体钦点标签的因素(寻觅范围包涵本身)。重返值是贰个HTMLCollection对象,也便是说,寻觅结果是多个动态集合,任何因素的变迁都会实时反映在回到的成团中。这些方式不只可以在document对象上调用,也足以在别的因白藏点上调用。

let list = document.querySelector('ul');let firstCity = list.querySelector('ul  li');let newCity = document.createElement('li');newCity.textContent = 'San Francisco';list.insertBefore(newCity, firstCity);
insertBefore()

在有些成分此前插入成分

var news = document.createElement("div");
var newsContent = document.createTextNode("Hello");
news.insertBefore(newsContent,news.firstChild); //<div>Hello</div>

在二个 HTML 文书档案中,Document.createElement(tagName卡塔尔方法创立由tagName内定的 HTML 成分,或四个HTMLUnknownElement,如果tagName不被识别。

getElementById()

getElementById方法重临相配钦定ID属性的成分节点。若无意识相配的节点,则赶回null。那也是得到二个要素最快的秘技。

指望本文对您有所扶植,並且有利于你领悟DOM。精确处理DOM树非常关键,假诺操作不得法,可能会招致严重后果。

appendChild()

在要素内部的末尾添卢比素

var news = document.createElement("div");
var newsContent = document.createTextNode("Hello");
var newsContent2 = document.createTextNode(" World");
news.appendChild(newsContent);   //<div>Hello</div>
news.appendChild(newsContent2); //<div>Hello World</div>

DOM 或文书档案对象模型是 web 页面上具备指标的根。它表示文书档案的布局,并将页面总是到编程语言。它的构造是一个逻辑树。每一个分支截止于三个节点,每一个节点包括子节点、对象。DOM API极其巨大,在本文中,大家只谈谈比较常用有有用的那一个API

示例:

Element.hasAttribute方法检查给定成分是还是不是富有钦命的属性,重返值为boolean。 通过调用Element.removeAttribute方法,大家得以从要素中删除全部给定名称的性质。

let list = document.querySelector('ul');let oldItem = list.querySelector('li');let newItem = document.createElement('li');newItem.innerHTML = '前端小智';let replacedItem = list.replaceChild(newItem, oldItem);
let list = document.querySelector('ul');list.setAttribute('id', 'my-list');let id = list.getAttribute('id');console.log(id); // outputs my-list

document.querySelector/document.querySelectorAll

Node.cloneNode(deep卡塔尔国方法重返调用该措施的节点的二个别本,deep(可选)意味着是不是采用深度克隆,假设为true,则该节点的具备后代节点也都会被克隆,假设为false,则只克隆该节点自身.

let list = document.querySelector('ul');if (list.hasAttribute('id')) { console.log('list has an id'); list.removeAttribute('id');};

element.insertAdjacentHTML(position, text卡塔尔(قطر‎将点名的文本剖判为HTML或XML,并将结果节点插入到DOM树中的钦定地方。它不会再次深入分析它正值利用的要素,因而它不会毁掉成分内的水保成分。那幸免了附加的连串化步骤,使其比平昔innerHTML操作更加快。

position是周旋于成分的职位,并且必需是以下字符串之蓬蓬勃勃:

document.querySelectorAll方法重回与钦点的挑肥拣瘦器组匹配的文书档案中的成分列表 (使用深度优先的先序遍历文书档案的节点卡塔尔国。重临的靶子是NodeList。

总结

Node.removeChild

document.querySelector方法重返文书档案中与指定选拔器或选拔器组相称的率先个html成分。 借使找不到相称项,则赶回null。

本文由澳门威斯尼人平台登录发布于Web前端,转载请注明出处:澳门威斯尼人平台登录JS之DOM的重要内容,原生JS中DOM节点相关API合集

相关阅读