JavaScript DOM 学习总结(五)

前端之家收集整理的这篇文章主要介绍了JavaScript DOM 学习总结(五)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

@H_3010@

<span style="color: #0000ff">1、DOM简介。


@H
301_0@  当页面加载时,浏览器会创建页面的文档对象模型(Document Object Model)。文档对象模型定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构,即节点树。通过DOM,JS可创建动态的HTML,可以使网页显示动态效果并实现与用户的交互功能。JS能够改变页面中所有的HTML元素、属性和CSS样式,并对页面中所有事件做出响应。所以学习JS的起点就是处理网页,处理网页就需要使用DOM进行操作。


@H_301_0@<span style="color: #0000ff">

2、DOM获取元素。


@H_301_0@  JS要想操作HTML元素,那么首先就必须先找到该元素。通常使用以下几种方法完成:


@H_3010@  通过元素设置的id找到HTML元素。


@H
301_0@  通过标签名找到HTML元素。


@H_301_0@  通过元素设置的名称(name)找到HTML元素。


@H_301_0@  所谓的DOM,实际上就是document,获取元素就是操作document。


@H_3010@  (1)、通过id找到元素


@H
301_0@  方法:document.getElementById('id');


@H_301_0@  网页是由标签将信息组合起来的,id属性值是唯一的,就像身份证一样,通过一个身份证可以找到相对应的人,所以通过该方法,可以获取到与之相对应的标签,而获取的元素在JS中是一个对象,若想对元素进行操作,则需要通过他的属性方法


@H_301_0@  (2)、通过标签名找到元素


@H_301_0@  方法:document.getElementsByTagName('Tagname');


@H_301_0@  通过该方法,返回的是带有指定标签名的对象的集合,也就是以数组的形式返回,返回的顺序是他们在文档中的顺序。


@H_3010@  (3)、通过name找到元素


@H
301_0@  方法:document.getElementsByName('name');


@H_301_0@  该方法与getElementById()方法有点相似,都是通过设置的属性值找到元素,只不过该方法是通过设置的name属性值查找元素。name属性在文档中可能不唯一,所以该方法返回的也是元素的数组,而不是一个元素。


<div class="jb51code">
<pre class="brush:js;">

//获取所有name值为txt的元素 var oTxt=document.getElementsByName("txt"); //获取元素的个数 alert(oTxt.length); //返回: //获取第二个元素的值 alert(oTxt[].value); //返回:
@H_301_0@  既然可以通过id找到元素,那么也就可以通过class找到元素。className属性用于设置或者返回元素的class类名。

@H_301_0@  语法:object.className = 'className'

@H_301_0@  该方法可以控制class类名,返回元素的class属性,作用是可以为网页中某个元素指定一个className来更改该元素的外观。

@H_301_0@  实例:简单的网页换肤效果

<Meta charset="UTF-"> 网页换肤 var x = document.getElementById('boy'); function gr(){ x.className='col'; } function bl(){ x.className='col'; } function vi(){ x.className='col'; } function pi(){ x.className='col'; } function or(){ x.className='col'; }
@H_301_0@  这只是一个简单的切换背景色效果,如果想切换网页的整体样式,可以使用外部CSS文件,通过JS改变link标签的href属性来完成。

@H_301_0@  如果想设置多个class类名相同的元素的样式,就需要借助数组的方法来完成,其实现原理也很简单,首先通过id获取其父元素,再获取父元素下所有子元素的标签名,获取标签名返回的是元素的数组,所以就可以和访问数组一样的方法来访问元素的数组,那么先使用循环遍历该元素数组,再做判断,如果这个元素的className等于我们设置的class属性值,就说明这是我们要找的元素。

@H_301_0@  实例:将有序列表中所有class属性值为"col"的元素背景颜色设置为绿色。

    热点
  1. 数码
  2. 社会
@H_301_0@  下面是一个通过class属性获取元素的封装函数,方便以后使用。

