笔记2017.12.26

最新推荐文章于 2023-04-11 21:11:33 发布

o_o_gl

最新推荐文章于 2023-04-11 21:11:33 发布

阅读量330

点赞数

本文链接：https://blog.csdn.net/o_o_gl/article/details/78904067

版权

DOM和DOM节点

1.DOM

DOM是Javascript操作网页的接口，全称叫文档对象模型（Document Object Model）。它的作用是将网页转化为一个Javascript对象，从而用Javascript脚本进行各种操作（比如增删元素等）。

2.DOM节点

DOM的最小组成单位就是节点（node）。DOM树就是由不同类型的节点组成。每个节点可以看成是DOM树上的叶子。
在DOM中，节点的类型一共有7种

Document：整个文档树的顶层节点；
DocumentType：dotype标签比如：<!DOCTYPE html>
Element：网页的各种HTML标签比如：<body> <h> <a> <div>
Attribute：网页元素的属性比如：id=”id” class=”class” type=”text”
Text：标签之间或标签包含的文本
Comment：注释
DocumentFragment：文档片段

3.节点树

一个文档的所有节点，按照所在的层次，可以抽象成一个树状结构。这种树状结构就是DOM。
最顶层的节点就是document类型的节点，它代表了整个文档。文档里面最高一层的HTML标签，一般是<html>，它构成树结构的根节点（root node），其他的Html标签都是它的下级。

除了根节点，其他节点对于周围的几点都存在3种关系

父节点关系（parentNode）：直接的那个上级节点
子节点关系（childNodes）：直接的下级节点
同级节点关系（sibling）：拥有同一父节点的节点
DOM提供操作接口，用来获取三种关系的节点。
获取子节点：firstChild（第一个子节点）lastChild（最后一个子节点）等
获取同级别：nextSibling（紧邻在后的同级节点）和previousSibling（紧邻在前的同级节点

特征相关属性

所有的节点对象我们都可以理解为浏览器内置的node对象的实例。

1.Node.nodeName和Node.nodeType

console.log("document.nodeName=" + document.nodeName); // #document
console.log("document.nodeType=" + document.nodeType); // 9

2.Node.nodeValue

返回是一个字符串，表示当前节点本身的文本值，该属性可读写。
由于只有Text节点、Comment节点和xml文档的CDATA节点有文本值，因此只有这三类节点有nodeValue，其他节点一律返回null。

注意，这里需要特别注意的是，Text节点代表的是元素或属性中的文本内容。

console.log("p.nodeValue=" + document.getElementById("_p").nodeValue); //null

3.Node.textContent

返回当前节点和它的后代节点的文本内容，该属性是可读写的。

<ul id="myList">
    <li id="item1">Coffee</li>
    <li id="item2">Tea</li>
</ul>

<p id="demo">点击按钮来获得列表元素的文本内容。</p>

<button onclick="myFunction()">试一下</button>

<script>
function myFunction()
{
    var lst=document.getElementById("myList");
    var x=document.getElementById("demo");  
    x.innerHTML=lst.textContent;
}
</script>

上面代码在插入文本时，会将标签解释为文本，而不会当做标签去处理。

4.Node.nextSibling

返回紧跟在当前节点后面的一个同级节点。如果没有找到返回null。

注意：该属性还包括文本节点。因此如果当前节点后面有空格，该属性返回一个文本节点，内容为空格。

var _pb = document.getElementById("_p").nextSibling;
console.log(_pb.textContent); // 空格

5.Node.previousSibling

返回当前节点前面的，距离最新的一个同级节点。

6.Node.parentNode

返回当前节点的父节点。父节点只可能包括三种类型：element节点、document节点、documentfragment节点

7.Node.parentElement

返回当前节点的父element节点。不是W3C标准，仅支持IE。

8.childNodes

返回一个nodelist集合，成员包括当前节点的所有子节点。

注意：除了Html元素节点，还包括Text节点和Comment节点。如果当前节点不包含任何子节点，则返回一个空的nodelist集合。

Html:
<div id="_asia">
	<span id="_china">China</span>
	<!-- xxxx -->
	<span id="_korea">Korea</span>
	<span id="_japan">Japan</span>
</div>
var _asia = document.getElementById("_asia");
var _asias = _asia.childNodes;
console.log(_asias);

9.Node.firstChild/lastChild

返回当前节点的第一个或者最后一个子节点。如果没有找到返回null。

节点对象的方法

Node.appendChild()

接收一个对象节点作为参数，将其作为最后一个节点，插入当前节点。

var addCountry = function() {
   var cinput = document.getElementById("country");
   var cvalue = cinput.value;
   var cli = "<li id='" + cvalue + "'>" + cvalue + "</li>";
   var culInnerHtml = document.getElementById("_asia").innerHTML;
    culInnerHtml = culInnerHtml + cli;
    document.getElementById("_asia").innerHTML = culInnerHtml;
};

var addCountry2 = function() {
    var cinput = document.getElementById("country");
    var cvalue = cinput.value;

    var cli = document.createElement("li");
    cli.innerHTML = cvalue;
    document.getElementById("_asia").appendChild(cli);
};

Node.hasChildNodes()

返回一个布尔值，判断当前节点是否有子节点。

var _asiaUl = document.getElementById("_asia");
if (_asiaUl.hasChildNodes()) {
    _asiaUl.innerHTML = "";
}

Node.insertBefore()

方法用于将某个节点插入当前节点的指定位置。接收两个参数，第一个参数是所要插入的节点，第二个参数是当前节点的一个子节点。新的节点将插在这个节点的前面。该方法返回被插入的新节点。

var getIndexLi = function(index) {
    var _asiaChilds = document.getElementById("_asia").childNodes;
    var k = 1;
   for (var i = 0; i < _asiaChilds.length; i++) {
      var cnode = _asiaChilds[i];
      if (cnode.nodeName === 'LI') {
            if (index === k) {
               return cnode;
         }
            k++;
      }
   }
}

var addCountry3 = function() {
    var cinput = document.getElementById("country");
    var cvalue = cinput.value;

    var cli = document.createElement("li");
    cli.innerHTML = cvalue;

    var _asiaEle = document.getElementById("_asia");
    var cindex = document.getElementById("cindex").value;
    var cele = getIndexLi(parseInt(cindex));

    _asiaEle.insertBefore(cli, cele);
};

Node.removeChild()

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

var removeCountry1 = function(id) {
    var _asiaEle = document.getElementById("_asia");
    _asiaEle.removeChild(document.getElementById(id));
}

Node.replaceChild()

方法用于将一个新的节点替换当前节点的某一个子节点。接收两个参数，第一个参数是用来替换的新节点，第二个参数是将要被替换的节点。

var repalceCountry = function() {
   var newEle = document.createElement("LI");
   newEle.innerHTML = "Tailand";

    var _asiaEle = document.getElementById("_asia");
    _asiaEle.replaceChild(newEle, document.getElementById("_japan"));
}

o_o_gl

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
笔记2017.12.26

DOM和DOM节点1.DOMDOM是Javascript操作网页的接口，全称叫文档对象模型（Document Object Model）。它的作用是将网页转化为一个Javascript对象，从而用Javascript脚本进行各种操作（比如增删元素等）。2.DOM节点DOM的最小组成单位就是节点（node）。DOM树就是由不同类型的节点组成。每个节点可以看成是DOM树上的叶子
复制链接

扫一扫