有关DOM的基础知识点

恬淡如雪

于 2022-08-24 17:46:16 发布

阅读量489

点赞数

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/qq_48639265/article/details/126499225

版权

2.2.1.appendChild() 追加节点

2.2.2.insertBefore()插入节点

2.2.3.removeChild() 移除节点

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

2. 获取自定义属性

3.修改属性

4.获取style属性和onclick属性

5. 移除属性

1. DOM概念

DOM(Document Object Moel)是操作HTML的api，全称文档对象模型。

DOM的最小组成单位叫做节点（node)。

常用节点

文档节点 (document)

整个HTML文档document对象作为window对象的属性存在的，我们不用获取可以直接使用。

元素节点（Element）

HTML文档中的HTML标签。

属性节点（Attribute)

元素的属性表示的是标签中的一个一个的属性，这里要注意的是属性节点并非是元素节点的子节点，而是元素节点的一部分。

文本节点（Text）

HTML标签中的文本内容。

其它节点

DocumentType

doctype标签（比如<!DOCTYPE html>）。

Comment

注释。

DocumentFragment

文档的片段。

2. Node类型

DOM Level 1 描述了名为Node的接口，该接口将由DOM中的所有节点类型实现。

JavaScript中所有的节点类型都继承自Node类型。

2.1 Node的属性

body节点

//获取body节点
var body=document.body;

查看节点类型(nodeType)

  console.log(document.nodeType);//9

节点类型	值	对应常量
文档节点（document）	9	Node.DOCUMENT_NODE
元素节点（element）	1	Node.ELEMENT_NODE
属性节点（attr）	2	Node.ATTRIBUTE_NODE
文本节点（text）	3	Node.TEXT_NODE
文档类型节点（DocumentType）	10	Node.DOCUMENT_TYPE_NODE
注释节点（Comment）	8	Node.COMMENT_NODE
文档片断节点（DocumentFragment）	11	Node.DOCUMENT_FRAGMENT_NODE

获取节点名称返回纯大写节点名称

<div id="d1">hello world</div>
<script>
  var div = document.getElementById('d1');
  console.log(div.nodeName); //DIV
</script>

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

<div id="d1">hello world<div>我是子节点</div></div>
<script>
  var div1 = document.getElementById('d1');
  console.log(div1.childNodes); //NodeList[text, div]
</script>

获取兄弟节点中的前一个节点

<div id="d1">hello</div><div id="d2">world</div>
<script>
  var div1 = document.getElementById('d1');
  var div2 = document.getElementById('d2');
  console.log(div2.previousSibling); //<div id="d1">hello</div>
  console.log(div2.previousSibling === div1); // true
</script>

获取兄弟节点的下一个节点

<div id="d1">hello</div><div id="d2">world</div>
<script>
  var div1 = document.getElementById('d1');
  var div2 = document.getElementById('d2');
  console.log(div1.nextSibling); //<div id="d2">world</div>
  console.log(div1.nextSibling === div2); // true
</script>

获取childNodes列表中的第一个节点和最后一个节点。

<div id="d1">hello world<div>我是子节点</div></div>
<div id="d2"><div>我是子节点</div></div>
<script>
  var div1 = document.getElementById('d1');
  console.log(div1.firstChild); // hello world
  console.log(div1.lastChild); // <div>我是子节点</div>
  var div2 = document.getElementById('d2');
  console.log(div2.firstChild); // <div>我是子节点</div>
</script>

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

console/log(body.ownerDocument);

查看body节点是否有孩子节点

 console.log(body.hasChildNodes());

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

 console.log(body.children);

类数组转数组 es5

//es5
body.childNodes
var result=Array.prototype.slice.call(childs,0);
console.log(result);
//es6 
Array.from(childs);
var temp=Array.from(childs);
console.log(temp)

从孩子节点中过滤出元素节点（拓展运算符）

var temp=Array.from(childs);
var result=temp.filter(function(item){
     return item.nodeType === 1
})
console.log(result)；

2.2方法

2.2.1.appendChild() 追加节点

appendChild方法接受一个节点对象作为参数，将其作为最后一个子节点，插入当前节点。该方法的返回值就是插入文档的子节点。

<script>
  // 创建元素节点p
  var p = document.createElement('p');
  // 向p标签插入内容
  p.innerHTML = '我是一个p标签';
  // 将节点插入到body中
  document.body.appendChild(p);
</script>

2.2.2.insertBefore()插入节点

var insertedNode = parentNode.insertBefore(newNode, referenceNode);

insertBefore方法接受两个参数，第一个参数是所要插入的节点newNode，第二个参数是父节点parentNode内部的一个子节点referenceNode。newNode将插在referenceNode这个子节点的前面。返回值是插入的新节点newNode。

<div id="parentElement">
  <span id="childElement">foo bar</span>
