上一篇: js总结以及一些经典代码片段下一篇: iframe学习

html总结

一、document节点(dom Document Object Model)

​ document属性:

//documentElement属性指向<html>  
console.log(document.documentElement.nodeName)   //'HTML'

//body属性指向<body>
console.log(document.body.nodeName)        //'BODY'

//doctype属性(文档模式)指向<!Doctype>
console.log(document.doctype.nodeName)     //'html'注意是小写的'html',和元素节点html                                                的nodeName区分就在于大小写
console.log(document.doctype.nodeValue)    //null
console.log(document.doctype.nodeType)     //10
二、<!Doctype html>

作用:声明文档的解析类型(document.compatMode),避免浏览器的怪异模式。 document.compatMode: BackCompat:怪异模式,浏览器使用自己的怪异模式解析渲染页面。 CSS1Compat:标准模式,浏览器使用W3C的标准解析渲染页面。 这个属性会被浏览器识别并使用,但是如果你的页面没有DOCTYPE的声明,那么compatMode默认就是 BackCompat.

三、文档树

文档树 是在源 HTML 中编码的元素的层次结构。可以从祖先和后代的角度描述此树的每个级别。此树中的每个元素都恰好有一个父元素(根元素除外,它没有父元素),并且可能有子元素和/或同级元素。样式规则将根据元素的类型、在层次结构中的相对位置或者诸如 ID 或类等属性应用于文档树中的元素.

四、节点属性

​ DOM共有12种节点类型。其中,常用的有Element元素节点、Attribute特性节点、Text文本节点、Comment注释节点、Document文档节点和DocumentFragment文档片段节点

​ 节点的三大属性:nodeName,nodeType,nodeValue

​ 1.nodeName属性包含某个节点的名称:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload = function()
{
    var element = document.getElementById("span");
    var text = element.firstChild;
    var property = document.getElementById("span").getAttributeNode("id");
    alert("这是元素节点的返回值:"+ element.nodeName);//返回的标签名SPAN,注意是大写的
    alert("这是文本节点的返回值:"+ text.nodeName);//返回的#text
    alert("这是属性节点的返回值:"+ property.nodeName);//返回的是属性名,这里是id
}
</script>
</head>
<body>
<div>
<span id="span">文本节点</span>
</div>
</body>
</html>

2.nodeValue:元素节点nodeValue=null

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload = function()
{
    var element = document.getElementById("myspan");
    var text = element.firstChild;
    var property = document.getElementById("myspan").getAttributeNode("id");
    alert("这是元素节点的返回值:"+ element.nodeValue);//本身就没有意义,这里是试验下的,返回的是null
    alert("这是文本节点的返回值:"+ text.nodeValue);//返回的是文本值  文本节点
    alert("这是属性节点的返回值:"+ property.nodeValue);//返回的是属性值,这里是id的属性值  myspan
}
</script>
</head>
<body>
<div>
<span id="myspan">文本节点</span>
</div>
</body>
</html>

3.nodeType

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload = function()
{
    var element = document.getElementById("myspan");
    var text = element.firstChild;
    var property = document.getElementById("myspan").getAttributeNode("id");
    alert("这是元素节点的返回值:"+ element.nodeType);//元素节点返回1
    alert("这是文本节点的返回值:"+ text.nodeType);//文本节点返回3
    alert("这是属性节点的返回值:"+ property.nodeType);//属性节点返回2
}
</script>
</head>
<body>
<div>
<span id="myspan">文本节点</span>
</div>
</body>
</html>

四.节点关系

​ 1.节点关系图 节点关系图

​ 2.节点间的相关属性

每个节点都有一个parentNode属性,该属性指向文档树中的父节点。对于一个节点来说,它的父节 点只可能是三种类型:element节点、document节点和documentfragment节点。如果不存在,则返 回null.

childNodes是一个只读的类数组对象NodeList对象,它保存着该节点的第一层子节点

//...(其他省略,只展示主要部分)
<ul id="myUl"><li><div></div></li>1111</ul>
<script>
var myUl = document.getElementById('myUl');
var list = myUl.childNodes       //结果是包含一个li元素和文本节点的类数组对象
                                    list[0]->1111  list[1]->li元素   
</script>

children是一个只读的类数组对象HTMLCollection对象,但它保存的是该节点的第一层元素子节点

