<!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. 【OOM】GC overhead limit exceeded

    我遇到这样的问题,本地部署时抛出异常java.lang.OutOfMemoryError:GC overhead limit exceeded导致服务起不来,查看日志发现加载了太多资源到内存,本地的性 ...

  2. 【转】NoClassDefFoundError和ClassNotFoundException

    调试Hadoop源码时,一运行就报这个错误,后来发现是maven配置时,scope配置的问题, MAVEN Scope使用  相关链接:http://acooly.iteye.com/blog/178 ...

  3. http content-type accept的区别

    1.Accept属于请求头, Content-Type属于实体头. Http报头分为通用报头,请求报头,响应报头和实体报头. 请求方的http报头结构:通用报头|请求报头|实体报头 响应方的http报 ...

  4. Cornfields poj2019 二维RMQ

    Cornfields Time Limit:1000MS     Memory Limit:30000KB     64bit IO Format:%I64d & %I64u Submit S ...

  5. Reliability diagrams

    Reliability diagrams (Hartmann et al. 2002) are simply graphs of the Observed frequency of an event ...

  6. 机器学习 数据挖掘 推荐系统机器学习-Random Forest算法简介

    Random Forest是加州大学伯克利分校的Breiman Leo和Adele Cutler于2001年发表的论文中提到的新的机器学习算法,可以用来做分类,聚类,回归,和生存分析,这里只简单介绍该 ...

  7. Redis Windows版安装详解

    一.下载Redis Redis下载有两个途径一是官网.二是Github,由于Redis官方只支持Linux系统,所以官网是没有Windows版本的,不过微软开源团队维护了一份所以我们可以使用这个. 官 ...

  8. 【Windows 10 应用开发】细说文本资源文件（resw）

    最近,小戏骨版<红楼梦>很是火热,老周一口气看完了9集,一直看到 Surface 的风扇呼呼响.林黛玉和薛宝钗这两个角色都演得不怎么样,倒是演史湘云的娃娃演得不错,老周甚是喜欢. 于是,昨 ...

  9. Promise 对象

    Promise 对象用于处理异步请求,保存一个异步操作最终完成(或失败)的结果 语法 new Promise( /* executor */ function(resolve, reject) {.. ...

  10. 对象反序列化时,抛出java.io.StreamCorruptedException: invalid type code: AC异常

    问题描述:在使用java.io.ObjectInputStream类的readObject()方法去读取包含有序列化了多个(两个及两个以上)类的文件时,当读取到第二个类时,会抛出题目中提到的异常. 原 ...