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. VBA 学习笔记 - 运算符

    学习资料:https://www.yiibai.com/vba/vba_operators.html 算术运算符 加减乘除模指,这个没啥特别的. 比较运算符 和 Lua 相比,判断相等变成了一个等于号 ...

  2. acm数论之旅---扩展欧几里得算法

    度娘百科说: 首先, ax+by = gcd(a, b) 这个公式肯定有解 (( •̀∀•́ )她说根据数论中的相关定理可以证明,反正我信了) 所以 ax+by = gcd(a, b) * k 也肯定 ...

  3. 基于 VS2019 配置 opencv4.x

    创建新项目 添加主函数文件 配置 注意,如果直接使用项目的属性去配置,那么创建新的项目的时候,还需要再配置一遍,在属性管理器里配置,创建新项目的时候,会自动应用 接下来,开始为软件配置目录和附加项.右 ...

  4. Bugku-CTF社工篇之简单的个人信息收集

  5. POJ3264 Balances Lineup

    建两颗线段树分别存最大和最小值,模板题~ #include<cstdio> #include<algorithm> #include<cstring> using ...

  6. BUG搬运工：CSCvp31778-3802 apsw_watchdog: WARNING: System memory is running low

    如下bug主要针对Cisco COS AP比如18.28.38... 主要现象: AP上连关联的终端显示的是信号满格,但是无法访问内网,所有的终端都这样,只有重启AP后才可以解决. 频率: 这种现象有 ...

  7. 洛谷P1144最短路计数

    题目描述 给出一个NNN个顶点MMM条边的无向无权图,顶点编号为1−N1-N1−N.问从顶点111开始,到其他每个点的最短路有几条. 输入格式 第一行包含222个正整数N,MN,MN,M,为图的顶点数 ...

  8. sqlserver数据库中char、varchar、text与nchar、nvarchar、ntext数据类型使用详解

    很多开发者进行数据库设计的时候往往并没有太多的考虑char, varchar类型,有的是根本就没注意,因为存储价格变得越来越便宜了,忘记了最开始的一些基本设计理论和原则,这点让我想到了现在的年轻人,大 ...

  9. 加载Properties配置文件

    /** * 加载Properties配置文件 * * @author ZhangHaiNing * @param file 要读取的文件 * @return */ public static Prop ...

  10. 【转】使用shell登录远程服务器执行多条命令，ssh登录之后执行脚本文件

    原文:https://blog.csdn.net/qq_36622490/article/details/100773589 这个需求主要是我在jenkins中pipeline的代码里,需要使用she ...