</div>
<script>
  //创建一个新的、普通的<span>元素
  var sp1 = document.createElement("span");
  // 向span标签插入内容
  sp1.innerHTML = '我是span标签'
  //插入节点之前，要获得节点的引用
  var sp2 = document.getElementById("childElement");
  //获得父节点的引用
  var parentDiv = sp2.parentNode;
  //在DOM中在sp2之前插入一个新元素
  parentDiv.insertBefore(sp1, sp2);
</script>

2.2.3.removeChild() 移除节点

removeChild方法接受一个子节点作为参数，用于从当前节点移除该子节点。返回值是移除的子节点。

<div id="d1">
  <span id="s1">我是span标签</span>
</div>
<script>
  var span1 = document.getElementById('s1');
  span1.parentNode.removeChild(span1);
</script>

2.2.4.replaceChild()

replaceChild方法用于将一个新的节点，替换当前节点的某一个子节点。

var replacedNode = parentNode.replaceChild(newChild, oldChild);

replaceChild方法接受两个参数，第一个参数newChild是用来替换的新节点，第二个参数oldChild是将要替换走的子节点。返回值是替换走的那个节点oldChild。

<div id="d1">
  <span id="s1">我是span标签</span>
</div>
<script>
  var span1 = document.getElementById('s1');
  //创建一个新的div标签
  var div1 = document.createElement("div");
  // 向div标签插入内容
  div1.innerHTML = '我是div1标签';
  // 节点替换
  span1.parentNode.replaceChild(div1, span1);
</script>

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

获取节点内部内容

parent.innerHTML;设别HTML代码片段；
parent.innerText;；只识别文本去除空格和回车；
parent.textContent;只识别文本，不去除空格和回车。

清空节点内部内容

parent.innerHTML=""；

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

浅复制：只复制节点，不复制内容。

深复制：复制节点和内容。

var p = document.getElementById("para1"),
var p_prime = p.cloneNode(true);

3. Document类型

Javascript通过使用Document类型表示文档。在浏览器中，document对象是HTMLDocument的一个实例，表示整个HTML页面。document对象是window对象的一个属性，因此可以直接调用。HTMLDocument继承自Document。

3.1属性

document 表示整个html文档页面

console.log(document)；

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.2方法

查找元素

方法	描述
document.getElementById(id)	通过元素 id 来查找元素
document.getElementsByTagName(name)	通过标签名来查找元素
document.getElementsByClassName(name)	通过类名来查找元素
document.querySelector()	返回文档中匹配指定的CSS选择器的第一元素
document.querySelectorAll()	document.querySelectorAll() 是 HTML5中引入的新方法，返回文档中匹配的CSS选择器的所有元素节点列表

getElementById()

返回匹配指定 id 的一个元素。

<div id="d1">我是一个div标签</div>
<script>
  // 查找id为d1的标签
  var div = document.getElementById('d1');
  console.log(div);
</script>

getElementsByTagName()

返回一个HTMLCollection(伪数组)，包含匹配指定标签名的所有元素。

<p>我是p标签</p>
<p>我是p标签</p>
<p>我是p标签</p>
<script>
  // 查找所有p标签
  var p = document.getElementsByTagName('p');
  console.log(p);
</script>

getElementsByClassName()

返回一个HTML集合HTMLCollection(伪数组)，包含匹配指定类名的所有元素。

<div class="div1">我是div标签</div>
<div class="div1">我是div标签</div>
<div class="div1">我是div标签</div>
<script>
  // 查找class为div1的标签
  var div = document.getElementsByClassName('div1');
  console.log(div);
</script>

document.querySelector()

返回文档中匹配指定的CSS选择器的第一元素。

<div id="div1">我是一个div</div>
<div id="div1">我是一个div</div>
<script>
  document.querySelector("#div1").innerHTML = "Hello World!";
</script>

document.querySelectorAll()

document.querySelectorAll() 是 HTML5中引入的新方法，返回文档中匹配的CSS选择器的所有元素节点列表。

<div class="div1">我是一个div</div>
<div class="div1">我是一个div</div>
<script>
  console.log(document.querySelectorAll(".div1"));
  var x = document.querySelectorAll(".div1");
  x[0].innerHTML = '我是新的div';
</script>

4.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);

恬淡如雪

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
有关DOM的基础知识点

1. DOM概念常用节点2. Node类型2.1Node的属性类数组转数组 es5从孩子节点中过滤出元素节点（拓展运算符）2.2方法2.2.1.appendChild() 追加节点2.2.2.insertBefore()插入节点2.2.3.removeChild() 移除节点2.2.4.replaceChild()3. Document类型3.1属性3.2方法4.Element类型1. 获取属性值,使用.访问自有属性,使用getAttribu
复制链接

扫一扫