博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Web前端学习第十五天·fighting_JavaScript(DOM编程艺术3-4章)
阅读量:7253 次
发布时间:2019-06-29

本文共 2021 字,大约阅读时间需要 6 分钟。

DOM中常用的节点

  DOM中有许多不同类型的节点,通常使用的有三种:

    元素节点

    文本节点

    属性节点

  

3种DOM方法获取元素节点

  通过元素ID(id)   getElementById(“idName”),返回一个对象。

  通过标签名字   getElementsByTagName(“tagName”),返回一个对象数组,每个对象分别对应着文档里给定标签的一个元素。

  通过类名字(class)   getElementsByClass(“className”),返回一个对象数组。使用这个方法还可以查找那些带有多个类名的元素。要指定多个类名只要在字符串参数中用空格隔开类名即可。注意,类名的顺序不影响匹配的结果,而且就算元素带有更多的类名也没有关系。

 

获取和设置属性

  getAttribute(“attributeName”)  获取属性值,如果没有该属性值则返回null。

  setAttribute(“attributeName”,“value”)  设置属性值。如果用在一个本身就有这个属性的元素节点上,这个属性值就会被覆盖掉。

  二者都只能作用于元素节点。

 

DOM的工作模式

  先加载文档的静态内容,再动态刷新,动态刷新不影响文档的静态内容。(对页面内容进行刷新却不需要在浏览器里刷新页面)

 

事件处理函数

  事件处理函数的作用就是在特定事件发生时调用特定的JavaScript代码。如:

    鼠标指针悬停时触发一个动作:onmouseover事件处理函数。

    鼠标指针离开某个元素时触发一个动作:onmouseout事件处理函数。

    点击某个链接时触发一个动作:onclick事件处理函数。

  添加事件处理函数的语法: event = “JavaScript statement(s)”,例如:onclick = “showPic(this)”。可以把任意数量的JavaScript语句放在这对引号中,只要用分号隔开即可。

 

设置默认行为不被触发

  事件处理函数的工作机制:在给某个元素添加了事件处理函数之后,一旦事件发生,相应的JavaScript代码就会得到执行。被调用的JavaScript代码可以返回一个值,这个值被传递给那个事件处理函数。如果返回的是true则认为该元素的此事件发生了,如果返回的是false则认为该元素的此事件没有发生,这样就可以屏蔽该元素的默认行为。例如:链接的页面跳转行为不发生。

 

childNodes属性

  用来获取任何一个元素的所有子元素,是一个包含这个元素所有子元素的数组。

  语法:element.childNodes

 

nodeType属性

  由childNodes返回的数组包含所有类型的节点而不仅仅是元素节点。事实上,文档中的几乎每样东西都是一个节点,空格和换行符也被解释为节点,它们全部包含在childNodes属性所返回的数组中。每个节点都会有nodeType属性,用来指明节点的类型,它的值是数字而不是英文。

  语法:node.nodeType

  nodeType共有12种可取值,一般只有3种又实用价值。

    元素节点的nodeType属性值为1。

    属性节点的nodeType属性值为2。

    文本节点的nodeType属性值为3。

 

nodeValue属性

  DOM提供nodeValue属性,它用来得到一个节点的值。

  语法:node.nodeValue,例如:var description = document.getElementById(“description”);alert(description.nodeValue);

  如上语句得到的是一个空值,也就是说用nodeValue属性获取description对象的值时,得到的并不是包含在这个段落里的文本。包含在<p>元素里的文本是另一种节点,它是p元素的第一个子节点,因此想要获得文本的话其实需要得到的是p元素的第一个子节点的nodeValue属性值。如:alert(description.childNodes[0].nodeValue);

 

这两天在准备考试,好崩溃……

学习进度也是慢……

 

firstChild和lastChild属性

  firstChild等价于 node.childNodes[0]

  lastChild等价于 node.childNodes[node.childNodes.length-1]

 

onload事件处理函数

  想让一个函数在页面加载时执行需要使用onload函数,将下面的语句添加到js文件的末尾即可。

  window.onload = f;(f是已经定义好的函数)

 

 

 

  

 

转载于:https://www.cnblogs.com/Candy1029/p/5545055.html

你可能感兴趣的文章
转 Linux文件管理
查看>>
Android中资源文件assets和res下面raw文件的使用不同点
查看>>
汉子字符转换成大写英文字母开头。。
查看>>
SQL优化(数据库的优化)
查看>>
android学习摘记——关于android ListView的美化
查看>>
Python--day72--ajax简介
查看>>
初识Python(windows)——下载、安装、使用
查看>>
NetCore Tag Helpers 和 HTML Helpers 和 Web 服务器控件比较
查看>>
Hadoop常用命令
查看>>
vue-cli 脚手架项目简介(一) - package.json
查看>>
js的数据类型及类型转换
查看>>
wpa_cli 关联无线网络
查看>>
MySQL批量数据脚本示例
查看>>
Can realize the needs of the individual, MBT Sini
查看>>
规则引擎以及blaze 规则库的集成初探之二——JSR94 的规则引擎API和实现
查看>>
core dump文件生成
查看>>
同步异步, 阻塞和非阻塞
查看>>
SQL查询案例:行列转换[行转列, 使用 CASE WHEN 处理]
查看>>
XML文档注释
查看>>
【MongoDB】1、MongoDB for Java
查看>>