day7 part2:JavaScript DOM编程学习笔记01
来源:互联网 发布:阿里旺旺国际版 mac 编辑:程序博客网 时间:2024/05/16 16:24
一、DOM:DocumentObject Model(文本对象模型)
DOM把一个文档表示成一棵家谱树,定义了Node接口和多种节点类型 来表示XML节点的多个方面。
二、节点(Node)
定义:来源于网络理论,代表网络中的一个连接点。网络是节点构成的集合。
分类:元素节点
属性节点:元素节点的属性,可以直接通过属性的方式操作。
文本节点:属性节点的子节点,其内容为文本。
三、在html文档什么位置编写js代码?
1.直接在html页面中写代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title></head><body><!-- HTML代码和JS代码耦合在一起。 -->><button onclick="alert('helloworld...');">ClickMe</button></body></html>
缺点:js和html强耦合,不利于代码维护;若click相应函数是比较复杂的,则需要先定义一个函数,然后再在onclick属性中完成对函数的引用,比较麻烦。
2.一般不能在body节点之前直接获取body内的节点,因为此时html文档还未加载完成。
3.可在整个html文档的最后写代码,但是不符合习惯。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title></head><body><button>ClickMe</button></body></html><!-- 在整个HTML文档被加载后,获取其中的节点,把script节点放在html文档的最后 但不符合写JS代码的习惯--><script type="text/javascript">//1.获取buttonvar btns=document.getElementsByTagName("button");alert(btns.length);//2.为button添加onclick响应函数btns[0].onclick=function(){alert("helloworld!!");}</script>
4.一般在body节点之前编写js代码,但需要利用window.onload事件。该事件在当前文档完全加载之后被触发,所以其中的代码可以获取到当前文档的任何节点。此方法最合适。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript">alert("1");//window.onload事件在整个HTML文档被完全加载后触发执行//所以在其中可以获取到HTML文档的任何元素。window.onload=function(){alert("3");}</script></head><body><button>ClickMe</button></body></html><script type="text/javascript">alert("2");</script>
四、如何获取元素节点
1.document.getElementById:
根据id属性获取对应的单个节点
2.document.getElementsByTagName:
根据标签名获取指定节点名字的数组,数组对象length属性可以获取数组的长度。
3.document.getElementsByName:
根据节点的name属性获取符合条件的节点数组,但IE的实现方式和W3C标准有差别;在html文档中若某节点没有name属性,则IE使用getElementsByName不能获取到节点数组,但火狐和googlechrome可以 。
- day7 part2:JavaScript DOM编程学习笔记01
- day9 part2:JavaScript DOM编程学习笔记03
- day10 part2:JavaScript DOM编程学习笔记04
- 《JavaScript Dom编程艺术》学习笔记01
- JavaScript DOM编程 学习笔记
- c++ 学习笔记(高级linux编程) day7
- javascript DOM 编程艺术 学习笔记
- javascript DOM 编程艺术 学习笔记
- 《JavaScript DOM编程艺术》学习笔记<一>
- 《javascript+dom 编程艺术 》学习笔记
- JavaScript DOM编程 学习笔记-节点属性
- JavaScript DOM编程 学习笔记-替换节点
- JavaScript DOM编程 学习笔记-删除节点
- JavaScript DOM编程 学习笔记-插入节点
- 《javascript Dom编程艺术》学习笔记
- 编程助手JavaScript学习库-DOM笔记
- day13:JavaScript DOM编程学习笔记05
- day14:JavaScript DOM编程学习笔记06
- cocos2dx 弹出 android 对话框
- 处理BigDecimal非整除异常
- hdu_2222 Keywords Search(AC自动机)
- ROS hydro turtlebotArm相关网址总结
- 【Linux】linux常用基本命令
- day7 part2:JavaScript DOM编程学习笔记01
- 高效搜索
- java.io.IOException: Could not locate executable null\bin\winutils.exe in the Hadoop binaries
- 3D打印机shader特效简单实现
- git config配置文件
- 使用adb命令连接模拟器,在5037端口未被占用情况下仍报端口错误
- Leveldb源码分析--16
- string类(二、常用string函数)
- 1002 【2017.1.17】小X的十滴水