<Meta charset="UTF-"> 封装getByClass<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>
    热点
  1. 数码
  2. 社会

3、DOM操作。

  获取到HTML元素之后,就可以进行相应的操作。

  (1)、改变HTML

  修改HTML内容的最简单的方法时使用 innerHTML 属性。innerHTML顾名思义,inner就是内部的,既然是HTML,那么就可以给里边放HTML。该属性可用于获取和替换HTML元素的内容。

  语法:document.getElementById(id).innerHTML = new HTML

  (2)、操作元素属性

  修改元素属性最简单的方法就是直接修改,语法:document.getElementById(id).属性名 = new value 比如修改图片src属性的指向路径。

  此外还可以通过DOM方法获取、添加、删除元素的属性。

  ①、getAttribute()

  getAttribute()方法通过元素节点的属性名获取属性的值。

  语法:elementNode.getAttribute(name)  name是想要获取的元素节点的属性名

  ②、setAttribute()

  setAttribute()方法添加一个新属性并指定值,或者把一个现有的属性设定为指定的值。

  语法:elementNode.setAttribute(name,value)  name是属性名,value是属性值。

  ③、removeAttribute()

  removeAttribute()方法可删除元素的属性。

  语法:elementNode.removeAttribute(name)  name是属性名。

JavaScript实例 var oTxt=document.getElementById('txt'); var oBtn=document.getElementById('btn'); //获取按钮value属性的值 var a=oBtn.getAttribute('value'); alert(a); //返回:按钮 oBtn.onclick=function (){ //操作元素属性有三种方法: //第一种方法 //oTxt.value='请输入文字'; //第二种方法 //oTxt['value']='请输入文字'; //第三种方法 //修改文本框value属性的值 oTxt.setAttribute('value','请输入文字'); //删除按钮type属性 oBtn.removeAttribute('type'); //删除后默认为文本框 };

  (3)、改变CSS

  改变HTML元素的CSS样式可直接使用该语法:document.getElementById(id).style.样式名 = new style

JavaScript实例 HTML DOM
JS可以使网页添加动态效果并实现与用户交互的功能。

. JS能够改变页面中所有的 HTML 元素。

. JS能够改变页面中所有的 HTML 属性。

. JS能够改变页面中所有的 HTML 元素的CSS样式。

var oDiv = document.getElementById('div'); function color(){ oDiv.style.color = 'white'; oDiv.style.fontFamily = 'Microsoft YaHei'; oDiv.style.backgroundColor = 'green'; } function hig(){ oDiv.style.width = 'px'; oDiv.style.height = 'px'; oDiv.style.border = 'px solid #ccc'; } function none(){ oDiv.style.display = 'none'; } function block(){ oDiv.style.display = 'block'; } //取消设置 function cancel(){ var clean = confirm('确定取消所有设置?'); if(clean == true){ oDiv.removeAttribute('style'); } }

  上面的代码,通过style设置的样式,都是行间样式,可以使用火狐的Firebug点击相应的按钮,就能看到所有设置的CSS样式都出现在了行间。

  可以直接通过style获取和设置CSS样式,那么有没有更简洁的方法呢?可以借助于函数使用JS的内置对象arguments完成,所谓arguments,就是可变参,不定参,参数的个数可变,是一个参数数组,无需指出参数名,就可访问他们,但是为了增强可读性,给参数取名,还是很有必要的。

JavaScript实例

  下面是一个获取和设置行间样式的封装函数,以便以后使用。

