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. 《JavaScript高级程序设计》读书笔记（三）基本概念第六小节理解函数

    内容---语法---数据类型---流程控制语句 上一小节---理解函数 本小节 函数--使用function关键字声明,后跟一组参数以及函数体 function functionName(arg0, ...

  2. linux理论知识点（用于考试）

    ps:为其十天左右的linux培训即将结束了,未雨绸缪,为了更好的通过之后的考试,提前多看些考试题和知识点.这是在chinaunix论坛看到的一个帖子,贴来分享. 原文地址:[http://bbs.c ...

  3. Linux 笔记：文件名

    文件名 Linux 系统区分英文字符的大小写.比如,myfile, Myfile 和 myFILE表示的是三个不同的文件.同样,用户密码和登录名也需要区分大小写(这里沿用了Unix 和 C 语言的命名 ...

  4. CSS3绘制不规则图形，代码收集

    三角形系列(三角形.倒三角.左三角.右三角.左上三角.右上三角.左下三角.右下三角) 主要用到的是:宽度高度设置为0, border的各个边的设置(各个边的透明或不透明): .triangle-up ...

  5. Spring Boot 使用 Dom4j XStream 操作 Xml

    Xml 现在仍然占据着比较重要的地位,比如微信接口中使用了 Xml 进行消息的定义.本章重点讨论 Xml 的新建.编辑.查找.转化,可以这么理解,本章是使用了 dom4j.xstream 也是在开发者 ...

  6. Doc-Compose

    一.安装sudo curl -L https://github.com/docker/compose/releases/download/1.24.1/docker-compose-`uname -s ...

  7. 吴裕雄 PYTHON 神经网络——TENSORFLOW 正则化

    import tensorflow as tf import matplotlib.pyplot as plt import numpy as np data = [] label = [] np.r ...

  8. 吴裕雄 python 神经网络——TensorFlow训练神经网络：MNIST最佳实践

    import os import tensorflow as tf from tensorflow.examples.tutorials.mnist import input_data INPUT_N ...

  9. Edge Beta Android版更新已启用新图标

    导读 微软Edge Beta Android版更新已启用新图标设计 IT之家消息 适用于Android的Microsoft Edge Beta已于近日获得更新,最显著的特征就是使用了新图标设计.该图标 ...

  10. 【PAT甲级】1051 Pop Sequence (25 分)（栈的模拟）

    题意: 输入三个正整数M,N,K(<=1000),分别代表栈的容量,序列长度和输入序列的组数.接着输入K组出栈序列,输出是否可能以该序列的顺序出栈.数字1~N按照顺序随机入栈(入栈时机随机,未知 ...