zoukankan      html  css  js  c++  java
  • 015.

    HTML DOM的新特性

    核心DOM操作网页中的各元素,可以实现动态的HTML。但是,选择某个元素非常麻烦,特是当层级越深时,操作就更麻烦。核心DOM查找元素并不实用。DOM为HTML提供了专用的方法,就是HTML DOM。

    HTML DOM的特性

    (1)每一个HTML元素(标记),都对应一个元素对象(对象)。任何HTML标记都对应一个元素对象。

    (2)每一个HTML元素的属性,都与元素对象属性一一对应。

    举例:

    <img id=“obj” src=“images/xingxing.gif” />

    <script>

    Var obj = document.getElementById(“obj”);

    obj.src = “images/yueliang.gif”;

    obj.title = “图片标题”

    obj.style = “400px;height:300px;”;

    obj.border = 1;

    obj.class = “img01”3

    </script>

    HTML DOM访问HTML的方法

    (1)使用getElementById()方法

    <div id=“box”></div>

    var obj = document.getElementById(“box”);

           obj.style = “400px;height:300px;”

           obj.setAttribute(“style”,”400px;padding:20px;”);

           //给id=box的元素添加一个图片

           Var node_img = document.createElement(“img”);

           node_img.src = “images/bg.gif”;

           obj.appendChild(node_img);

           //清除div中所有的内容

           obj.innerHTML = “”;

    (2)使用getElementsByTagName()方法

           含义:取得某一个标记下的所有指定的子标记,返回一个数组类型。

           <ul id=“obj”>

                  <li>北京市</li>

    <li>天津市</li>

    <li>武汉市</li>

    <li>上海市</li>

    <li>广州市</li>

    </ul>

           Var obj = document.getElementById(“obj”);

           Var arr = obj.getElementsByTagName(“li”);  //HTML DOM

           Var arr = obj.childNodes;  //核心DOM

           For(var i=0;i<arr.length;i++)

    {

                  arr[i].style = “color:#0000ff;text-decoration:underline;”;

                  arr[i].setAttribute(“style”,”color:#0000ff;text-decoratin:underline;”);

    }

          

    (3)使用name属性

    每个HTML标记,都有name属性,一般在表单中使用name来访问。

    <form name=“form1” onsubmit=“return checkForm()>

    用户名:<input type=“text” name=“username” />

    <input type=“submit” value=“提交表单” />

    </form>

    //对表单中的username进行验证

    function checkForm()

    {

           Var theForm = document.form1;

           if( theForm.username.value == “”){

                  alert(“用户名不能为空”);

    return false;

    }else if(theForm.username.value.length <5 && theForm.username.value.length > 20)

    {

           alert(“用户名只能介于5-20之间”);

    return false;

    }else

    {

           return true;

    }

    }

    元素对象的属性和方法

    元素对象就是HTML元素对应的对象,就叫元素对象。

    tagName:标记的名称,同nodeName一样。

    id:同元素的id属性一样

    title:同元素的title属性一样

    className:同元素的class属性一样,给元素增加一个类样式

    innerHTML:指某个标记中的所有内容,可以包含其它标记。

           nodeValue:也指某个文本节点的内容,但只能是纯文本。

    offsetWidth:指元素对象的宽度(不含滚动条中的内容)

    offsetHeight:指元素对象的高度,里面如果没有内容,则高为0

           注意:跟css中的height不太一样,CSS中的height,标记可以没有内容,但height可以设置

           offsetHeight必须要有内容,否则高为0.

    scrollWidth:包含滚动条中的内容的宽度

    scrollHeight:包含滚动条中的内容的高度

    scrollTop:指向上滚动过去的距离。

    scrollLeft:抽向左滚动过去的距离。

    offsetTop:指元素距离网页顶端的距离

    offsetLeft:指元素距离网页左端的距离

    onscroll:当滚动条移动时,执行JS程序。

    CSS DOM

    每一个HTML标记,都具有style属性,相应的,每一个元素对象都具有style属性。style属性是一个对象。

    CSS DOM就是通过style对象来访问和操作CSS。

    <script>

    function init()

    {

    //取得id=box的对象

    var obj = document.getElementById(“box”);

    //给id=box的对象增加样式

    obj.setAttribute(“style”,“400px;height:300px;”);  //核心DOM中的方法

    obj.style = “400px;height:300px;”;  //HTML DOM中的属性

    //使用style对象来增加样式

    obj.style.width = “400px”;  //给id=box的对象增加一个width的CSS属性

    obj.style.height = “300px”; //给id=box的对象增加一个height的CSS属性

    obj.style.overflow = “hidden”;  //数据溢出则隐藏

    obj.style.border = “1px solid #ff0000”  //增加边框

    obj.style.backgroundColor = “#f0f0f0”;  //背景颜色

    obj.style.paddingTop = “20px”;  //上填充为20px

    //往id=box中添加一个<h2>标记,内容随意,标题的颜色为#FF0000

    var str = “<h2 style=’color:#ff0000’>广州传智播客欢迎您</h2>”;

    str += “<ul id=’obj_ul’>”;

    str += “<li>HTML超文本标注语言</li>”;

    str += “<li>CSS层叠样式表</li>”;

    str += “</ul>”;

    obj.innerHTML = str;  //将str的内容写入到obj对象中

    //求出有多少个<li>标记

    var obj_ul = document.getElementById(“obj_ul”);

    var arr = obj_ul.getElementsByTagName(“li”);

    window.alert(“&lt;li&gt;标记的个数为:”+arr.length);

    }

    </script>

    <body onload=“init()”>

    <div id=“box”></div>

    </body>

    CSS的属性转成style对象的属性

    (1)如果CSS的属性是一个单词,可以直接写,必须为全小写。如:obj.style.width = “400px”

    (2)如果CSS的属性是多个单词用横线连接的,在书写时,将“横线”去掉,并且从第二个单词开始,每个单词的首字母要大写。如:obj.style.backgroundColor = “red”

  • 相关阅读:
    使用IDEA运行Spark程序
    scala for spark
    Spark源码编译
    5分钟弄懂Docker!
    开源HTML5 APP开发神器CanTK发布
    scala学习笔记5 (隐式转化/参数/类)
    scala学习笔记4(apply方法)
    scala学习笔记3(trait)
    做嵌入式开发时将标准输出输入到一个文件的一种方法
    使用O_APPEND标志打开文件对文件进行lseek后进行读写的问题
  • 原文地址:https://www.cnblogs.com/chun-jiang-chao-de-gu-shi/p/5584729.html
Copyright © 2011-2022 走看看