获取行间样式

  我们都知道,在实际的WEB项目开发中,要遵循结果、表现、行为相分离的原则,以增强可读性,优化代码,便于后期维护。所以通常我们设置元素的样式,并非都是在行间设置。使用style方法获取的只是DOM元素style属性里的样式规则,对于通过class属性设置的外部样式表,style就显得力不从心了。那要如何获取元素的非行间样式呢?DOM标准中有个全局方法getComputedStyle,通过该方法可以获取当前对象的样式信息。比如:getComputedStyle(obj,false).paddingLeft,可以获取到对象的左内边距。这里需要注意:在获取元素的复合样式时,一定要使用精确的值,复合样式比如background、border,如果要获取元素的背景颜色,只使用background会出错,一定要写成backgroundColor。

  JS只能修改元素的行间样式,并不能修改获取到的非行间样式。那么很多人可能会产生疑问,既然可以获取到又不能修改,那还获取有什么用。其实获取非行间样式是非常有必要的,如果是外部样式表,样式都是密密麻麻一片英文的存在,不可能一个个去找,到底该元素设置的什么样子,再回头修改,那岂不是太浪费精力了,所以该方法就显得尤为重要,而且返回的值都是精确值,通过获取的非行间样式信息,也有利于更精细的修改元素的当前样式,这是多么美妙的一件事,直接使用style设置元素的行间样式,因为行间样式的优先级最高,所以就覆盖掉了非行间样式,其实也就相当于跟修改了非行间样式一样,只是显示在了行间,我们目的反着是已经达到了。

获取非行间样式

  (4)、对事件做出响应

  实例:全选和反选,输入对应的序号选中

JavaScript实例
. 音乐 输入-序号选择,每次只可以选择一项:

3、DOM节点。

  HTML文档可以说是由节点构成的集合,常见的DOM节点有三种,即元素节点、属性节点和文本节点。元素节点就是HTML标签,标签的属性就是属性节点,文本节点就是页面可以浏览的内容。

  在文档对象模型中,每一个节点都是一个对象,DOM节点有三个重要的属性:节点的名称,节点的值和节点的类型。

  (1)、nodeName:节点的名称

  nodeName属性返回节点的名称。元素节点的名称与标签名相同(大写),属性节点的名称是属性的名称,文本节点的名称永远都是#text,文档节点的名称永远都是#document。

  (2)、nodeValue:节点的值

  nodeValue属性返回节点的值。元素节点的值是undegined或null,属性节点的值是属性的值,文本节点的值是文本自身。

  (3)、nodeType:节点的类型

  nodeType属性返回节点的类型。以下是常见的节点类型:

  • JS
  • DOM

  JS中函数可以嵌套使用,有父函数有子函数,HTML标签也可以嵌套使用,那么就说明存在着各种不同的节点关系,比如父节点、子节点和兄弟节点。为了方便操作,DOM定义了一些节点的公共属性。

  (1)、子节点

  childNodes属性返回节点的子节点集合,可使用length属性返回子节点的数量,然后就可以和数组一样获取需要的信息。

  通过上面的代码,可以看到返回的是11。ul下明明只有5个li元素,怎么会返回11呢?其实是这么回事:

