<!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. React Router 按需加载+服务器渲染的闪屏问题

    伴随着React协议的『妥协』(v16采用MIT),React为项目的主体,这个在短期内是不会改变的了,在平时使用过程中发现了如下这个问题: 在服务器渲染的时候,刷新页面会出现闪屏的现象(白屏一闪而过 ...

  2. Spring Framework 5.0 新特性

    Spring Framework 5.0是在Spring Framework 4.0之后将近四年内一次重大的升级. 在这个时间框架内,主要的发展之一就是Spring Boot项目的演变. Spring ...

  3. 51nod 1451 合法三角形 判斜率去重，时间复杂度O（n^2）

    题目: 这题我WA了3次,那3次是用向量求角度去重算的,不知道错在哪了,不得不换思路. 第4次用斜率去重一次就过了. 注意:n定义成long long,不然求C(3,n)时会溢出. 代码: #incl ...

  4. hdu 2609 How many 最小表示法

    How many Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Su ...

  5. 我的three.js学习记录（一）

    在之前因为项目需要使用WebGL技术做网页应用,但是苦于自己没有接触,只是使用过OpenGL.然后接触到了thre.js这个第三方库之后我突然心情很愉快,这将节省我很多时间. 过了这个项目之后,就再也 ...

  6. Ubuntu 定时任务中的环境变量设置

    背景 1,定时任务命令 crontab -e 2,默认的环境变量 SHELL=/bin/sh PATH=/usr/bin:/bin PWD=/home/owl LANG=zh_CN.UTF- SHLV ...

  7. 22.Linux-块设备驱动之框架详细分析(详解)

    本节目的: 通过分析块设备驱动的框架,知道如何来写驱动 1.之前我们学的都是字符设备驱动,先来回忆一下 字符设备驱动: 当我们的应用层读写(read()/write())字符设备驱动时,是按字节/字符 ...

  8. ASP.NET没有魔法——ASP.NET MVC 与数据库之MySQL

    之前介绍了My Blog如何使用ADO.NET来访问SQL Server获取数据.本章将介绍如何使用My SQL来完成数据管理. 在使用My SQL之前需确保开发环境中安装了My SQL数据库和Con ...

  9. mysql explain 分析sql语句

    鉴于最近做的事情,需要解决慢sql的问题,现补充一点sql语句性能分析之explain的使用方式! 综合返回数据情况,分析各个参数,可以了解sql 使用方法:explain  + sql语句 如 :e ...

  10. SVN版本控制图标经常延时显示或未显示问题解决方法

    项目中,使用svn经常遇到,文件或文件夹图标延时显示或未显示的问题,终于找到办法解决 客户端:TortoiseSVN