HTML-DOM (知识梳理)

WEB前端 waitig 448℃ 百度已收录 0评论

HTML-DOM

标签(空格分隔): 未分类


1.1 DOM概念

当创建一个网页并将它加载到浏览器中时,DOM在幕后就悄然发生,它把你编写的网页转换为一个文档对象。(可以简单想下:在没有DOM的情况下,html就是一个字符串)
DOM提供一套操作页面元素的API,DOM可以把html文档看作树的模型,通过其提供的方法可以对树上的节点进行操作。

javascript的对象可以分为三种类型
– 用户定义对象:有程序员自行创建的对象
– 内建对象:内建在javascript里的对象,如Array Math Date等
– 宿主对象:由浏览器提供的对象,当中最基础的对象时 Window对象

DOM又称文档树模型
-文档:一个网页可以称为一个文档(通过DOM解析成的)
-节点:网页中所有的内容都是节点(标签,属性,文本,注释)
-元素:网页中的标签
-属性:标签的属性

1.2 DOM-Core 与 HTML-DOM

DOM-Core 即核心DOM,DOM规范中的通用标准,DOM 结构不是html独有的,
很多数据格式都是DOM结构。

DOM-Core的原则,将页面中所有的内容看成对象,所有的对象只有父子和兄弟的关系

  • 创建:documnet.createElement(标签), document.createTextNode(文本), document.createAttribute(属性)
  • 添加:node.appendChild, node.insertBefore, node.setAttributeNode
  • 删除:node.removeChild
  • 修改(属性):nodeValue, nodeName, nodeType, getAttribute,
    setAttribute,removeAttribute
  • 查询:
    • document.get * by * 系列
    • document.query * 系列
    • parentNode
    • childNode
    • firstChild
    • lastChild
    • nextSibling
    • previousSibling

由于DOM-Core操作繁琐,所以引用了专门适用于 html的 HTML-DOM;

1.3 节点

节点 这个词是个网络术语,它表示网络中的一个连接点。一个网络就是由一些节点构成的集合。
同样DOM中文档是由节点构成的集合,在DOM里有许多不同类型的节点,就像原子包含亚原子微粒那样,也有很多类型的DOM节点包含其他类型的节点。

  1. 元素节点 element node
    DOM的原子是元素节点。这些元素在文档中的布局形成了文档的结构。
    节点树的根元素;

  2. 文本节点 text node
    在XHTM文档里,文本节点总是被包含在元素节点内部。但并非所有的元 素节点包含有文本节点 。

  3. 属性节点 attribute node
    属性节点用来对元素做出更具体的描叙,所有属性都被元素包裹。
    (DOM并不是与网页结构打交道的唯一技术,我们还可以通过层叠样式表css告诉浏览器如何显示一份文档的内容,继承是CSS技术中的一项强大的功能类似于DOM,CSS也把文档内容视为一颗节点树,节点树的各个元素将继承其父元素的样式属性)

1.4 获取元素

我们要想操作页面上某部分,需要先获取到该部分对应的元素,才能进行后续操作,有4种DOM方法可以获取到元素节点,通过id,标签名,类名,选择器(documnet对象)。

  • getElementByID
  • getElementsByTagName (注意:返回的是一个对象伪数组)
  • getElementsByClassName (HTML5中新增 返回的是伪数组)
  • querySelector / querySelectorAll (返回伪数组)

1.5 获取和设置属性

get/set Attribute 与 点语法的区别:

  1. 标签固有属性,对应的DOM对象也有该属性,这些属性是一一对应的,只要修改了对象的属性,标签的属性也就跟着修改了。
  2. 若果是自定义属性(非标准属性),对应的对象是不存在的,只有固有属性才存在于对象。
  3. attribute方法用于直接添加或修改标签的属性,无论是固有还是非标准的属性
  4. .语法是对标签对应对象添加或修改属性,可以改变标签的固有属性(标准属性),但无法操作标签的非标准属性

DOM工作模式:

这里有一个非常值得注意的细节:通过setAttribute对文档做出修改后,不会放映在文档本身的源代码里,这种‘表里不一’的现象源于DOM的工作模式:先加载文档的静态内容,再动态刷新,动态刷新不会影响文档的静态内容,这正是DOM真正的威力,对页面内容进行刷新却不需要在浏览器中刷新页面

1.6标签的内容属性

innerText和innerHTML属性都是用来获取和设置标签内容的。但二者还是有去别的。

innerHTML:内部的html

  • 获取标签内容的时候,不管是标签还是文本,都能获到。
  • innerHTML设置内容的时候,覆盖原来内容,标签也能生效,浏览器能解析这个标签。

innerText : 内部文本

  • 获取标签内容时,会扔掉标签,只获取文本。
  • 设置标签内容时,会覆盖原来的内容,对标签进行转义。

二者的区别

  • innerHTML是w3c的标准属性,而innerText是IE提出来的属性,存在兼容性的问题,因此推荐使用。
  • innerText的作用:防止xss的攻击。
  • 1.innerText是IE提出来的属性,因此低版本的火狐不支持这个属性。
  • 2.火狐有一个innerContent属性,效果一样。

1.7 节点操作

1.7.1 节点的属性

节点分类:元素节点,文本节点,属性节点,注释节点
节点常用属性:
– nodeType 节点类型 元素节点的nodeType为1
– nodeName 节点名称
– nodeValue 节点值

1.7.2 节点的层次

  • 孩子节点

    //childNodes:获取所有的孩子节点(包括元素节点和其他类型的节点)
    //children:获取所有的子元素
    //firstChild:第一个节点  (lastChild)
    //firestElementChild:第一个子元素  有兼容性 (lastElementChild)
    
  • 兄弟节点
    //nextSibling:下一个兄弟节点  (previousSibling)
    //nextElementSibling:下一个兄弟元素 (IE678不兼容)(previosuElementSibling)
  • 父节点
 //parentNode:父节点  没有兼容性问题

1.7.3 克隆节点

语法: var newNode =node.cloneNode(deep)
功能: 在内存中克隆一份节点
参数: deep
– false : 默认值,浅复制,只会复制标签本身,不会复制节点的孩子。
– true : 深度复制,会复制标签的所有内容。

1.7.4 添加节点

appendChild
语法:parent.appendChild(newChild)
parent:调用者,父节点来调用
newChild:需要添加的那个孩子。
作用:把newChild添加到parent的孩子的最后面。

insertBefore
语法:parent.insertBefore(newChild, refChild);
parent:必须要父节点来调用
newChild:需要添加的那个节点
refChild:添加到哪一个节点的前面。

1.7.5 创建节点

1.document.write(基本不用)

document.write('新设置的内容<p>标签也可以生成</p>');

2.innerHtml

var box = document.getElementById('box');
box.innerHTML = '新内容<p>新标签</p>';
//innerHTML创建节点的时候有一个特点,如果原来有内容的话,使用innerHTML会把原先的内容给干掉。
//慎用:很容易出现效率问题。

3.createElement

var div = document.createElement('div');
document.body.appendChild(div);

4.性能问题

  • innerHTML方法由于会对字符串进行解析,需要避免在循环内多次使用。
  • 可以借助字符串或数组的方式进行替换,再设置给innerHTML
  • 优化后与document.createElement性能相近

1.7.6 删除节点

语法:parent.removeChild(child);
功能:有父盒子调用,删除里面的一个子元素。


本文由【waitig】发表在等英博客
本文固定链接:HTML-DOM (知识梳理)
欢迎关注本站官方公众号,每日都有干货分享!
等英博客官方公众号
点赞 (0)分享 (0)