<!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. 咏南Mormot中间件接口

    咏南Mormot中间件接口 只使用了MORMOT的HTTPS.SYS作为通讯,数据引擎使用FIREDAC,数据序列/还原是自行封装. 客户端支持FDMemeTable和ClientDataSet数据集 ...

  2. iOS 程序插件及功能动态更新思路

    所用框架及语言 iOS客户端-Wax(开发愤怒的小鸟的连接Lua 和 Objc的框架),Lua,Objc, 服务端-Java(用于返回插件页面) 工具框架链接地址:Wax - https://gith ...

  3. The Topo to Raster tool returns errors 010235 and 010067转

    Problem: The Topo to Raster tool returns errors 010235 and 010067 Description The Topo to Raster geo ...

  4. .NET：System.Security.Cryptography.CryptographicException 的解决办法

    详细内容参考此网址:http://social.msdn.microsoft.com/Forums/en-US/ec93922a-fd1e-4225-b5cf-1472ebb3acd1/systems ...

  5. Git：一本书 + 一个站点，让你掌握 Git

    一本书:<<Pro Git in Chinese>> 一个网站:http://pcottle.github.io/learnGitBranching/

  6. JQuery攻略（一） 基础知识——选择器 与 DOM

    JQuery是功能丰富的Javascript库,可以帮助用户毫不费力地把动态功能应用到网页. JQuery具有许多强大的功能,包括访问部分网页,快速修改网页内容,添加动画,应用AJAX技术等等. 正因 ...

  7. IP的准确性

    最近游戏项目中更新机制有所修改,游戏启动时会从cdn上读取一个文件(约60B),但是后台异常收集系统中发现很多玩家请求不了该文件(libcurl的get请求),返回的error code有很多种,以6 ...

  8. 调用人人网API

    大致步骤与上篇调用新浪微博API类似.只是感觉新浪微博的做的更好一些,人人网的非常多要手动操作 与新浪微博类似,先在人人网开放平台http://dev.renren.com/注冊站内应用, 把该填的填 ...

  9. 也给我的E420拆机清清灰尘

    用了两年,天气燥热,是得拆开清理下了,E430清理非常方便,拆开后面挡板就行,E420就麻烦很多,需要全部拆下,关于E420的拆机网上已经有非常详细的教程了,我这里做一些补充,有兴趣的同学欢迎参考. ...

  10. lftp命令

    lftp 是一个功能强大的下载工具,它支持访问文件的协议: ftp, ftps, http, https, hftp, fish.(其中ftps和https需要在编译的时候包含openssl库).ll ...