<!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. [js高手之路] html5新增的定时器requestAnimationFrame实战进度条

    在requestAnimationFrame出现之前,我们一般都用setTimeout和setInterval,那么html5为什么新增一个requestAnimationFrame,他的出现是为了解 ...

  2. JAVA 反射（1）

    getDeclaredField是可以获取一个类的所有字段. getField只能获取类的public 字段.

  3. include 和require的区别

    相同点:include和require 都能把另外一个文件包含到当前文件中. 不同点:1.使用include时,当包含的文件不存在时,系统会报出警告级别的错误,程序会继续往下执行.   使用requi ...

  4. http://codeforces.com/contest/536/problem/B

    B. Tavas and Malekas time limit per test 2 seconds memory limit per test 256 megabytes input standar ...

  5. Merge Two Binary Trees

    Given two binary trees and imagine that when you put one of them to cover the other, some nodes of t ...

  6. 华为olt ma5680t常用命令详解

    进入待替换的故障ONU所注册的单板 interface epon 0/1         //此处可以通过查看PON口下设备状态来获取需要替换的ONU ID.假设故障设备位于2端口,ID为6 ont ...

  7. Python系列之lambda、函数、序列化

    lambda 在python中使用lambda来创建匿名函数,而用def创建的方法是有名称的,除了从表面上的方法名不一样外,python lambda还有哪些和def不一样呢? 1 python la ...

  8. （图文实例）用VB.net操作SQLite数据库

    转载请注明出处:HateMath归来(http://www.cnblogs.com/hatemath/) 环境: Visual Studio 社区版 64位 Windows 7系统 新建的解决方案基于 ...

  9. SAP 发送邮件 面向对象

    REPORT ZMMR0068_YYN. CONSTANTS: gc_tab TYPE c VALUE cl_bcs_convert=>gc_tab, "CL_ABAP_CHAR_UT ...

  10. JavaScript观察者模式

    观察者模式观察者模式又叫发布订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得 ...