JS七.....

1.获取文档对象。

a.querySelector():通过传入合法的CSS选择器,即可获取符合条件的第一个元素。

document.querySelector("#test");    //返回id为test的首个元素;

b.querySelectorAll():通过传入合法的CSS选择器,即可获取所有符合条件的元素,返回对象数组。

document.querySelectorAll("div.foo");       //返回所有带有foo类样式的div元素

注意:上述两个方法无法查找到带有伪类状态的元素,比如:querySelector(":hover")不会得到期望的结果。

c.getElementById():返回一个与给定id属性值的元素节点相对应的对象。

document.getElementById(‘box‘);

d.getElementsByTagName():返回一个对象数组。每个对象分别对应着文档里给定标签的一个元素。

document.getElementsByTagName(‘li‘);

e.getElementByName():通过name获取一个对象数组。

2.间接引用节点。

a.引用子节点:每个节点都有一个childNodes集合属性,类型是数组对象。表示该节点的所有子节点的集合。这些子节点按照其在文档中出现的顺序排列,因此可以通过索引来依次访问各个子节点。

document.childNodes[0];  //文档头声明;
document.childNodes[1]; //文档根对象;
document.childNodes[1].childNodes[0];  //引用<head>节点;
document.childNodes[1].childNodes[1]; //引用<body>节点;

除了childNodes属性,还有两个属性可以用于引用子节点,分别是:element.firstChild;和elementlastChild;它们分别表示了第一个子节点和最后一个子节点。

b.引用父节点:html的节点层次是一个树状结构,除了根节点,每个节点都仅有一个父节点,可以由parentNode属性来应用。

element.parentNode;//引用父节点

c.引用兄弟节点:属于同一个文档层次的节点称为兄弟节点,有两个属性可以用于兄弟节点间。

element.nextSibling;//引用下一个兄弟节点;

element.previousSibling;//引用上一个兄弟节点;

3.获取节点信息:在获得一个节点的引用后,有一些方法可以获得该节点的信息。

a.nodeName:获取节点名称。语法:Node.nodeName;

不同类型的节点,nodeName的返回值有所差异:

元素节点:返回标记名称;

属性节点:返回属性名称;

文本节点:返回文本。

b.nodeType:获取节点类型。语法:Node.nodeType;

元素节点:返回1

属性节点:返回2

文本节点返回:返回3

c.nodeValue:获取节点的值。语法:Node.nodeValue;

元素节点:返回null;

属性节点:返回节点值;

文本节点:返回文本的内容;

4.处理属性节点。

a.getAttribute获取属性节点属性值:object.getAttribute(attribute);

var a = document.getElementByTagName(‘a‘);
for(var i = 0;i < a.length;i++) {
     alert(a.[i].getAttribute(‘title‘));
}

b.setAttribute设置节点属性值:object.setAttribute(attribute,value)

var link = document.getElementById(‘link‘);
      link.setAttribute(‘title‘,‘连接提示信息‘);

5.处理文本节点。

a.node.innerHTML:获取该节点下的包含HTML标签的文本内容。(包含标签的文本)。

var body = document.querySelector(‘body‘);
        alert(body.innerHTML);

b.node.textContent:获取该节点下的纯文本内容。

var body = document.querySelector(‘body‘);
      alert(body.textContent);

6.因浏览器而异的空白节点:ie浏览器和火狐浏览器对空白节点的处理方式不同,ie浏览器会忽略这些节点,而火狐浏览器则认可这些节点。

处理方法:1.避免在文档中出现文本节点。2.在使用前先删除其中的空白节点。

function cleanWhitespace(element){

for(var i = 0; i < element.childNodes.length;i++) {

  var node = element.childNodes[i];

  //判断是否是空白节点,如果是则删除该节点

  if(node.nodeType == 3 &&  /\S/.test(node.nodeValue)) {

  node.parentNode.removeChild(node);

}

}

}

时间: 2024-09-30 18:02:03

JS七.....的相关文章

node.js(七) 子进程 child_process模块

众所周知node.js是基于单线程模型架构,这样的设计可以带来高效的CPU利用率,但是无法却利用多个核心的CPU,为了解决这个问题,node.js提供了child_process模块,通过多进程来实现对多核CPU的利用. child_process模块提供了四个创建子进程的函数,分别是spawn,exec,execFile和fork. 1.spawn函数的简单用法 spawn函数用给定的命令发布一个子进程,只能运行指定的程序,参数需要在列表中给出.如下示例: var child_process

