<!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. java集合系列——List集合之LinkedList介绍（三）

    1. LinkedList的简介 JDK 1.7 LinkedList是基于链表实现的,从源码可以看出是一个双向链表.除了当做链表使用外,它也可以被当作堆栈.队列或双端队列进行操作.不是线程安全的,继 ...

  2. 洗礼灵魂，修炼python（3）--从一个简单的print代码揭露编码问题，运行原理和语法习惯

    前期工作已经准备好后,可以打开IDE编辑器了,你可以选择python自带的IDLE,也可以选择第三方的,这里我使用pycharm--一个专门为python而生的IDE 按照惯例,第一个python代码 ...

  3. 【POJ】1067 取石子游戏（博弈论）

    Description 有两堆石子,数量任意,可以不同.游戏开始由两个人轮流取石子.游戏规定,每次有两种不同的取法,一是可以在任意的一堆中取走任意多的石子:二是可以在两堆中同时取走相同数量的石子.最后 ...

  4. H5新手快速入门 简单布局

    布局*{ margin: 0; padding: 0;}.quan{ width: 100%; height: 2000px; background: black url("../ima/b ...

  5. DevOps之服务手册

    唠叨话 关于德语噢屁事的知识点,仅提供精华汇总,具体知识点细节,参考教程网址,如需帮助,请留言. <DevOps服务手册(Manual)> <IT资源目标化>1.设施和设备(I ...

  6. Masonry框架源码深度解析

    Masonry是iOS在控件布局中经常使用的一个轻量级框架,Masonry让NSLayoutConstraint使用起来更为简洁.Masonry简化了NSLayoutConstraint的使用方式,让 ...

  7. 【转载】CSS3 Transitions, Transforms和Animation使用简介与应用展示

    文章转载自 张鑫旭-鑫空间-鑫生活 http://www.zhangxinxu.com/wordpress/ 原文链接:http://www.zhangxinxu.com/wordpress/?p=1 ...

  8. 原生js反转字符串

    //直接操作 var str='nama';var rts=str.split('').reverse().join(''); //String上拓展方法String.prototype.revers ...

  9. MySQL索引语法+使用场景

    MySQL索引语法 建表时添加索引 建表同时建立单索引 CREATE TABLE t_user1(id INT , userName VARCHAR(20), PASSWORD VARCHAR(20) ...

  10. json生成方式

    <script type="text/javascript"> //初始化需要json化的参数 var data = { No: No, Type: Type }; / ...