zoukankan      html  css  js  c++  java
  • JavaScript操作DOM对象

    1.JavaScript操作DOM分为三类:DOM Core(核心),HTML-DOM和CSS-DOM。

    2.访问节点
    (1)使用getElement系列方法访问指定节点
      getElementById():返回id属性查找对象第一个的引用
      getElementByName():带有指定名称name查找对象的集合
      getElementByTagName():带有指定标签名TagName查找的对象的集合
     (2)根据层次关系访问节点
     parentNode  父节点
     childNodes   子节点
     firstChild   第一个子节点
     lastChild   最后一个子节点
     nextSibling   下一个节点
     previousSibling   上一个节点
    3.可兼容不同浏览器的element属性:
      firstElementChild   第一个子节点
      lastElementChild   最后一个字节点
      nextElementSibling   下一个节点
      previousElementSibling   上一个节点
    4.节点信息的属性:
      nodeName(节点名称)
      nodeValue(节点值)
      nodeType(节点类型)
    节点类型          NodeType值
      元素element        1
      属性attr           2
      文本text           3
      注释comments       8
      文档document       9
    5.操作节点
    (1)改变节点属性的方法:
       getAttribute("属性名"):用来获取属性的值
       getAttribute("属性名","属性值"):用来设置属性的值
    6.创建和插入节点
    (1)创建节点
       createElement(tagName)   创建一个标签名为tagName的新元素节点
       A.appendChild(B)   B节点追加至A节点的末尾
       insertBefore(A,B)   A节点插入B节点之前
       cloneNode(deep)   复制某个指定的节点
    7.删除和替换节点
    (1)删除和替换节点的方法
       removeChile(node)   删除指定的节点
       replaceChile(newNode,oldNode)   节点替换指定节点
    8.操作节点样式
    (1)style属性
       语法:HTML元素.style.样式属性="值";
       style对象的常用属性:background(背景),text(文本),padding(边距),border(边框)
    (2)常用事件
       onclick   单击事件
       onmouseover   鼠标移动某元素之上
       onmouseout   鼠标从某个元素移开
       onmousedown   鼠标按钮被按下
    (3)className属性
       语法:HTML元素.className="";
    9.获取元素样式
      style属性获取样式的属性值语法:HTML元素.style.样式属性;
      currentStyle对象包含style特性语法:HTML元素.currentStyle.样式属性;
      getComputedStyle()方法;方法接收两个参数,获取样式的属性值语法:
      document.defaultView.getComputedStyle(元素,null).属性;
    10.获取元素位置
    (1)元素属性应用
       offsetLeft  左边界
       offsetTop   上边界
       offsetHeight   高度
       offsetWidth   宽度
       offsetParent   偏移容器,动态定位包含元素的引用
       scrollTop   滚动条的垂直位置
       scrollLeft   滚动条的水平位置
       clientWidth   可见宽度
       clientHeight  可见高度
    语法:document.documentElement.scrollTop;
         document.documentElement.scrollLeft;
     或者
         document.body.scrollTop;
         document.body.scrollLeft;

  • 相关阅读:
    NullPointerException
    面试oracle 经常问的一个问题- 事务
    python 之 import、from、as 关键字的 白话 解释与例子
    python 学习 之 第二章(条件、循环和其他语句)
    python学习 之 第一章 (简单例子与常用数据类型)
    python中常用函数含义记录
    python 2 版本中的input() 和 raw_input() 函数的比较
    字符串处理关键字str 和 repr
    文件操作-一个可以直接复制文件数据的小程序
    C语言 32个关键字
  • 原文地址:https://www.cnblogs.com/ws1149939228/p/10987613.html
Copyright © 2011-2022 走看看