JavaScript --------WebS APIs学习之DOM(二)

操作元素

          JavaScript 的DOM操作可以改变网页内容,结构和样式,我们可以利用DOM操作元素来改变元素里面的内容,属性等.

 一 改变元素的内容

             ①element.innerText //从起始位置到终止位置的内容,但它去除html标签,同时空格和换行也会去掉

             不识别html标签  (非标准)

             ②element.innerHTML //起始位置到终止位置的全部内容,包括html标签,保留空格和换行.

             识别html标签( W3C标准)

案例 : 点击按钮 ,div中显示当前时间

     
     
时间显示在这里

时间一直显示在这里

二 常用元素的属性操作

        案例:修改属性src

    
     
     
     

案例:分时显示不同图片 ,显示不同的问候语.

     
     

三 表单元素的属性操作 

利用DOM 可以操作如一下表单元素的属性: type value checked selected disabled

案例: 点击按钮 ,表单内容改变.并且禁用按钮



四 样式属性操作

         可以通过JS 修改元素的大小,颜色,位置等样式.

         1. element.style 行内样式操作

注意: ①Js里面的样式采取驼峰命名法,比如fontSize , backgroundColor

          ②JS修改style 样式操作,产生的是行内样式,css权重比较高

         2.element.className 类名样式操作

注意:①如果样式修改较多,可以采用操作类名方式更改元素样式.

        ②class因为是个保留字,因此使用className来操作元素类名属性

        ③className 会直接更改元素的类名,会覆盖原先的类名

案例 : 循环精灵图背景 利用for循环设置一组元素的精灵图背景


案例: 显示隐藏文本的内容 当鼠标点击文本框时,里面的默认文字隐藏,当鼠标离开文本框时,里面的文字显示


查找

      案例:密码框格式提示错误信息.

              用户如果离开密码框,里面输入个数不是6_16,则提示错误信息,否则提示输入正确信息


 
设置密码: 请输入6-12位密码

案例:表格中,鼠标经过该行,该行变色。


姓名 年龄
杨九儿 17
杨仙子 18
小可爱 3岁
臭猪猪 1岁

六  自定义属性操作

       1.获取元素属性值       

         ① element.属性     //获取属性值

         ②element.getAttribute( '属性' );

         区别:element.属性 获取内置属性值 (元素自带的属性)

                    element.getAttribute('属性') ; 主要获得自定义的属性(标准)

        2.设置属性值

         ①element.属性 = ‘值 ’;   设置内置属性值

         ② element.getAttribute( '属性' , ‘值’);

         区别:element.属性     设置内置属性值 

                    element.getAttribute('属性') ; 主要设置自定义的属性(标准)

         3.移除属性

           element.removetAttribute( '属性 ’);

案例: tab栏切换(重点案例)

 
 
  • 商品介绍
  • 规格与包装
  • 售后保障
  • 评论
商品介绍
规格与包装
售后保障
评论

七  H5自定义属性

自定义属性目的:是为了保存并使用数据,有些数据可以保存到页面中而不用保存到数据库中

因为有些自定义属性很容易引起歧义。不好判断是元素的内置属性还是自定义属性

1.设置H5自定义属性

H5规定自定义属性data-开头作为属性名并且赋值

2.获取H5自定义属性

       1. 兼容性获取 element . getAttribute(' data-index');

        2.H5新增 element. dataset . index 或者 element .dataset[' index '] ie11才支持

节点操作

         网页中所有的内容都是节点(标签,文本,注释等),在DOM中,节点使用node来表示

         一般地,节点至少拥有node Type(节点类型),nodeName(节点名称)和nodeValue(节点值)这三个基本属性

  • 元素节点  nodeType 为 1 ;
  • 属性节点 nodeType 为 2 ;
  • 文本节点 nodeType 为 3 ;(文本节点包含文字,空格,换行等;)

  在实际开发中,节点操作主要操作的是元素节点

节点层级:

         一 父级节点    node.parentNode

              注意:1.parentNode 属性可返回某节点的父节点,注意是最近一个的父节点

                        2. 如果指定的节点没有父节点则返回null

         二 子节点     

             1.parentNode.childNodes (标准)

              注意:①返回包含指定节点的子节点的集合,该集合为即时更新的集合

                        ②返回值里面包含了所有的子节点,包括元素节点,文本节点等 。如果只获得里面的元素节点,还需专门处理

                           代码如下:

                                              JavaScript --------WebS APIs学习之DOM(二)_第1张图片

                2. parentNode.children (非标准)(重点掌握)

                          parentNode.children是一个只读属性,返回所有的子元素节点,他只返回子元素节点,其余节点不返回。

                3.parentNode.firstChild        parentNode.lastChild     

                           parentNode.firstchild 返回第一个子节点,找不到则返回null,同样,也包含所有节点

                           parentNode.lastChild 返回最后一个子节点,找不到则返回null,同样,也包含所有节点

                 4.parentNode.firstElementChild         parentNode.lastElementChild 

                          parentNode.firstElementChild 返回第一个子元素节点 ,找不到则返回null

                          parentNode.lastElementChild 返回最后一个子元素节点 ,找不到则返回null

                         注意:这两个方法有兼容醒问题,IE9 以上才支持

                    5.返回第一个子元素,和最后一个子元素的方法:

                                        parentNode.children [0]    返回第一个子元素

                                        parentNode.children [伪数组的长度 - 1 ]   返回最后一个子元素

案例 : 下拉菜单



                三 兄弟节点

                     1.node.nextSibling

                        node.nextSibling返回当前元素的下一个兄弟节点,找不到则返回null,同样,也是包含所有的节点

                     2.node.previousSibling

                        node.previousSibling返回当前元素的上一个兄弟节点,找不到则返回null,同样,也是包含所有的节点

                    3.node.nextElementSibling            node.nextElementSibling         IE9才支持

                       node.nextElementSibling返回当前元素的下一个兄弟元素节点,找不到则返回null

                       node.nextElementSibling返回当前元素的上一个兄弟元素节点,找不到则返回null。

                     解决:封装一个兼容性的函数

                                         JavaScript --------WebS APIs学习之DOM(二)_第2张图片

 

            四 创建节点

               document.createElement('tagName');

                       document.createElement('tagName')方法创建由tagName指定的HTML元素,也称为动态创建节点。

             添加节点

            1.node.appendChild(child)

             node.appendChild(child)方法将一个节点添加到指定父节点的子节点列表末尾,类似于css里面的after伪元素

             2.  node.insertBefore(child , 指定元素)

              node.insertBefore(child , 指定元素)方法将一个节点添加到父节点的指定子节点前面,类似于CSS里面的before伪元素

案例 :简单发布留言功能

     

     

    你可能感兴趣的:(javascript)