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. oracle学习笔记（十四） 数据库对象 索引 视图 序列 同义词

    数据库对象 用户模式:指数据库用户所创建和存储数据对象的统称.在访问其它用户模式的数据库对象时需加上用户模式. 如:scott.emp, scott.dept等. 数据库对象包括:表.视图.索引.序列 ...

  2. 吴裕雄--天生自然TensorFlow2教程：单输出感知机及其梯度

    import tensorflow as tf x = tf.random.normal([1, 3]) w = tf.ones([3, 1]) b = tf.ones([1]) y = tf.con ...

  3. 第十八天re模块和&#183;正则表达式

    1.斐波那契  # 问第n个斐波那契数是多少 def func(n): if n>2: return func(n-2)+func(n-1) else: return 1 num=int(inp ...

  4. idea2018.3.6，离线使用maven的方法

    (1)想办法拷贝联网电脑上已经下载好的仓库文件夹mavenRepository到离线环境的电脑上: (2)idea中按照如下图中配置: (3)打开 User settings file中设置的sett ...

  5. 各大厂商发力5G新机，未来全球手机市场或将呈现新格局

    随着5G商用将正式于今年开启落地,运营商和手机厂商都在为新一代网络制式积极做好准备.对于运营商来说,它们在不断增加5G基站的建设,让5G信号覆盖更广泛的范围.而对于手机厂商来说,它们在努力推出旗下的5 ...

  6. Community Cloud零基础学习（一）启用以及简单配置

    本篇参考: https://trailhead.salesforce.com/en/content/learn/trails/communities https://trailhead.salesfo ...

  7. MySQL高级-索引1

    1.索引是什么 索引(Index)是帮助MySQL高效获取数据的数据结构.可以得到索引的本质:索引是数据结构. 可以理解为“排好序的快速查找数据结构” 在数据之外,数据库系统还维护着满足特定查找算法的 ...

  8. Python 基础之正则之一 单字符,多字符匹配及开头结尾匹配

    一.正则表达式之单个字符匹配 格式:lst = re.findall(正则表达式,要匹配的字符串)预定义字符集 匹配内容 .匹配任意字符,除了换行符\n \d匹配数字 \D匹配非数字 \w匹配字母或数 ...

  9. 【协作式原创】自己动手写docker之run代码解析

    linux预备知识 urfave cli预备知识 准备工作 阿里云抢占式实例:centos7.4 每次实例释放后都要重新安装go wget https://dl.google.com/go/go1.1 ...

  10. 微信小程序 列表倒计时

    最近要实现一个列表倒计时的功能,写了个demo 展示图 <view class="center colu"> <view class="time&quo ...