JS(七)

JS又上完了,还是感觉JS技巧性很强,需要多积累经验...看了一下PHP的内容,感觉搭建环境好麻烦,结果回来下了个wamp感觉好像就可以了..... 1.红绿蓝颜色条: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>网页背景颜色控制2</title> <script type="text

Node.js(七)——HTTP作用域、上下文

http源码解读 什么是作用域? 作用域和调用函数访问变量的能力有关 作用域分局部作用域和全局作用域,同时作用域往往和变量有关系, 处在局部作用域里面可以访问到全局作用域的变量,反之则访问不到 实例如下: var globalVariable = 'This is global variable' function globalFunction(){ var localVariable ='This is local variable' console.log('Visit global/loc

dedecms织梦七牛云存储二次开发

DeDeCMS(织梦)整合七牛云储存的优势1.节省自身服务器带宽.流量.储存空间,因为使用七牛云前端JS SDK上传到七牛云.2.提高网站加载速度,因为大部分的流量由七牛云分发,减少了自身服务器带宽的占用,七牛云的CDN比普通的自建服务器还是要快的.3.不破坏系统兼容性,可以后台配置储存位置,如果哪天想用回自己服务器储存图片,只需要修改一个网站后台选项即可.DeDeCMS(织梦)整合七牛云储存思路在编辑文章前,通过网站后台设置图片储存位置(七牛云或者自己服务器),然后获取对应的图片地址.对DeD

利用nginx concat模块合并js css

前言: nginx-http-concat模块是由淘宝网开发的,现在淘宝网合并js和css正是用这个模块,如链接http://a.tbcdn.cn/??s/kissy/1.2.0/kissy-min.js,p/global/1.0/global-min.js,p/fp/2012/core.js,p/fp/2012/fp/module.js,p/fp/2012/fp/util.js,p/fp/2012/fp/directpromo.js?t=2012080620120924.js就是合并了kiss

从零开始用gulp

gulp是基于流的前端构件化工具.目前比较火的前端构建化工具还是挺多的,grunt gulp fis3等等. 这个鬼东西有什么用?请参考https://www.zhihu.com/question/35595198 为什么选择gulp,因为使用非常简单,学习成本低.以后想用别的工具再转去学也不难. 一个自动化构建工具都没用过的前端,何以谈人生? 以下是正题: 1.要玩gulp,首先得安装node,因为npm跟随node的包安装管理工具.具体下载直接百度nodejs中文网,根据自身的环境(wind

10个国内外jQuery的CDN性能大比拼

jQuery是前端开发最常见也是最流行的javascript库,如何去加载它才能使我们的项目性能更好以及问什么要用CDN?当用户访问自己的站点时从服务器加载文件,每个服务器同时只能下载2-4个文件,这样就会降低文件的执行效率,如果多用几个服务器,这样同时加载文件的个数就是(2-4)*服务器个数,所以我们把jQuery放到CDN上就是为了提高网站加载文件的效率.下面就讲讲常用的jQuery的CDN CDN介绍: 百度百科上是这样介绍的: CDN的全称是Content Delivery Networ

使用四种框架分别实现百万websocket常连接的服务器

著名的 C10K 问题提出的时候, 正是 2001 年.这篇文章可以说是高性能服务器开发的一个标志性文档,它讨论的就是单机为1万个连接提供服务这个问题,当时因为硬件和软件的**,单机1万还是一个非常值得挑战的目标.但是时光荏苒,随着硬件和软件的飞速发展,单机1万的目标已经变成了最简单不过的事情.现在用任何一种主流语言都能提供单机1万的并发处理的能力.所以现在目标早已提高了100倍,变成C1000k,也就是一台服务器为100万连接提供服务.在2010年,2011年已经看到一些实现C1000K的文章

node-inspector调试工具应用

一.起因 想调试某些开源的nodejs项目,然后就选择了node-inspector插件. 他的优点: 1.可以借用chrome或firefox浏览器进行调试,与前端调试融合. 2.配置简单 二.必备工具 1.node-inspector安装命令:npm install –save-dev node-inspector 三.编写需要测试代码 本例代码如下(文件名为app.js): var http = require('http'); var cHttp = http.createServer(