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

    1:DOM:Document Object Model(文档对象模型)

    DOM操作分类是什么?

    DOM Core,HTML-DOM,CSS-DOM

    节点和节点的关系:

    文档:document——根节点:<html>——(

    <head>(<title>,<mate>)

    <body>(<img>,<h1>,<p>)

    父子标签:一个包含一个(ul,li);

    兄弟标签:同级(li,li)

    2:如何访问节点?

    使用getElement系列方法访问指定节点 getElementById() getElementsByName() getElementsByTagName() 根据层次关系访问节点

    3:如何操作节点的属性?

    节点属性:parentNode,childNodes,fristChild,lastChild,nextSibling,previousSibling,

                  fristElementChild返回节点的第一个子节点

                  lastElementChild返回字节的最后一个子节点

                  nextElementSibling下一个节点

                  previousElementsibling上一个节点

    4:节点信息:

    nodeName:节点名称

    nodeValue:节点值

    nodeType:节点类型(元素element  1,属性attr  2,文本text  3,注释comments  8,文档document  9)

    5:操作节点:

    操作节点的属性(

    getAttribute("属性名") setAttribute("属性名","属性值")

    创建和插入节点(createElement( tagName)       创建一个标签名为tagName的新元素节点

    A.appendChild( B)      把B节点追加至A节点的末尾

    insertBefore( A,B )      把A节点插入到B节点之前

    cloneNode(deep)          复制某个指定的节点

    删除和替换节点(

    removeChild( node)         删除指定的节点

    replaceChild( newNode, oldNode)         用其他的节点替换指定的节点

    6:操作节点样式

    改变样式的属性 :

    style属性:

    语法:HTML元素.style.样式属性="值";

    onclick:当用户单击某个对象时调用事件

    onmouseover:鼠标移到某元素上

    onmouseout:鼠标从某元素上移开

    onmousedown:鼠标按钮被按下

     className属性:

    语法:

    HTML元素.className="样式名称“;

    7:获取元素的样式

    HTML元素.style.样式属性;

    document.defaultView.getComputedStyle(元素,null).属性;

    HTML元素. currentStyle.样式属性;

    8:元素属性应用

    语法:

    document.documentElement.scrollTop; document.documentElement.scrollLeft;

    或者

    document.body.scrollTop; document.body.scrollLeft;

    9:操作节点

    操作节点的属性 创建和插入节点 删除和替换节点 操作节点样式 获取元素的样式

  • 相关阅读:
    最小的k个数
    复杂链表的复制
    二叉树中和为某一值的路径
    二叉搜索树的后序遍历序列
    STL之Deque容器
    STL之迭代器
    STL之Vector容器
    STL之string
    STL(标准模板库)基本概念
    文件I/O
  • 原文地址:https://www.cnblogs.com/zjx-959/p/13158804.html
Copyright © 2011-2022 走看看