JavaScript的理解记录(5)

---接上篇:

三、DOM解析:

    1、Document Object Model(DOM):是表示和操作HTML和XML文档内容的基础API;其中几个重要的类有:Document和Element,Text,这三个也是Node的其中几个子类; 

2、文档元素的选取:返回值是Element或Element组成的数组NodeList;

通过ID :      document.getElementById(‘id‘);

          通过name:       document.getElementsByName(‘name‘);

        通过tagName:      document.getElementsByTagName(‘span‘);

        通过CSS类:    document.getElementsByClassName(‘c1 c2 c3‘);

                 //参数中class有多个时,只关心名称,顺序无关紧要;

通过CSS选择器:  document.querySelectorAll()和document.querySelector() 参数是包含一个CSS选择器的字符串参数,返回一个NodeList对象或Element;功能与JQuery类库中的$()相似,两者参数相同,不同的是:$()返回值为一个JQuery对象表示匹配的元素集,JQuery对象是一个类数组,可以用标准的数组标示方括号来访问JQuery对象的内容;也可以用toArray()方法来将JQuery对象转化为真实的数组; 参数举例:1、ID: #nav 2、 标签名:div 3、class属性值:.success 4、基于属性值:input[name=‘button‘]; 5、组合使用:span.fatal.error //其class中包含fatal和error的所<span>元素;

     3、 文档结构:作为节点树的解析(还有一种是作为元素树解析,将文档看做Element对象树,忽略Text和Comment节点)

          节点Node对象主要以下几个重要属性:

           1、parentNode: 父节点,没有为null;

           2、childNodes  : 节点的子节点的实时表示,值为NodeList对象;

           3、firstChild,lastChild:节点的子节点的第一个和最后一个节点,没有为null;

             4、nextSibling和previousSibling: 节点的兄弟节点的前一个和后一个;

           5、nodeType: 该节点类型; 9代表Document节点 1代表Element节点 3代表Text节点,8代表comment节点;

             6、nodeValue:Text节点的文本内容;

           7、nodeName: 元素的标签名,大写;

             8、attributes : 元素的所有属性,只读的类数组对象;

    4、元素内容:依据Element不同属性获取不同内容;

         innerHTML : 元素的内容作为字符串返回;

         outerHTML :返回的字符包含查询元素的开头和结尾标签;(HTML5才有且FireFox浏览器不支持)

         textContent: 返回纯文本;IE不支持

           innerText:也是返回纯文本,但不返回<script>元素的内容;FireFox不支持;

    5、 节点的增删:操作文档进行文档节点的增加和删除

          

时间: 2024-10-19 03:30:25

JavaScript的理解记录(5)的相关文章

JavaScript的理解记录(4)

客户端JavaScript:客户端就是Web浏览器; 一. 前奏: Web文档(document):一些呈现静态信息的页面,虽然有的页面是会动的,但信息本身还是静态! Web应用:可以动态载入信息,相比与文档的文本化,应用看起来更加图形化: 客户端JavaScript的三个重要的对象:Window Document和Element:Window是全局对象,它的属性和方法是全局变量和全局函数,其中里面的属性location指向Location对象,Location对象指定当前窗口的URL:属性do

JavaScript的理解记录

1.JavaScript的数据类型分为两类:原始类型和对象类型: 原始类型包括:数字,字符串,布尔值,null和undefined; (都是不可变类型,值不可以修改) 对象类型:普通对象和函数: 函数可使用new新建对象,即构造函数:每个构造函数定义了一类对象--由构造函数初始化的对象组成的集合: 类可以看做是对象类型的子类型,javascript语言定义的类主要有:数组Array,函数Function,日期Date 正则RegExp: var pattern=/s$/ 等价于 var patt

JavaScript实现按键记录,并在关掉网页之前把记录的内容post出去

最近陈老师让我给新架构加一个按键记录的业务.去学习了JavaScript,网上找了一些代码,最后写出来了: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD><TITLE>js 按键记录</TITLE> <META NAME="Generator" CONTENT="EditPlus&quo

【JavaScript】理解与使用Javascript中的回调函数

在Javascript中,函数是第一类对象,这意味着函数可以像对象一样按照第一类管理被使用.既然函数实际上是对象:它们能被“存储”在变量中,能作为函数参数被传递,能在函数中被创建,能从函数中返回. 因为函数是第一类对象,我们可以在Javascript使用回调函数.在下面的文章中,我们将学到关于回调函数的方方面面.回调函数可能是在Javascript中使用最多的函数式编程技巧,虽然在字面上看起来它们一直一小段Javascript或者jQuery代码,但是对于许多开发者来说它任然是一个谜.在阅读本文

javascript深入理解js闭包(看了挺多的,感觉这篇比较透彻)

闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量. Js代码 var n=999; function f1(){ alert(n); } f1(); // 999 另一方面,在函数外部自然无法读取函数内的局部变量. Js代码 function

.Net Collection的一些理解——记录一次向实习生的答疑

公司最近进了个实习生,每天下班前我都会花一些时间来解答一下实习生的一些疑问.今天问起了关于集合排序方法Sort的一些疑问,这让我一下回到自己刚刚入行的时候.那个时候也遇到了集合排序的问题,为发现接口IComparable和ICompare的妙处而兴奋,还在公司的内部分享会上分享了如何使用它们来排序.现在经过多年的开发实践以及学习,对于同一个问题又有了更加深入的理解. 一. 为什么说”实现了IEnumerable接口才能遍历” 实习生先是问了这个问题, 其实这个问题, 非常容易解答.先来看看IEn

JavaScript ——闭包理解

昨天晚上听别人谈起闭包这个东西,虽然对js有一点了解但却丝毫没有印象,今天也没什么事就顺便研究了一下满足好奇宝宝.整合于网上的理解,记录一下. 一.闭包的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 全局作用域 局部作用域 :一个 function 形成一个独立的作用域, 而且方法作用域还能够嵌套. 与别的语言不同的是: 花括号({})不能形成一个独立的作用域, 例如Java中的作用域. 下面我们举例说说作用域 1 var m = 1; 2 function f(){

javascript深入理解js闭包

一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量. Js代码 var n=999; function f1(){ alert(n); } f1(); // 999 另一方面,在函数外部自然无法读取函数内的局部变量. Js代码 function f1(){ var n=999; } alert(n); // error 这里有一个地方需要注意,函数

【温故而知新-Javascript】理解 DOM

DOM(Document Object Model,文档对象模型)允许我们用 JavaScript 来探查和操作 HTML 文档里的内容.它对于创建丰富性内容而言是必不可少的一组功能. 1. 理解文档对象模型 DOM 是一组对象的集合,这些对象代表了HTML文档里的各个元素.顾名思义,DOM就像一个模型,它由代表文档的众多对象组成. 先来个简单的HTML文档的例子: <!DOCTYPE html> <html> <head> <meta name="au