zoukankan      html  css  js  c++  java
  • JavaScript基础2---控制权DOM操作

    文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。
    DOM将HTML文档呈现为带有元素,属性和文本的树结构(节点树)。

    HTML文档可以说由节点构成的集合,三种常见的DOM节点:

    1.元素节点:上图中<html>,<body>,<p>等都是元素节点,即标签。
    2.文本节点:向用户展示的内容,如<li>...</li>中的JavaScript,DOM,CSS等文本
    3.属性节点:元素属性,如<a>标签的链接属性href="http://www.imooc.com"。

    <a href="http://www.imooc.com">JavaScript DOM</a>

    通过ID获取元素
      网页由标签将信息组织起来,而标签的id属性值是唯一的,就像是每人有一个身份证号一样,只要
    通过身份证号就可以找到对应的人。那么我们可以通过id先找到标签,再进行操作。

    语法: document.getElementById(“id”) 

    例子:

    结果:null或[object HTMLParagraphElement]

    注:获取的元素是一个对象,如想对元素进行操作,我们要通过它的属性或方法。

    innerHTML属性
       innerHTML属性用于获取或替换HTML元素的内容
    语法:Object.innerHTML
    注意:1.Object是获取的元素对象,如通过document.getElementById("ID")获取的元素
             2.注意书写,innerHTML区分大小写
    例子:

    改变HTML样式
    语法:Object.style.property = new style;
    注意:Object是获取的元素对象,如通过document.getElementById("ID");
    基本属性表:

    例子:

    <p id="pcon">Hello World!</p>
    <script>
       var mychar = document.getElementById("pcon");
       mychar.style.color="red";
       mychar.style.fontSize="20";
       mychar.style.backgroundColor ="blue";
    </script>
    

      

    显示和隐藏:
    语法:Object.style.display = value;
    value值

  • 相关阅读:
    本周一些笔记
    [atlas] UpdatePanel失灵的解决办法
    VVR常见案例
    html5与css3权威指南读书笔记第七章 本地存储 Amy
    html5文件 Amy
    javascript原型的引入 Amy
    jquery控制背景图片的移动 Amy
    cssfloat如何改变块级元素、行内元素的性质 Amy
    html5与css3权威指南读书笔记css3中的动画功能 Amy
    html5 表单 Amy
  • 原文地址:https://www.cnblogs.com/zsboy/p/4089014.html
Copyright © 2011-2022 走看看