<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <style type="text/css">

        #div{

            width:200px;

            height:200px;

            background-color:green;

        }

    </style>

</head>

<body>

    <p name="pn">哈哈</p>

    <p name="pn">呵呵</p>

    <p name="pn">嘿嘿</p>

    <p name="pn">嘻嘻</p>

    <a id="aid" title="a标签的title属性">超链接</a><br/>

    <!-- 列表 -->

    <ul>

        <li>Hello</li>

        <li>Java</li>

        <li>Script</li>

    </ul>  

    <div id="div">

        我是一个div。

        <p id="pid">div中的p节点</p>

    </div>  

    <hr/>  

    <script type="text/javascript">

        function demo() {

            var pn = document.getElementsByName("pn");              // 通过元素的name属性获取到该元素；

            var p = document.getElementsByTagName("p");             // 通过元素的标签名获取到该元素；

            document.write("pn.length = " + pn.length + "<br/>");   // 获取到的是满足条件的所有元素的集合；

            document.write("p.length = " + p.length + "<br/>");

            document.write(pn[0].innerHTML + "<br/>");

            document.write(pn[1].innerHTML + "<br/>");

            document.write(pn[2].innerHTML + "<br/>");

            document.write(pn[3].innerHTML + "<br/>");

            document.write(p[4].innerHTML + "<br/>");

            document.write("<hr/>");

        }

        demo();  

        function getAttr() {

            var aNode = document.getElementById("aid");     // 根据id获取元素；

            var attr = aNode.getAttribute("title");         // 根据元素的属性名称获取属性的值；

            var aid = aNode.getAttribute("id");

            document.write("attr = " + attr + "<br/>");

            document.write("aid = " + aid + "<br/>");

            document.write("<hr/>");

        }

        getAttr();  

        function setAttr() {

            var aNode = document.getElementById("aid");

            aNode.setAttribute("title", "a标签的新属性"); // 设置元素的属性(元素的名称，元素的属性)

            var attr = aNode.getAttribute("title");

            document.write("attr = " + attr + "<br/>");

            document.write("<hr/>");

        }

        setAttr();  

        function getChild() {

            var node = document.getElementsByTagName("ul");

            var nodeChild = node[0].childNodes;  // 获取子节点一定要写父节点的下标，一个父节点可以有多个子节点。

            // nodeChiled的长度为7，是因为<ul>和<li>标签后面的空格也算。

            document.write("nodeChild的长度 = " + nodeChild.length + "<br/>");

            // nodeType：节点类型；(1：元素节点；2：属性节点；3：文本内容；等等)

            document.write("节点类型：" + nodeChild[5].nodeType + "<br/>");

            document.write("标签中的内容：" + nodeChild[5].innerHTML + "<br/>");

            document.write("<hr/>");

        }

        getChild();  

        function getParent() {

            var node = document.getElementById("pid");  // 根据id获取到元素；

            var nodeParent = node.parentNode;           // 获取元素的父节点；

            document.write("父节点名称：" + nodeParent.nodeName + "<br/>");

            document.write("父节点的id：" + nodeParent.id + "<br/>");

            document.write("<hr/>");

        }

        getParent();  

        function createElement() {

            var body = document.body;                       // 获取需要添加子节点的父节点；

            var input = document.createElement("input");    // 创建新的节点；

            input.type = "button";      // 设置新节点的属性；

            input.value = "按钮";

            body.appendChild(input);    // 在指定的父节点下添加子节点；

            document.write("<hr/>");

        }

        createElement();  

        function insertNode() {

            var div = document.getElementById("div");

            var pid = document.getElementById("pid");

            var node = document.createElement("p");     // 创建一个p节点；

            node.innerHTML = "我是新创建的p节点";

            div.insertBefore(node, pid);

        }

        insertNode();  

        function removeNode() {

            var div = document.getElementById("div");

            div.removeChild(div.childNodes[1]); // 移除div的第一个子元素；

        }

        removeNode();  

        function getSize() {

            var width = document.documentElement.offsetWidth;   // 获取网页宽度；offsetWidth：不包括滚动条；

            var height = document.body.offsetHeight;            // 获取网页高度；scrollWidth：包括滚动条；

            document.write("网页宽度：" + width + "<br/>");

            document.write("网页高度：" + height + "<br/>");

            document.write("<hr/>");

            // 为了兼容浏览器，可以写成：

            var width2 = document.documentElement.offsetWidth || document.body.offsetHeight;

            document.write("网页宽度：" + width2 + "<br/>");

        }

        getSize();

    </script>

</body>

</html>

