2016.01.05 DOM笔记(一)

DOM节点的种类

  元素和标签是一个意思,例如<body>标签或者称为<body>元素

  节点DOM的节点分为三类  元素节点,文本节点,属性节点

  例如

  <div id=‘box’>例子</div>  其中元素节点就是指这个div,文本节点就是指‘例子’这个文本,属性节点是指id

查找和定位节点

  查找元素JS提供的几种方法:

    1. getElementById()      
      document.getElementById()
      DOM操作必须要等到HTML文档加载完毕才能进行
      怎样获取?
      (1)把含有DOM操作的<script>标签移后
      (2)使用onload事件
      window.onload = function(){
      //里面存放需要页面加载完毕后才要执行的代码
      }
      例如:
      window.onload=function(){
      var OneBox = document.getElementById(‘box‘);
      }
    2. OneBox.tagName 获取元素节点的标签名字
    3. OneBox.innerHTML 获取元素内的纯文本 注意纯文本的含意 包含HTML标签  是文本内容而不是文本节点
    4. OneBox.id 获取id值
    5. OneBox.title 获取title值
    6. OneBox.style 获取style属性对象  如果想获取stley对象则需要类似这样获取:OneBox.style.css
    7. OneBox.className 获取css的class名字  即获取元素节点class属性的值

  查找文本

  查找属性 

时间: 2024-08-09 22:01:54

2016.01.05 DOM笔记(一)的相关文章

[官方软件] Easy Sysprep v4.3.29.602 【系统封装部署利器】(2016.01.22)--skyfree大神

[官方软件] Easy Sysprep v4.3.29.602 [系统封装部署利器](2016.01.22) Skyfree 发表于 2016-1-22 13:55:55 https://www.itsk.com/forum.php?mod=viewthread&tid=362766&highlight=Easy%2BSysprep [官方软件] Easy Sysprep v4.3.29.602 [系统封装部署利器](2016.01.22) [Easy Sysprep]概述:Easy Sy

2016年12月笔记

分享12306抢票心得-终极秒杀思路篇 http://www.cnblogs.com/guozili/p/6144561.html 解析12306订票流程 http://blog.csdn.net/lzqwebsoft/article/details/18674635 Linux C语言编程基本原理与实践 http://www.imooc.com/learn/248?from=itblog Linux达人养成计划 I http://www.imooc.com/learn/175?from=itb

2016.01工作日志

2016.01.01 元旦在家,八点醒,开始继续阅读「30日でできる!OS自作入門」.主要目的,加深对os和cpu的理解.另外花些时间又重温王爽的<汇编语言>.今天,最大收获还是感官上体会系统底层:比如往内存xxxx里写入0或者1就可以实现操作系统对xxxx部件的控制.另外,看到了「30日でできる!OS自作入門」中自制操作系统的内存图,就可以知道,内存这种东西,就是操作系统,或者cpu规划的.内存本身是不分段的.内存的哪一段是ram哪一段是bios显卡,改变其地址值就可以实现特定效果. 对于这

DOM笔记(十):JavaScript正則表達式

一.RegExp ECMAScript通过RegExp类型类支持正則表達式,语法和Perl类似: var exp = /pattern/flags; patternb部分是不论什么简单的或复杂的正則表達式:flags是每一个正則表達式所带的一个或者多个标志. 正則表達式的模式匹配支持三个标志: g:全局模式,即模式应用于整个字符串.而非在发现第一个匹配项时马上停止 i:不区分大写和小写模式 m:多行模式,即到达一行文本末尾是还会继续茶查找下一行中是否存在与模式匹配的项. 1.创建正則表達式 Ja

Cheatsheet: 2014 05.01 ~ 05.31

Web Choosing a Web Framework/Language Combo for the Next Decade Optimizing NGINX and PHP-fpm for high traffic sites The Absolute Beginner's Guide to Node.js Node.js Performance Tip of the Week: CPU Profiling Improved JavaScript Intellisense in Visual

DOM笔记(四):HTML 5 DOM复杂数据类型

HTML 5 DOM定义了一下集合.列表等复杂的数据类型用于实现便捷的操作.相对于HTML 4 DOM,HTML 5 DOM增加了HTMLCollection.DOMTokenList.DOMStringMap.HTMLAllCollection. HTMLFormControlsCollection等. 一.HTMLCollection.HTMLAllCollection和HTMLFormControlsCollection 三个接口均用于表示一组元素组成的列表.HTMLAllCollecti

DOM笔记(十二):又谈原型对象

因为之前谢过一篇关于原型对象的笔记:浅谈JavaScript中的原型模式.现在我又重新看到这个话题,对原型有了进一步的理解,所以,又要谈谈原型对象. 一.理解原型对象 创建的每一个函数都有一个prototype属性,它指向这个函数的原型对象.利用原型模式创建的方法和属性是被所有实例所共享的. function Person(){} Person.prototype.name="dwqs"; Person.prototype.age=20; Person.prototype.sayNam

DOM笔记(十):JavaScript正则表达式

一.RegExp ECMAScript通过RegExp类型类支持正则表达式,语法和Perl类似: var exp = /pattern/flags; patternb部分是任何简单的或复杂的正则表达式:flags是每个正则表达式所带的一个或者多个标志. 正则表达式的模式匹配支持三个标志: g:全局模式,即模式应用于整个字符串,而非在发现第一个匹配项时立即停止 i:不区分大小写模式 m:多行模式,即到达一行文本末尾是还会继续茶查找下一行中是否存在与模式匹配的项. 1.创建正则表达式 JavaScr

DOM笔记(三):Element接口和HTMLElement接口

一.Element接口 Element接口表示一个元素,该接口扩展自Node接口,自然继承了Node接口的属性和方法,也有一套针对元素的属性和方法. Element接口常见的属性比较少,常用的就是一个只读的tagName属性,该属性返回元素名,数据类型是DOMString. Element接口定义的方法也主要是针对属性操作,常见方法如下: 方法名 数据类型 说明 getAttribute DOMString 返回对应属性 getAttributeNode Attr 返回对应属性节点 getAtt