你不知道的JavaScript--DOM基础详解2

转载：http://blog.csdn.net/i10630226/article/details/49785165

先上几张图简要看看DOM的一些方法属性：

大概这些就是常用的，下面具体聊聊。

节点类型的判断

其中元素节点Element的判定最为重要，下面给出4个主要的方法；

1、如何判断节点是元素节点

可以用isElement()方法

<div id="test">aaa</div>
<!--这是一个注释节点-->
<script>
var isElement = function (el){
    return !!el && el.nodeType === 1;
}
var a = {
   nodeType: 1
}
console.log(isElement(document.getElementById("test")));//true
console.log(isElement(document.getElementById("test").nextSibling));//false

//但是很容易伪造一个假的“对象节点”
console.log(isElement(a));
</script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

所以要避免这个的伪造，可以重写isElement()方法

<div id="test">aaa</div>
<!--这是一个注释节点-->
<script>
var testDiv = document.createElement(‘div‘);
var isElement = function (obj) {
    if (obj && obj.nodeType === 1) {//先过滤最简单的
        if( window.Node && (obj instanceof Node )){ //如果是IE9,则判定其是否Node的实例
            return true; //由于obj可能是来自另一个文档对象，因此不能轻易返回false
        }
        try {//最后以这种效率非常差但肯定可行的方案进行判定
            testDiv.appendChild(obj);
            testDiv.removeChild(obj);
        } catch (e) {
            return false;
        }
        return true;
    }
    return false;
}
var a = {
   nodeType: 1
}
console.log(isElement(document.getElementById("test")));
console.log(isElement(document.getElementById("test").nextSibling));
console.log(isElement(a));
</script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26

2、如何判断节点是html或xml元素节点

XML与html对象均支持createElement（）方法，通过比较创建的元素时传入参数的【大小写】不同的情况下，元素的nodeName是否相同来判断是哪一种文档对象。如果nodeName相同则为html对象，反之为XML对象。

1、首先看一下Sizzle, jQuery自带的选择器引擎

//Sizzle, jQuery自带的选择器引擎
var isXML = function(elem) {
    var documentElement = elem && (elem.ownerDocument || elem).documentElement;
    return documentElement ? documentElement.nodeName !== "HTML" : false;
};
console.log(isXML(document.getElementById("test")));

