关于Javascipt基础6

这次主要说DOM 文档对象模型

DOM (document object model) 文档对象模型,它定义了操作文档对象的接口。 DOM 把一份html文档表示为一棵家谱树,使用parent(父), child(子), sibling(兄弟)等记号 来表明家庭成员之间的关系。

一、节点 节点(node)

一词来自于网络理论,这代表着网络中一个个的连接点,网络是由节点构成的。

对于html文档也是一样,文档是由节点构成的集合。

1.元素节点 元素节点如 <body> <p> <div> 之类的元素,这些元素在文档中的布局形成了文档的结构。(可以说是标签元素)

2.文本节点 文本节点指的是元素节点中的内容,但并非所有的元素节点都包含有文本节点。(可以说是标签里的内容)

3.属性节点 元素都或多或少有一些属性,属性的作用是对元素作出更具体的描述。属性节点总是被包含在 元素节点当中。(例如id class title等的标签的属性 不是指css的)

二、获取文档对象

1. querySelector() HTML5新加入的方法,通过传入合法的CSS选择器,即可获取符合条件的第一个元素

  例:document.querySelector(“#test”); //返回id为test的首个div

2. querySelectorAll() HTML5新加入的方法,通过传入合法的CSS选择器,即可获取所有符合条件的元素,返回对象数组

  例:document.querySelectorAll(‘div.foo’);//返回所有带foo类样式的div元素对象

 要注意:使用这上面两个方法无法查找带伪类状态的元素,比如querySelector(‘:hover’)不会得到 期结果。

(这两个是新出的语句 要注意低版本兼容,另外它们的选取原则是css选择器的那种 可以使用(#div>p),(.div>a)这种方式选择)

3.getElementById() 这个方法返回一个与给定id属性值的元素节点相对应的对象。(注意 需要ID)

  例:document.getElementById(‘box’);

4.getElementsByTagName() 这个方法返回一个对象数组。每个对象分别对应着文档里给定标签的一个元素。(也就是按标签来选择)

  例:document.getElementsByTagName(‘li’);

5.getElementsByName() 通过 name 获取一个对象数组(通过Name来选择 主要用于表单)

  例:document.getElementsByName(‘name’);

二、间接引用节点(有querySelector,都不怎么用了- -)

除了可以直接引用节点,还可以通过节点间的关系来引用相对节点。

1.引用子节点 每个节点都有一个childNodes集合属性,类型是数组对象,表示该节点的所有子节点 的集合。

这些子节点按照其在文档中出现的顺序排列,因此可以通过索引来依次访问各个子节 点。

  例: document.childNodes[0]; //引用文档的根节点

     document.childNodes[1].childNodes[0] //引用<head>节点

     document.childNodes[2].childNodes[1] //引用<body>节点

除了使用childNodes属性,还有两个属性可以用于引用子节点,分别是: element.firstChild; element.lastChild; 它们分别表示第一个子结点和最后一个子结点。

2.引用父节点

html的节点层次是一个树状结构,除了根节点外,每个节点都仅有一个父节点 ,可以由parentNode属性来引用 element.parentNode; //引用父节点

3.引用兄弟节点 属于同一个文档层次的节点称为兄弟节点,有两个属性可以用于兄弟节点间 引用,分别是:

element.nextSibling; //引用下一个兄弟节点 element.previousSibling; //引用上一个兄弟节点

三、获取节点信息(真扩展 视情况还是有点用的)

 在获得一个节点的引用后,有一些方法可以获得该节点的信息。

  1.nodeName 获取节点名称

  语法: Node.nodeName; 不同的类型的节点,nodeName的返回值有所差异:

  元素节点:返回标记名称; 属性节点:返回属性名称; 文本节点:返回文本 #text

  2.nodeType 获取节点类型

  语法: Node.nodeType;

  元素节点:返回 1 属性节点:返回 2 文本节点:返回 3

  3.nodeValue 获取节点的值

  语法: Node.nodeValue;

  元素节点:返回null 属性节点:返回节点值 文本节点:返回文本内容

四、处理属性节点

  1. getAttribute 获取节点属性值 object.getAttribute(attribute)

  例: var a = document.getElementsByTagName(‘a’);

     for(var i=0; i<a.length; i++){ alert(a[i].getAttribute(‘title’)); }

  2.setAttribute() 设置节点属性值 object.setAttribute(attribute, value)

  例:var link = document.getElementById(‘link’); link.setAttribute(‘title’, ‘链接提示信息’);

五、处理文本节点

  1. node.innerHTML 获取该节点下的包含HTML标签的文本内容

    例: var body = document.querySelector(‘body’); alert(html.innerHTML);

  2. node.textContent 获取该节点下的纯文本内容

    例: var body = document.querySelector(‘body’); alert(html.textContent);

  

六、因浏览器而异的空白节点(扩展 空白的节点来源于元素之间的间距 浏览器把这些换行和间隔当成一个空白的空格)

  ie浏览器和firefox浏览器对空白节点的处理不同,ie浏览器会忽略这些节点,而Firefox浏 览器则认可这些节点。

  处理方法: 1.避免在文档中出现文本节点。

  2.在使用前先删除其中的空白节点。

    function cleanWhitespace(element)

      { for(var i=0; i < element.childNodes.length; i++)

      { var node = element.childNodes[i]; //判断是否是空白节点,如果是则删除该节点

      if(node.nodeType == 3 && !/\S/.test(node.nodeValue){ node.parentNode.removeChild(node); } } }

DOM 总结:

   一份文档就是一棵树; 节点分为不同的类型,分别是:元素节点,属性节点,文本节点;

   每个节点都是一个对象; getElementById()方法将返回一个对象,该对象对应着文档里的一个元素节点;

   getElementsByTagName()方法返回一个对象数组,它们分别对应着文档里的元素节点;

事件

一、什么是事件? JavaScript和HTML之间的交互是通过用户和浏览器操作页面时引发的事件来理的。页面载入完成时, 会触发一个事件。

用户点击按钮时,点击也是一个事件。

常用的事件有: PC端上常用的事件:(这里只是把较常用的列出来而已 具体的还是要上网查)

  click 鼠标点击

  mousedown 鼠标按下

  mouseup 鼠标弹起

  mousemove 鼠标移动

  mouseout 鼠标离开

移动端端上常用的事件:

  touchstart            //当手指接触屏幕时触发

  touchmove           //当已经接触屏幕的手指开始移动后触发

  touchend             //当手指离开屏幕时触发 touchcancel //手指接触动作取消

  gesturestart          //当两个手指接触屏幕时触发

  gesturechange      //当两个手指接触屏幕后开始移动时触发

  gestureend

  onorientationchange   // 屏幕旋转事件

二、怎样将事情处理程序绑定到特定的事件中?

方法1. 使用HTML标记创建事件处理程序

  例:给图片添加点击事件 <img src=“01.jpg” onclick="alert(this.src);"/>

方法2:addEventListener() 方法用于向指定元素添加事件句柄

  语法: object.addEventListener(EventName,eventHandler);

   例1:给document对象添加点击事件 document.addEventListener("click",function(){ alert("你干嘛点我!"); })

今天就到这里了,以上的对象与方法只是一部分而已,一定要好好扩展完整。

时间: 2024-10-09 10:05:07

关于Javascipt基础6的相关文章

关于Javascipt基础1

Javascipt是一种脚本语言,由web浏览器进行解释和执行. 将Javascript应用到网页中的方式有两个 一是将javascript代码插入html文档的<script>标签中 二是将javascript代码存放在一个独立的文件里,再用<script>标签的src属性指向该文件使用. javaScript 语法概念 一.变量 变量由 var 运算符加变量名定义.(var是声明变量) 例如:var age = 25(声明age这个变量 赋予25这个数值)  var mood

关于Javascipt基础3

今天终于来到我们的循环语句了:-D 1.While(较少用的循环语句) 语法: while (exp) { //statements; } 说明: while (变量<=结束值) { 需执行的代码 } 例子: var i = 1; while(i < 3){ alert(i); i++; }(切记要在执行代码中加入能够跳出循环的条件 不然会无限循环. PS:我犯过很多回 包括今天= =) 2. Do…while do { //statements; }while (condition); do

关于Javascipt基础2

承接上篇的随笔 下面的内容是关于逻辑思维的 与编程语言的大致一样 四.运算符 1.算术运算符( + - * / %) 加.减.乘.除.求余,其中%是求余运算 例子:var total = (1 + 4) * 5;  var i = 100;  var temp = (i – 20) / 2;  alert(“10”+ 20) //return 1020;  alert(10 + 20) //return 30; 2. 后增量/后减量运算符 ++ ,-- 例子:var i = 10;  var a

关于Javascipt基础7

最近练习了关于事件的代码,所以就说说js的事件吧. 一.什么是事件? JavaScript和HTML之间的交互是通过用户和浏览器操作页面时引发的事件来理的. 比如页面载入完成时, 会触发一个事件.再比如用户点击按钮时,点击也是一个事件. 常用的事件有: PC端上常用的事件: click 鼠标点击 mousedown 鼠标按下 mouseup 鼠标弹起 mousemove 鼠标移动 mouseout 鼠标离开 change文本域的内容被改变 dblclick 鼠标双击 focus 获得焦点 loa

关于Javascipt基础5

紧接着上次的各种对象. String 对象 String 对象用来处理文本. 事实上任何一个字符串常量都是一个String对象,可以将其直接作为对象来使用. 获得字符串长度: 1.length属性 var str = “hello”; var str2 = “你好”; alert(str.length); //输出 5 alert(str2.length); //输出2 提取字符串: 1.charAt()方法 var str = "HELLO WORLD"; var n = str.c

关于Javascipt基础4

这次说说函数和一部分对象. 函数 函数就是完成某个功能的一组语句,函数由关键字 function + 函数名 + 一组参数定义; 函数在定义后可以被重复调用,通常将常用的功能写成一个函数,利用函数可以使代码的组织,结构更多清晰. 基本语法: function funName (arg0, arg1, … argN){ //statements }(组成函数必要的是function, 函数名,(),{}.()里面可以没有参数.) 例1: function say_hello (name, msg)

javascipt——基础知识——对象类型

1.object:是javascript的所有对象的父对象. 例:var a={}; 与 var a=new Object();的作用相同,均是创建一个空对象. 2.Array 构造函数: new Array();new Array(size);new Array(element0, element1, ..., elementn); 例:var a=new Array(1);a[0]; //undefined; 在初始化时,指定其长度为n,由于尚未指定数组内容,因此获取时只能是undefine

javascipt——基础知识——基本数据类型

javascript的数据类型分为基本数据类型和非基本数据类型(对象) 一.基本数据类型: 包括以下部分:数字.字符串.布尔值.undefined.null,除此之外的均为对象 1.数字:浮点数.整数: 八进制:0开头,例:a=011; parseInt(a); //9 十六进制:0x开头,例:a=0x11; parseInt(a); //17 指数形式:数字e数字,例:a=3e2; parseInt(a); //300 Infinity:超出javascript处理范围的最大值.例:a=1e1

20145301赵嘉鑫《网络对抗》Exp8 Web基础

20145301赵嘉鑫<网络对抗>Exp8 Web基础 基础问题回答 什么是表单? 表单是一个包含表单元素的区域,主要负责数据采集部分.表单元素允许用户在表单中输入信息.一个表单有三个基本组成部分:表单标签.表单域.表单按钮: 表单标签:包含处理表单数据所用的URL以及数据提交到服务器的方法: 表单域:包含了文本框.密码框.多行文本框.下拉选择框等等: 表单按钮:包括提交按钮.复位按钮和一般按钮. 浏览器可以解析运行什么语言? 支持HTML(超文本标记语言).XML(可扩展标记语言)以及Pyt