zoukankan      html  css  js  c++  java
  • 认识DOM 第一课

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

    getElementsByName()方法

    返回带有指定名称的节点对象的集合。

    语法:

    document.getElementsByName(name)

    注意:

    1. 因为文档中的 name 属性可能不唯一,所有 getElementsByName() 方法返回的是元素的数组,而不是一个元素。

    2. 和数组类似也有length属性,可以和访问数组一样的方法来访问,从0开始.
    案例:
    <!DOCTYPE HTML>
    <html>
    <head>
    <script type="text/javascript">
    function getnum(){
      var mynode=document.getElementsByName("myt");  
      alert(mynode.length);
    }
    </script>
    </head>
    <body>
    <input name="myt" type="text" value="1">
    <input name="myt" type="text" value="2">
    <input name="myt" type="text" value="3">
    <input name="myt" type="text" value="4">
    <input name="myt" type="text" value="5">
    <input name="myt" type="text" value="6">
    
    <br />
    <input type="button" onclick="getnum()" value="看看有几项?" />
    </body>
    </html>

    getElementsByTagName()方法

    返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序。

    语法:

    getElementsByTagName(Tagname)

    说明:

    1. Tagname是标签的名称,如p、a、img等标签名。

    2. 和数组类似也有length属性,可以和访问数组一样的方法来访问,所以从0开始。

    getAttribute()方法

    通过元素节点的属性名称获取属性的值。

    语法:

    elementNode.getAttribute(name)

    说明:

    1. elementNode:使用getElementById()、getElementsByTagName()等方法,获取到的元素节点。

    2. name:要想查询的元素节点的属性名字

    案例:以下为获取的不为空的li标签title值

    <!DOCTYPE HTML>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>getAttribute()</title>
    </head>
    <body>
    <p id="intro">以下为获取的不为空的li标签title值:</p>
    <ul>
        <li title="第1个li">HTML</li>
        <li>CSS</li>
        <li title="第3个li">JavaScript</li>
        <li title="第4个li">Jquery</li>
        <li>Html5</li>
    </ul>
    <p>以下为获取的不为空的li标签title值:</p>
    <script type="text/javascript">
        var con = document.getElementsByTagName("li");
        for (var i = 0; i < con.length; i++) {
            var text = con[i].getAttribute("title");
            if (text != null) {
                document.write(text + "<br>");
            }
        }
    </script>
    </body>
    </html>

    setAttribute()方法

    setAttribute() 方法增加一个指定名称和值的新属性,或者把一个现有的属性设定为指定的值。

    语法:

    elementNode.setAttribute(name,value)

    说明:

    1.name: 要设置的属性名。

    2.value: 要设置的属性值。

    注意:

    1.把指定的属性设置为指定的值。如果不存在具有指定名称的属性,该方法将创建一个新属性。

    2.类似于getAttribute()方法,setAttribute()方法只能通过元素节点对象调用的函数。

    案例:以下为li列表title的值,当title为空时,新设置值为"WEB前端技术"

    <!DOCTYPE HTML>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>无标题文档</title>
    </head>
    <body>
    <p id="intro">我的课程</p>
    <ul>
        <li title="JS">JavaScript</li>
        <li title="JQ">JQuery</li>
        <li title="">HTML/CSS</li>
        <li title="JAVA">JAVA</li>
        <li title="">PHP</li>
    </ul>
    <h1>以下为li列表title的值,当title为空时,新设置值为"WEB前端技术":</h1>
    <script type="text/javascript">
        var Lists = document.getElementsByTagName("li");
        for (var i = 0; i < Lists.length; i++) {
            var text = Lists[i].getAttribute("title");
            if (text == "") {
                Lists[i].setAttribute("title","web前端技术");
                document.write(Lists[i].getAttribute("title") + "<br>");
            }else{
                document.write(text + "<br>");
            }
        }
    </script>
    </body>
    </html>
  • 相关阅读:
    二进制插入 牛客网 程序员面试金典 C++ Python java
    二进制小数 牛客网 程序员面试金典 C++ Python
    二叉树中和为某一值的路径 牛客网 程序员面试金典 C++ Python
    Python matplotlib pylab 画张图
    Python matplotlib pylot和pylab的区别
    Ubuntu 16.04 curl 安装 使用
    Ubuntu 16.04 菜单栏 换位置 挪到左边 挪到下边
    Python 模块feedparser安装使用
    Ubuntu 16.04 下 旋转显示器屏幕 竖屏显示
    从 callback 到 promise
  • 原文地址:https://www.cnblogs.com/yjhua/p/4588733.html
Copyright © 2011-2022 走看看