《JavaScript DOM 编程艺术》读书笔记
来源:互联网 发布:淘宝一个金冠要多少丹 编辑:程序博客网 时间:2024/05/02 04:43
《JavaScript DOM 编程艺术》读书笔记——其二
第三章
1、 CSS:
为了获得精细的控制,把某一个或某几个元素与其他元素区别开,通常会使用class属性(例如:<p class="special"></p>
在样式表里:.special{...}
)或id属性(例如:<p id="yes"></p>
在样式表里:#yew{...}
)
2、获取元素:
三种DOM方法可以获取元素节点,分别通过元素ID、通过标签名字、通过类名字来获取。
1、getElementById 返回一个与那个有着给定id属性值的元素节点对应的对象。 使用typeof操作符可以得知操作值类型。 document.getElementById("id属性值(如purchases)") 一般来说,不必为文档里每一个元素都定义一个独一无二的id值,所以会通过其他方法来获取那些没有id属性的对象。2、getElementByTagName 返回一个对象数组,每个对象分别对应文档里有着给定标签的一个元素。 document.getElementByTagName("tas属性值(如li)") getElementByTagName允许把一个通配符("*")作为其参数,即文档里每个元素都将在这个函数所返回的数组里,若是想知道文档里总共有多少个元素节点,可以这样使用: alert(document.getElementByTagName("*").length);3、getElementByClassName 可以通过class属性中类名来访问元素
3、获取属性:getAttribute
使用方法:object.getAttribute("查询的属性名")
举例:
var paras = document.getElementsByTagName("p");for(var i = 0 ; i < paras.length ; i++){ var title_text = paras[i].getAttribute("title"); if(title_text != null) { alert(title_text); }}
4、设置属性:setAttribute
使用方法:object.setAttribute("查询的属性名","做出的修改")
举例:
var paras = document.getElementsByTagName("p");for(var i = 0 ; i < paras.length ; i++){ var title_text = paras[i].getAttribute("title"); if(title_text) { paras[i].setAttribute("title","brand new title text"); alert(paras[i].getAttribute("title")); }}
注:由于DOM工作模式是:先加载文档的静态内容,再动态刷新,动态刷新不影响文档的静态内容,即对页面内容刷新却不需要在浏览器里刷新页面。所以:setAttribute做出的修改不会反应在文档本身的源代码里。
0 0
- 《JavaScript DOM编程艺术》读书笔记
- 读书笔记--javascript DOM 编程艺术
- 《JavaScript DOM 编程艺术》 读书笔记
- 《JavaScript DOM 编程艺术》读书笔记
- JavaScript Dom编程艺术 读书笔记
- 《JavaScript DOM 编程艺术》读书笔记
- 《JavaScript DOM 编程艺术》读书笔记
- 《JavaScript DOM 编程艺术》读书笔记
- 《JavaScript DOM 编程艺术》读书笔记
- 《JavaScript DOM 编程艺术》读书笔记
- 《JavaScript DOM 编程艺术》读书笔记
- 《JavaScript DOM 编程艺术》读书笔记
- JavaScript DOM编程艺术 读书笔记
- 《JavaScript DOM 编程艺术》读书笔记
- JavaScript DOM 编程艺术读书笔记
- JavaScript DOM编程艺术读书笔记
- 《Javascript DOM编程艺术》读书笔记
- 《JavaScript DOM编程艺术》读书笔记
- PHP语言优势
- 算法导论第二章-算法基础-Cpp代码实现
- consul(第二篇)consul Ops
- Jquery 获取 radio/select/checkbox 选中值
- 每天15min-HTML5(10)-表单(上)
- 《JavaScript DOM 编程艺术》读书笔记
- 使用 Jsoup 爬虫解析 html 新闻的实例
- 在CentOS 7上安装.NET Core R2跑Hello World
- 进程间通信----命名管道
- char与byte的区别
- Struts2.3+Spring3.2.8+Hibernate4.1全注解配置
- 博客开通鸟~
- 每日一linux命令(11)-------nl
- 跨域、跨文档传输数据(三)---- postMessage ; 实现跨文档消息传输;