第个节点(元素节点) 第个节点(文本节点)
  • 第个节点(元素节点)
  • 第个节点(文本节点)
  • 第个节点(元素节点)
  • 第个节点(文本节点)
  • 第个节点(元素节点)
  • 第个节点(文本节点)
  • 第个节点(元素节点)
  • 第个节点(文本节点)

      因为通过childNodes属性返回的子节点集合,不仅包括元素节点,而且还包括文本节点,浏览会将标签之间的空白默认为文本节点,在空白处输入文字,会在浏览器显示。所以建议使用children属性,该属性只返回元素节点,不包括文本节点,并且不包括注释节点。

      我是个文本节点 我是span元素。

      上面的代码,ul下5个li元素,返回子节点个数为5。children属性要比childNodes属性好用太多了,只返回元素的子节点,还不包括孙子辈节点。

      (2)、首尾子节点

      firstElementChild属性返回children数组的第一个节点。

      语法:node.firstElementChild  该方法相当于:element.children[0]

      lastElementChild属性返回children数组的最后一个节点。

      语法:node.lastElementChild  该方法相对于:element.children[element.children.length-1]

    JS

    DOM
    jQuery

      (3)、父节点

      parentNode属性用于获取指定节点的父节点。注意:父节点只能有一个。通过使用两个获取父节点,可获取祖节点。

      实例:点击子节点,隐藏父节点

      offsetParent属性可返回一个元素用于定位的父级。

    JavaScript实例

      (3)、兄弟节点

      nextElementSibling属性返回同一树层级中某个节点之后紧跟的节点。

      语法:element.nextElementSibling  

      previousElementSibling属性返回同一树层级中某个节点之前紧跟的节点。

      语法:element.previousElementSibling

      等。

        实例:获取li元素节点的兄弟节点

    • HTML
    • CSS
    • JS

    4、DOM应用。

      DOM最实际的应用就是可以通过JS创建、插入和删除节点。

      (1)、创建节点

      createElement()方法可创建元素节点。

      语法:document.createElement(tagName)

      appendChild()方法可在指定节点的末尾插入一个新的子节点,每次都向末尾添加。

      语法:父级.appendChild(new node)

      实例:创建并添加li元素

    JavaScript实例

      (2)、插入节点

      insertBefore()方法可在已有的子节点前插入一个新的子节点。

      语法:父级.insertBefore(new node,node)  第一个参数为要插入的新子节点。第二个参数是原有节点,也就是在谁之前插入。

      实例:创建并添加li元素,每个新创建的li元素都插入到之前插入的li元素之前

    JavaScript实例

      (4)、删除节点

      removeChild()方法用于删除一个节点

      语法:父级.removeChild(node)  参数为要删除的子节点。

      实例:简单的表格添加和删除

    JavaScript实例 姓名:添加">
    员工表ID @H_301_0@  这个实例只能很简单的完成添加删除,并不对输入进行判断,如果想要做的完美,还需要做很多工作,可以对表格进行美化,设置背景色,鼠标移入高亮显示,鼠标移出恢复背景色,最关键的就是要对表单输入内容进行判断,以确保每次提交的信息都是有效信息,如果表格信息量大,还可以添加支持模糊搜素,多关键字搜索,以提高用户体验度,当然在实际的项目中,这样的情况几乎不会出现,但可以作为自己的实践,检验学习成果。

    @H_301_0@  (5)、替换节点和创建文本节点

    @H_301_0@  replaceChild()方法可用于替换元素节点。

    @H_301_0@  语法:node.replaceChild (new node,node)  第一个参数为用于替换的节点。第二个参数为原有节点。

    @H_301_0@  createTextNode()方法可创建新的文本节点,返回新创建的Text节点。

    @H_301_0@  语法:document.createTextNode(txt)

    @H_301_0@  这两种方法平时几乎用不到,但还是需要了解。

    @H_301_0@  实例:点击按钮将span标签替换为b标签。再创建一个文本节点插入到创建的p元素下,并设置className。

    <Meta charset="UTF-"> JavaScript实例 @H_301_0@创建一个P标签,设置属性,创建文本节点。

    function change(){ //获取span元素 var oS=document.getElementById('s'); //创建一个b元素 var newnode=document.createElement('b'); //要替换的文本节点 var txt = document.createTextNode('className'); //将文本节点插入到创建的b元素下 newnode.appendChild(txt); //在span元素的父级下将span元素替换成新创建的b元素 oS.parentNode.replaceChild(newnode,oS); } //创建一个p元素 var oP=document.createElement('p'); //设置className oP.className='p'; //创建文本节点 var txtNode=document.createTextNode('createTextNode用于创建文本节点!'); //将创建的文本节点插入到p元素下 oP.appendChild(txtNode); //再将p元素插入到父级body下 document.body.appendChild(oP);
    @H_301_0@以上所述是编程之家小编给大家分享的关于JavaScript DOM 学习总结(五)的全部叙述,希望大家喜欢。

    猜你在找的JavaScript相关文章

    姓名 年龄 操作