DOM对象操作html元素1的更多相关文章

  1. JS DOM对象控制HTML元素详解

    JS DOM对象控制HTML元素详解 方法: getElementsByName()  获取name getElementsByTagName()  获取元素 getAttribute()  获取元素 ...

  2. 使用 jQuery对象设置页面中 ＜ul＞ 元素的标记类型，并使用 DOM 对象设置 ＜li＞ 元素的浮动属性和右边距。使用jQuery 对象和 DOM 对象设置页面元素属性

    查看本章节 查看作业目录 需求说明: 使用 jQuery对象设置页面中 <ul> 元素的标记类型,并使用 DOM 对象设置 <li> 元素的浮动属性和右边距.使用jQuery ...

  3. 第30天：DOM对象操作

    JS包括三部分:ECMAscript.DOM(文档对象).BOM(浏览器对象) 一.DOM(文档对象)DOM树节点(元素.属性.标签.标记等都是节点) 二.访问节点 documment.getElem ...

  4. 原生JS中常用的Window和DOM对象操作汇总

    一.常用的Window对象操作 Window对象中又包含了document.history.location.Navigator和screen几个对象,每个对象又有自己的属性方法,这里window可以 ...

  5. dom对象操作Html,Css

    HTML: 1.不要再文档加载完使用document.write,这样会创建新的dom对象,原来的元素将被覆盖. 2.获取元素,通过getElementbyID; getElementbyTag(&q ...

  6. PHP原生DOM对象操作XML'代码'

    对于操作XML类型文件,PHP内置有一套DOM对象可以进行处理.对XML的操作,从创建.添加到修改.删除都可以使用DOM对象中的函数来进行. 创建 创建一个新的XML文件,并且写入一些数据到这个XML ...

  7. 二、JavaScript语言--JS基础--JavaScript进阶篇--DOM对象 控制HTML元素

    1.认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面 ...

  8. PHP原生DOM对象操作XML的方法解答

    创建一个新的XML文件,并且写入一些数据到这个XML文件中. /** 创建xml文件*/ $info = array(array('obj' => 'power','info' => 'p ...

  9. jQuery Dom对象操作 增、删、改、复制、包裹

    1. 增(插入) 内部插入 //向每个匹配的元素内部追加内容,为最后一个子元素$('.violet').append('<div></div>'); //把所有匹配的元素追加到 ...

随机推荐

  1. 关于.net core程序的部署

    最近发布.net core程序的时候,发现它是可以独立部署的,它支持如下两种部署方式: 依赖框架的部署FDD.只发布我们的程序,运行前用户需要手动安装.net core runtime. 独立部署SC ...

  2. WebLogic使用总结(二)——WebLogic卸载

    一.WebLogic 12c的卸载 WebLogic的卸载是非常容易的,找到WebLogic的卸载程序,如下图所示: 启动卸载程序,如下图所示:

  3. HDU 4081 Qin Shi Huang&#39;s National Road System(最小生成树/次小生成树）

    题目链接:传送门 题意: 有n坐城市,知道每坐城市的坐标和人口.如今要在全部城市之间修路,保证每一个城市都能相连,而且保证A/B 最大.全部路径的花费和最小,A是某条路i两端城市人口的和,B表示除路i ...

  4. Time Zones And Daylight Savings Time

    This page describes code for working with Time Zones and Daylight Savings Time. Neither VBA nor VB6 ...

  5. Net Framework 2.0 MSI returned error code 1603解决方法

    出现这种情况的原因,主要是用ghost做的系统,有很多系统中把ie给绑架了.下面的截图就是ghost做的系统中注册表的显示,通过上面的方法就可以解决这种Microsoft .NET Framework ...

  6. Android Service总结04 之被绑定的服务 -- Bound Service

    Android Service总结04 之被绑定的服务 -- Bound Service 版本 版本说明 发布时间 发布人 V1.0 添加了Service的介绍和示例 2013-03-17 Skywa ...

  7. 一共81个，开源大数据处理工具汇总（下），包括日志收集系统/集群管理/RPC等

    作者:大数据女神-诺蓝(微信公号:dashujunvshen).本文是36大数据专稿,转载必须标明来源36大数据. 接上一部分:一共81个,开源大数据处理工具汇总(上),第二部分主要收集整理的内容主要 ...

  8. Java/JSP获得客户端网卡MAC地址的三种方法解析

    java/jsp获得客户端(IE)网卡MAC地址的方法大概有三种. 1.通过命令方式,在客户端执行Ipconfig 等等.(java/jsp) 2.通过ActiveX的方法.(jsp) 3.通过向13 ...

  9. 【python】python安装tensorflow报错：python No matching distribution found for tensorflow==1.12.0

    python安装tensorflow报错:python No matching distribution found for tensorflow==1.12.0 python版本是3.7.2 要安装 ...

  10. C#设置有命令空间的属性

    之前被问到一个问题,C#中如何设置android:name这样的属性?我的第一反应是直接setAttribute不就可以了么 SetAttribute(name, value), 可事实上却不行,因为 ...