1

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>DOM对象控制HTML</title>

</head>

<body>

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

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

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

    <a id="aid" title="得到了a标签的属性">hello</a>

    <a id="aid2">aid2</a>

    <ul><li>1</li><li>2</li><li>3</li></ul>

    <div id="div">

        <p id="pid">div的P元素</p>

    </div>

    <script>

        function getName() {

            var count = document.getElementsByName("pn");

            alert(count.length);

            var p = count[2];

            p.innerHTML = "World";

        }

        function getAttr() {

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

            var attr = anode.getAttribute("id");

            alert(attr);

        }

        function setAttr() {

            var anode = document.getElementById("aid2");

            anode.setAttribute("title", "动态设置a的title属性");

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

            alert(attr);

        }

        function getChildNode() {

            var childnode = document.getElementsByTagName("ul")[0].childNodes;

            alert(childnode.length);

            alert(childnode[0].nodeType)

        }

        function getParentNode() {

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

            alert(div.parentNode.nodeName);

        }

        function createNode() {

            var body = document.body;

            var input = document.createElement("input");

            input.type = "button";

            input.value = "按钮";

            body.appendChild(input);

        }

        function addNode() {

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

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

            var newnode = document.createElement("p");

            newnode.innerHTML = "动态添加体格p元素";

            div.insertBefore(newnode, node);

        }

        function removeNode() {

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

            var p = div.removeChild(div.childNodes[1]);

        }

        function getSize() {

            var width = document.body.offsetWidth || document.documentElement.offsetWidth;

            var height = document.body.offsetHeight;

            alert(width + " " + height);

        }

        getSize();

    </script>

</body>

</html>

4.8.2.JSDOM对象控制HTML元素详解的更多相关文章

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

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

  2. javascript - DOM对象控制HTML元素详解

    1.方法   getElementsByName() -- 获取name getElementByTagName() -- 获取  getAttribute()         --获取元素属性 se ...

  3. web前端学习（四）JavaScript学习笔记部分（7）-- JavaScript DOM对象控制HTML元素详解

    1.方法 getElementsByName() 获取name 可以获取一个数组类型数据(参数加引号) getElementsByTagName() 获取元素   getAttribute() 获取元 ...

  4. html5中output元素详解

    html5中output元素详解 一.总结 一句话总结: output元素是HTML5新增的元素,用来设置不同数据的输出,没什么大用,了解即可 <form action="L3_01. ...

  5. 史上最全web.xml配置文件元素详解

    一.web.xml配置文件常用元素及其意义预览 <web-app> <!--定义了WEB应用的名字--> <display-name></display-na ...

  6. asp.net中C#对象与方法 属性详解

    C#对象与方法 一.相关概念: 1.对象:现实世界中的实体 2. 类:具有相似属性和方法的对象的集合 3.面向对象程序设计的特点:封装  继承 多态 二.类的定义与语法 1.定义类: 修饰符 类名称 ...

  7. java对象池commons-pool-1.6详解（一）

    自己的项目中用到了 对象池 commons-pool: package com.sankuai.qcs.regulation.protocol.client; import com.dianping. ...

  8. web.xml配置文件元素详解

    一.web.xml配置文件常用元素及其意义 1 <web-app> 2 3 <!--定义了WEB应用的名字--> 4 <display-name></disp ...

  9. JavaScript对象的property属性详解

    JavaScript对象的property属性详解:https://www.jb51.net/article/48594.htm JS原型与原型链终极详解_proto_.prototype及const ...

随机推荐

  1. 关于雷达（Radar）信道

    有些时候,我们在实际的无线网络中,会遇到无线信道一致flapping的情况,即便我们自定义了信道的,发现也会出现flapping.如果这种情况,可能需要确认是否你使用的信道上检测到了雷达. 这里记录一 ...

  2. C++11特性中基于范围的for循环

    本文摘录柳神笔记:   除了像C语⾔的for语句 for (i = 0; i < arr.size(); i++) 这样,C++11标准还为C++添加了⼀种新的 for 循环⽅ 式,叫做基于范围 ...

  3. C++11常用特性介绍——array容器

    std::array是具有固定大小的数组,支持快速随机访问,不能添加或删除元素,定义于头文件<array>中. 一.概要 array是C++11新引入的容器类型,与内置数组相比,array ...

  4. RPC远程服务调用

    RPC远程服务调用: RPC 的全称是 Remote Procedure Call 是一种进程间通信方式. 它允许程序调用另一个地址空间(通常是共享网络的另一台机器上)的过程或函数,而不用程序员显式编 ...

  5. MyBatis映射器（转载）

    什么是MyBatis映射器? MyBatis框架包括两种类型的XML文件,一类是配置文件,即mybatis-config.xml,另外一类是映射文件,例如XXXMapper.xml等.在MyBatis ...

  6. php 安装 swoole

    1.安装swoole cd /usr/local/src wget https://github.com/swoole/swoole-src/archive/v1.9.1-stable.tar.gz ...

  7. Java 笔试题

    有一些还是存在问题,欢迎大家一起探讨. 在Java类中,使用以下( )声明语句来定义公有的int型常量MAX. A. public int MAX = 100; B. final int MAX = ...

  8. 电影推荐算法---HHR计划

    1,先看FM部分. 2,看看冷启动. 0,热门召回源. 1,男女召回源,年龄召回源,职业召回源,score最高. 2,男女年龄职业相互组合: 3,存入redis.天级别更新. 3,召回+排序先搞懂. ...

  9. 简单优化MySQL（后续在补充）

    如何优化: ---从设计表结构的角度出发: 用多个小表代替一个大表,注意不要过度设计 批量插入代替循环插入 合理控制缓存空间大小,一般来说其大小设置为几十兆比较合适 可以通过 SQL_CACHE 和 ...

  10. Java基础 -5.3

    方法的递归调用 指的是一个方法自己调用自己的情况,利用递归调用可以解决一些重复且麻烦的问题 在进行我们递归调用的时候一般要考虑如下几点问题 一定要设置方法递归调用的结束条件 每一次调用的过程之中一定要 ...