//但这样不严谨，因为XML的根节点，也可能是HTML标签，比如这样创建一个XML文档
try {
    var doc = document.implementation.createDocument(null, ‘HTML‘, null);
    console.log(doc.documentElement);
    console.log(isXML(doc));
} catch (e) {
    console.log("不支持creatDocument方法");
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

2、我们看看mootools的slick选择器引擎的源码：

var isXML = function(document) {
  return (!!document.xmlVersion) || (!!document.xml) || (toString.call(document) == ‘[object XMLDocument]‘)
          || (document.nodeType == 9 && document.documentElement.nodeName != ‘HTML‘);
};

//精简版
var isXML = window.HTMLDocument ? function(doc) {
  return !(doc instanceof HTMLDocument);
} : function(doc) {
  return "selectNodes" in doc;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

3、自己实现的方法—最简单

var isXML = function(doc) {
    return doc.createElement("p").nodeName !== doc.createElement("P").nodeName;
}
  • 1
  • 2
  • 3

那接下来判断html节点时，就非常简单了

var isHTML = function(doc) {
   return doc.createElement("p").nodeName === doc.createElement("P").nodeName;
}
console.log(isHTML(document));
  • 1
  • 2
  • 3
  • 4

3、判断节点间的包含关系：

现代浏览器可以用contains()方法，aNode.contains(bNode)判断是否包含a>b。

<div id="p-node">
    <div id="c-node">子节点内容</div>
</div>
<script>
    var pNode = document.getElementById("p-node");
    var cNode = document.getElementById("c-node").childNodes[0];

    alert(document.contains(pNode));//但是在IE8浏览器不支持
    alert(pNode.contains(cNode));
</script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

但IE不支持文档类型节点和文本类型节点包含关系的判断，可以自定义实现一个兼容各浏览器的判断方法。

自定义实现fixContains()方法是对这个问题的修复。

  <div id="p-node">
<div id="c-node">子节点内容</div>
</div>
<script>
//判断节点a包含节点b的方法，即a和b的父节点比较；
function fixContains(a, b) {
    try {
        while ((b = b.parentNode)){
            if (b === a){
                return true;
            }
        }
        return false;
    } catch (e) {
        return false;
    }
}
var pNode = document.getElementById("p-node");
var cNode = document.getElementById("c-node").childNodes[0];
alert(fixContains(pNode, cNode));
//alert(fixContains(document, cNode));
</script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

节点继承层次与嵌套规则

1、DOM节点继承层次

1、文本节点继承层次—-有6层关系

2、元素节点继承层次—-有7层关系 

console.log(Object.getOwnPropertyNames(document.createElement("p").__proto__));//第一层有两个属性
console.log(Object.getOwnPropertyNames(document.createElement("p").__proto__.__proto__));//第二层有82个属性
  • 1
  • 2

1个空div的自有属性有如此之多

所以就有了现在的一些MVVM框架来管理这些DOM节点层次，比如reactjs 虚拟dom加速。

2、HTML嵌套规则

1、块状元素和内联元素

块状元素

一般是其他元素的容器，可容纳内联元素和其他块状元素，块状元素排斥其他元素与其位于同一行，宽度(width)高度(height)起作用。

常见块状元素块级元素—h1,h2,h3,h4,h5,h6,hr,div,fieldset,form,dl,address,ol,p,table,ul,pre等

block元素的特点：

    1. 总是另起一行开始；
    1. 高度，行高以及顶、底边距都可控制；
    1. 宽度缺省是它所在容器的100%，除非设定一个宽度。

内联元素

内联元素只能容纳文本或者其他内联元素，它允许其他内联元素与其位于同一行，但宽度(width)高度(height)不起作用。

常见内联元素为—a,b,br,em,i,img,input,strong,textarea,span,label等常见

inline元素的特点：

    1. 和其它元素都在一行上；
    1. 高度，行高以及顶、底边距不可改变；
    1. 宽度就是它所容纳的文字或图片的宽度，不可改变。

他们两个的区别：

  1. 块级元素一般用来搭建网站架构、布局、承载内容
  2. 内联元素一般用来在网站内容中的某些细节或者部位，用以“强调、区分样式、上标、下标、锚点”等等。
  3. 它们可以互相转换。display:inline|block
  4. 块级元素的特点：每一个块级元素都识从一个新行开始显示，其后的元素需要另起一行

好了 简单地说了一下块级元素和内联元素，下面我们开始我们的重点—–嵌套规则：

3、嵌套规则

块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。
块级元素不能放在p里面。
有几个特殊的块级元素只能包含内联元素，不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt
li内可以包含div
块级元素与块级元素并列、内联元素与内联元素并列。（错误的：<div><h2></h2><span></span></div>）

一张图了解OUTHTML和innerText、innerHTML：

时间： 2024-10-13 10:10:41

你不知道的JavaScript--DOM基础详解2的相关文章

JavaScript学习--Item29 DOM基础详解

看完JavaScript高级程序设计,整理了一下里面的DOM这一块的知识点,比较多,比较碎!DOM在整个页面的地位如图: DOM(文档对象模型)是针对HTML 和XML 文档的一个API(应用程序编程接口).DOM描,绘了一个层次化的节点树,允许开发人员添加.移除和修改页面的某一部分. 1.节点层次 DOM 可以将任何HTML 或XML 文档描绘成一个由多层节点构成的结构.节点分为几种不同的类型,每种类型分别表示文档中不同的信息及(或)标记.每个节点都拥有各自的特点.数据和方法,另外也与其他节点

DOM基础详解

​认识DOM  是什么: 文档对象模型  为什么: W3C推出,为了兼容浏览器,替代DHTML     文档类型: GML:通用标记语言 SGML:标准通用标记语言  HTML:超文本标记语言,用于显示数据 XML:可扩展标记语言,用于描述数据 节点  节点类型: 基础: 元素节点1.属性节点2.文本节点3 注释节点8 文档: 文档节点9.文档类型节点10.文档片段节点11  节点属性: nodeType nodeName nodeValue  元素节点类型的判断: isElement 判断条件

javascript dom 操作详解 js加强

js加强操作实现代码. 1 .文档里的每个节点都有属性 nodeName . nodeValue . nodeType nodeName 文本节点的的节点名是 #text , nodeName 是只读属性 nodeValue 1 元素节点 2 属性节点 3 文本节点 只读属性 nodeType 不能用于元素节点 返回 null 2 . getElementsByTagName 返回一个节点集合 3 . firstChild . lastChild 第一个元素节点,最后一个元素节点 4 . chi

dom对象详解--document对象(二)

   dom对象详解--style对象 style对象 style对象和document对象下的集合对象styleSheets有关系,styleSheets是文档中所有style对象的集合,这里讲解的重点是style对象,styleSheets不是重点. style对象定义:Represents the current settings of all possible inline styles for agiven element,即表示当前元素的样式设置. 例,可拖动的窗口 <!DOCTYP

JavaScript 运行机制详解

JavaScript 运行机制详解——转载: 一.为什么JavaScript是单线程? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事.那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊. JavaScript的单线程,与它的用途有关.作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM.这决定了它只能是单线程,否则会带来很复杂的同步问题.比如,假定JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另

HAProxy：基础详解

一.简介 HAProxy提供高可用性.负载均衡以及基于TCP和HTTP应用的代理,支持虚拟主机,它是免费.快速并且可靠的一种解决方案.HAProxy特别适用于那些负载特大的web站点,这些站点通常又需要会话保持或七层处理.HAProxy运行在时下的硬件上,完全可以支持数以万计的并发连接.并且它的运行模式使得它可以很简单安全的整合进您当前的架构中, 同时可以保护你的web服务器不被暴露到网络上. HAProxy实现了一种事件驱动.单一进程模型,此模型支持非常大的并发连接数.多进程或多线程模型受内存

dom对象详解--document对象

 document对象 Document对象代表整个html文档,可用来访问页面中的所有元素,是最复杂的一个dom对象,可以说是学习好dom编程的关键所在. Document对象是window对象的一个成员属性,通过window.document来访问,当然也可以直接使用document. document对象常用的函数和属性可参考http://www.w3school.com.cn/jsref/dom_obj_document.asp. getElementById() 返回对拥有指定 ID

haproxy 基础详解 及 动静分离的实现

haproxy 介绍 1 工作在ISO 七层 根据http协议(或者工作在ISO四层 根据tcp协议) 提供web服务的负载均衡调度器 负载均衡调度器分类 工作在四层: # lvs 工作在七层: # nginx (web,http reverse proxy,cache) # haproxy (http reverse proxy,tcp proxy) # tcp: 实现MySQL的读写中读的负载均衡 # ats (apache traffic server) # perlbal # pound

[转]JavaScript异步机制详解

原文: https://www.jianshu.com/p/4ea4ee713ead --------------------------------------------------------------------------- 学习JavaScript的时候了解到JavaScript是单线程的,刚开始很疑惑,单线程怎么处理网络请求.文件读写等耗时操作呢?效率岂不是会很低?随着对这方面内容的了解和深入,知道了其中的奥秘.本篇文章就主要讲解一下JavaScript怎么处理异步问题. 一.同

代码示例：一些简单技巧优化JavaScript编译器工作详解，让你写出高性能运行的更快JavaScript代码

告诉你一些简单的技巧来优化JavaScript编译器工作,从而让你的JavaScript代码运行的更快.尤其是在你游戏中发现帧率下降或是当垃圾回收器有大量的工作要完成的时候. 单一同态: 当你定义了一个两个参数的函数,编译器会接受你的定义,如果函数参数的类型.个数或者返回值的类型改变编译器的工作会变得艰难.通常情况下,单一同态的数据结构和个数相同的参数会让你的程序会更好的工作. function example(a, b) { // 期望a,b都为数值类型 console.log(++a * +