首先getAttribute  setAttribute只能被元素节点对象调用。(属性节点和文本节点调用不了)

我们可以通过一下三种方式得到元素:

document.getElementById();//返回唯一一个元素节点
document.getElementsByTagName();//返回的是对象数组,所以Elements后面要加s,不要忘记。
document.getElementsByName(); //返回的是对象数组
document.getElementsByClassName();//较新的浏览器才支持
getAttribute()返回的是属性的值.
getAttribute()改变属性的值.
<a id='Node' href='adc'>百度</a>
var thisNode=document.getElementById('Node');//获取a元素节点
alert(thisNode.getAttribute('href'));//显示的是href属性的值:abc.
 change=thisNode.setAttribute("href","a list of goods");//把href属性的值改为:a list of goods
alert(thisNode.getAttribute("href"));//属性href的值为:a list of goods.
 

childNodes属性:可以获取任何一个元素的所有子元素(或者说任何一个节点下的所有子节点:包含文本节点 元素节点);注意返回的是数组,且Nodes有s

firstChild属性 获取的是第一个字节点.和element.childNodes[0]完全等价。

lastChild属性 获取的是最后一个子节点,和element.childNodes.[element.childNodes.length-1]完全等价

注意:节点之间的空白符,在firefox、chrome、opera、safari浏览器是文本节点

如下:

ul元素下的子节点:IE是3个,其它浏览器是7个。

DOM 1的更多相关文章

  1. 关于DOM的操作以及性能优化问题-重绘重排

     写在前面: 大家都知道DOM的操作很昂贵. 然后贵在什么地方呢? 一.访问DOM元素 二.修改DOM引起的重绘重排 一.访问DOM 像书上的比喻:把DOM和JavaScript(这里指ECMScri ...

  2. 读书笔记:JavaScript DOM 编程艺术(第二版)

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  3. 页面嵌入dom与被嵌入iframe的攻防

    1.情景一:自己的页面被引入(嵌入)至别人的页面iframe中 if(window.self != window.top){ //url是自己页面的url window.top.location.hr ...

  4. 通俗易懂的来讲讲DOM

    DOM是所有前端开发每天打交道的东西,但是随着jQuery等库的出现,大大简化了DOM操作,导致大家慢慢的“遗忘”了它的本来面貌.不过,要想深入学习前端知识,对DOM的了解是不可或缺的,所以本文力图系 ...

  5. HTML DOM 介绍

    本篇主要介绍DOM内容.DOM 节点.节点属性以及获取HTML元素的方法. 目录 1. 介绍 DOM:介绍DOM,以及对DOM分类和功能的说明. 2. DOM 节点:介绍DOM节点分类和节点层次. 3 ...

  6. HTML DOM 对象

    本篇主要介绍HTML DOM 对象:Document.Element.Attr.Event等4个对象. 目录 1. Document 对象:表示文档树的根节点,大部分属性和方法都是对元素进行操作. 2 ...

  7. 重撸js_2_基础dom操作

    1.node 方法 返回 含义 nodeName String 获取节点名称 nodeType Number 获取节点类型 nodeValue String 节点的值(注意:文本也是节点) 2.inn ...

  8. 虚拟dom与diff算法 分析

    好文集合: 深入浅出React(四):虚拟DOM Diff算法解析 全面理解虚拟DOM,实现虚拟DOM

  9. 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼?

    引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...

  10. jQuery学习之路(2)-DOM操作

    ▓▓▓▓▓▓ 大致介绍 jQuery作为JavaScript库,继承并发扬了JavaScript对DOM对象操作的特性,使开发人员能方便的操作DOM对象. ▓▓▓▓▓▓ jQuery中的DOM操作 看 ...

随机推荐

  1. Jquery 提示

    1  文字提示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

  2. Gson 和 Fastjson 你不知道的事

    背景 目前在公司负责的业务, 主要是跟JSON数据打交道, fastjson .gson都用, 他们适用于不同场景.fastjson号称是业界处理json效率最高的框架, 没有之一.但在某些场景下, ...

  3. ActionBar PopuMenu

    PopupMenu popupmenu可以非常方便得实现在指定view下弹出一个菜单,实现类似ActionBar中的效果. public void showPopupMenu(View view){ ...

  4. 分享一个客户端程序(winform)自动升级程序,思路+说明+源码

    做winform的程序,不管用没用过自动更新,至少都想过自动更新是怎么实现的. 我这里共享一个自动更新的一套版本,给还没下手开始写的人一些帮助,也希望有大神来到,给指点优化意见. 本初我是通过sock ...

  5. 从零开始学android开发-获取控件

    mBtnNews = (Button)findViewById(R.id.btn_news);//获取控件

  6. Codeforces Good Bye 2015 A. New Year and Days 水题

    A. New Year and Days 题目连接: http://www.codeforces.com/contest/611/problem/A Description Today is Wedn ...

  7. [AngularJS] Accessing Data in HTML -- controllerAs, using promises

    <!DOCTYPE html> <html> <head> <title>Access Data From HTML</title> < ...

  8. D2 前端技术论坛总结(上)

    得幸获得D2前端技术论坛门票一张,今天就去了,公司还给批假了(有可能不会算做请假,哈哈). 早上8点50出门,骑个小毛驴,大概9点30分左右,到了阿里巴巴西溪园区,很多人,进去的门口有专人接待,看D2 ...

  9. Sleep v.s. sleep

    Sleep函数_百度百科 http://baike.baidu.com/link?url=EmOxsG_du8HdLbv_9nDVlahpZOQ6DgkoLKooQInorAqIl_CEhCvBzTC ...

  10. C++面试题:list和vector有什么区别?

    原文:http://genwoxuevc.blog.51cto.com/1852984/503337 C++面试题:list和vector有什么区别?考点:理解list和vector的区别出现频率:★ ...