//...(其他省略,只展示主要部分)
<ul id="myUl"><li><div></div></li>1111</ul>
<script>
var myUl = document.getElementById('myUl');
var list = myUl.children       //结果是包含一个li元素的类数组对象,,,list[0]->li    
</script>

(1)firstChild ->第一个子节点

(2)lastChild ->最后一个子节点

(3)firstElementChild ->第一个元素子节点

(4)lastElementChild ->最后一个元素子节点

(5)nextSibling ->后一个节点

(6)previousSibling -> 前一个节点

(7)nextElementSibling -> 后一个元素节点

(8)previousElementSibling -> 前一个元素节点

五、节点操作方法

​ 增删改查

​ 1.创建新节点

​ createElement

​ 2.插入节点

​ appendChild document.body.appendChild(targetElement)或者 targetElement.parentNode.appendChild(targetElement)

​ appendChild()方法用于向childNodes列表的末尾添加一个节点,并返回新增节点。添加节点后, childNodes中的新增节点、父节点和以前的最后一个子节点的关系指针都会相应地得到更新.

​ insertBefore targetElement.parentNode.insertBefore(targetElement, referenceElement)

​ insertBefore()方法接收两个参数:要插入的节点和作为参照的节点。插入节点后,被插入的节点会变成参照节点的前一个兄弟节点(previousSibling),同时被方法返回。如果参照节点是null,则insertBefore()与appendChild()方法执行相同的操作。同样地,如果插入的节点已经是文档的一部分了,那结果就是将该节点从原来的位置转移到新位置

​ insertAdjacentHTML(详细查看文档)

​ 3.移除节点

​ removeChild targetElement.parentNode.removeChild(targetElement)

​ remove targetElement.remove()

​ 相比于removeChild(),该方法不用调用其父节点,直接在当前节点使用remove()方法就可以删除该节点,无返回值

​ 4.替换节点

​ replaceChild targetElement.parentNode.replaceChild(targetElement, oldChild)

​ replaceChild()接收的两个参数是要插入的节点和要替换的节点,要替换的节点将由这个方法返回并从文档树中移除,同时由要插入的节点占据其位置

5.复制节点

​ cloneNode

​ cloneNode方法用于克隆一个节点。它接受一个布尔值作为参数,表示是否执行深复制。在参数为true时,执行深复制,也就是复制节点及整个子节点树。在参数为false的情况下,执行浅复制,即复制节点本身。复制后返回的节点副本属于文档所有,但并没有为它指定父节点。若参数为空,也相当于false 

  [注意]cloneNode()方法不会复制添加到DOM节点中的javascript属性,例如事件处理程序等。这个方法只复制特性和子节点,其他一切都不会复制

​ 6.获得节点

​ getElementById

​ getElementsByClassName

​ getElementsByTagName

六、文档碎片(documentFragment)
  1. 创建
var frag = document.createDocumentFragment()

2.现象

<div id="miki-test><div>
<script>
    var target = document.getElementById('miki-test')
    var oFrag = document.createDocumentFragment()
    var span = document.createElement('span')
    span.innerHTML = 123
    oFrag.appendChild(span)
    target.appendChild(oFrag)             //页面中只会出现被插入的span,不会出现oFrag
</script>
<div id="miki-test"><span id="text">haha</span></div>
<script>
   var text = document.getElementById('text')
   var oFrag = document.createDocumentFragment()
   oFrag.appendChild(text)           //text将从文档树中移除,然后被添加到文档碎片中
</script>
七、NodeList,HTMLCollection,NameNodeMap
//NodeList是节点集合
//NTMLCollection是元素节点集合
//NameNodeMap是属性节点集合
   <div id="box" style="width: 200px"><span>123</span>456</div>
   <script>
       var box = document.getElementById('box')
       var child = box.childNodes        //NodeList
       var children = box.children          //HTMLCollection
       var attr = box.attributes        //NameNodeMap
   </script>
八、base64编码
//步骤:
   // 1.新建一个xhr对象
    //2.设置返回类型为blob

  function toDataURL(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.onload = function() {
      var reader = new FileReader();
      reader.onloadend = function() {
        callback(reader.result);
      }
      reader.readAsDataURL(xhr.response);
    };
    xhr.open('GET', url);
    xhr.responseType = 'blob';
    xhr.send();
  }
  var img = new Image
  toDataURL('./img/618.png', function(dataUrl) {
       img.src = dataUrl
       document.body.appendChild(img)
  })
上一篇: js总结以及一些经典代码片段下一篇: iframe学习