<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JsDOM对象</title>
    <script type="text/javascript" src="tzy.js"></script>
</head>
<body>
<p name = "pn">hello</p>
<p name = "pn">hello</p>
<p name = "pn">hello</p>
<p name = "pn">hello</p>
<a id = "aid" title = "title属性"></a>
<ul><li id="li1">1</li><li>2 3</li><li>3</li></ul>
<div id="div">
    <p id="pid">我是p节点</p>
    <p id="pid1">我是p1节点</p>
</div>
<script>
    function getName() {
        var count = document.getElementsByName("pn");//根据name获取
        alert("count长度"+count.length);//看是否获取到
        var p = count[2];
        p.innerHTML = "world";
        var count1 = document.getElementsByTagName("p");//根据标签名获取
        alert("count1长度"+count1.length);
        var p1 = count1[3];
        p1.innerHTML = "hahaha";
    }
    getName();
    function getSetAttr() {
        var a = document.getElementById("aid");//根据id获取
        var attr = a.getAttribute("title");//获取当前元素某个属性值
        alert(attr);
        a.setAttribute("id","动态被设置为id")//设置当前元素某个属性值
        var attr1 =a.getAttribute("id");
        alert(attr1);
    }
    getSetAttr();
function getChildNode(){
    var childnode = document.getElementsByTagName("ul")[0].childNodes;//获取子节点项，注意ul里面空格也会算子节点，所以要去掉空格
    alert("ul的字节点数"+childnode.length);
    alert("ul里的第一个子节点类型"+childnode[0].nodeType);//有疑问
    alert("ul里的第二个子节点类型"+childnode[1].nodeType);
}
getChildNode();
function getParentNode() {
    var li1 = document.getElementById("li1");
    alert("li1的父节点"+li1.parentNode.nodeName);//获取父节点及名字
}
getParentNode();
function createNode(){
    var body = document.body;//获取body
    var input = document.createElement("input");//创建节点
    input.type = "button";
    input.value = "自建按钮";
    body.appendChild(input);//将节点添加到body中
    //createTextNode()添加文本节点
}
    createNode();
function addNode() {
    var div = document.getElementById("div");
    var node = document.getElementById("pid");
    var newnode = document.createElement("p");
    newnode.innerHTML = "这是我添加的p节点";
    div.insertBefore(newnode,node);//添加节点到某个节点前
}
    addNode();
function removeNode() {
    var div = document.getElementById("div");
    var p = div.removeChild(div.childNodes[2]);//删除p节点因为空格算一个节点
}
    removeNode();
function getSize(){
    //offsetheight     网页尺寸（不包含滚动条）
    //scrollheight     网页尺寸（包含滚动条）
    var height = document.body.offsetHeight||document.documentElement.offsetHeight;//兼容性写法
    var width = document.body.offsetWidth;
    alert("宽度"+width+"高度"+height);
}
    getSize();
</script>
</body>
</html>

JAVAscript学习笔记 jsDOM 第五节 （原创） 参考js使用表的更多相关文章

  1. JavaScript学习笔记（十五）——对象之Date，RegExp

    在学习廖雪峰前辈的JavaScript教程中,遇到了一些需要注意的点,因此作为学习笔记列出来,提醒自己注意! 如果大家有需要,欢迎访问前辈的博客https://www.liaoxuefeng.com/ ...

  2. JAVAscript学习笔记 jsBOM 第七节 （原创） 参考js使用表

    <html> <head> <title>day02_js</title> <script type="text/javascript& ...

  3. [ExtJS5学习笔记]第二十五节 利用window.open()函数实现ExtJS5的登陆页面跳转

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/40427543 mvvm方式实现登陆的博客:http://blog.csdn.net/s ...

  4. [ExtJS5学习笔记]第十五节 Extjs5表格显示不友好？panel的frame属性在作怪

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/39057243 sencha官方API:http://docs.sencha.com/e ...

  5. 【Html 学习笔记】第五节——表格

    表格也是日常用到的. 普通表格:<table> 表格边框:border 表头:th 表格标题:caption 横/纵向合并的单元格:colspan .rawspan 表格内标签: 单元格间 ...

  6. [ExtJS5学习笔记]第二十九节 sencha ext js 5.1.0中动态更换皮肤主题

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/42016107 本文作者:sushengmiyan ------------------ ...

  7. Javascript学习笔记——操作浏览器对象

    Javascript学习笔记 目前尝试利用javascript去对于一个浏览器对象完成一系列的访问及修改, 浏览器是网页显示.运行的平台,常用的浏览器有IE.火狐(Firefox).谷歌(Chrome ...

  8. Java程序猿JavaScript学习笔记（2——复制和继承财产）

    计划和完成在这个例子中,音符的以下序列: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaSc ...

  9. VSTO学习笔记（十五）Office 2013 初体验

    原文:VSTO学习笔记(十五)Office 2013 初体验 Office 2013 近期发布了首个面向消费者的预览版本,我也于第一时间进行了更新试用.从此开始VSTO系列全面转向Office 201 ...

随机推荐

  1. 如何用Python脚本从文件读取数据？

    最近自学Python的进度比较慢,工作之余断断续续的看着效率比较低,看来还是要狠下心来每天进步一点点. 还记得前段时间陈大猫提了一口"先实现用python读取本地文件",碰巧今天看 ...

  2. SYSTEM_INFO

    SYSTEM_INFO结构体包含了当前计算机的信息.这个信息包括计算机的体系结构.中央处理器的类型.系统中中央处理器的数量.页面的大小以及其他信息. SYSTEM_INFO,Win32 API函数Ge ...

  3. 【译】Yarn上常驻Spark-Streaming程序调优

    作者从容错.性能等方面优化了长时间运行在yarn上的spark-Streaming作业 对于长时间运行的Spark Streaming作业,一旦提交到YARN群集便需要永久运行,直到有意停止.任何中断 ...

  4. S2_SQL_第五章

    UNIQUE|FULLTEXT|SPATIAL:分别表示唯一索引,全文索引和空间索引,为可选参数index_name;指定索引名称table_name;指定创建索引表名colymn_name;指定需要 ...

  5. 百度地图JS调用示例

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. JS 函数作用域及变量提升那些事！

    虽然看了多次js函数作用域及变量提升的理论知识,但小编也是一知半解~ 这几天做了几道js小题,对这部分进行了从新的理解,还是有所收获的~ 主要参考书籍: <你不知道的JavaScript(上卷) ...

  7. 一款低延迟的分布式数据库同步系统--databus

    每次看到马路对面摩托罗拉的大牌子,都想起谷歌125亿美元收购摩托罗拉移动,后来又以29亿美元卖给联想的事情.谷歌所做的决策都比较考虑长远利益,在这串交易中,谷歌获得了摩托罗拉最有价值的几千项专利,稳健 ...

  8. 【解决方案】M2Crypto不支持python3

    问题现象:python3的环境下,导入M2Crypto模块报错 "ModuleNotFoundError: No module named 'M2Crypto",通过pip ins ...

  9. string使用

    一.list和string转化 List转字符串,用逗号隔开 List<string> list = new List<string>();list.Add("a&q ...

  10. 【转】IO流程

    原文地址:http://blog.chinaunix.net/uid-26922071-id-3954900.html IO之流程与buffer概览 为了说明这个流程,还是用图来描述一下比较直观.   ...