JAVAscript学习笔记 jsDOM 第五节 (原创) 参考js使用表
<!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使用表的更多相关文章
- JavaScript学习笔记(十五)——对象之Date,RegExp
在学习廖雪峰前辈的JavaScript教程中,遇到了一些需要注意的点,因此作为学习笔记列出来,提醒自己注意! 如果大家有需要,欢迎访问前辈的博客https://www.liaoxuefeng.com/ ...
- JAVAscript学习笔记 jsBOM 第七节 (原创) 参考js使用表
<html> <head> <title>day02_js</title> <script type="text/javascript& ...
- [ExtJS5学习笔记]第二十五节 利用window.open()函数实现ExtJS5的登陆页面跳转
本文地址:http://blog.csdn.net/sushengmiyan/article/details/40427543 mvvm方式实现登陆的博客:http://blog.csdn.net/s ...
- [ExtJS5学习笔记]第十五节 Extjs5表格显示不友好?panel的frame属性在作怪
本文地址:http://blog.csdn.net/sushengmiyan/article/details/39057243 sencha官方API:http://docs.sencha.com/e ...
- 【Html 学习笔记】第五节——表格
表格也是日常用到的. 普通表格:<table> 表格边框:border 表头:th 表格标题:caption 横/纵向合并的单元格:colspan .rawspan 表格内标签: 单元格间 ...
- [ExtJS5学习笔记]第二十九节 sencha ext js 5.1.0中动态更换皮肤主题
本文地址:http://blog.csdn.net/sushengmiyan/article/details/42016107 本文作者:sushengmiyan ------------------ ...
- Javascript学习笔记——操作浏览器对象
Javascript学习笔记 目前尝试利用javascript去对于一个浏览器对象完成一系列的访问及修改, 浏览器是网页显示.运行的平台,常用的浏览器有IE.火狐(Firefox).谷歌(Chrome ...
- Java程序猿JavaScript学习笔记(2——复制和继承财产)
计划和完成在这个例子中,音符的以下序列: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaSc ...
- VSTO学习笔记(十五)Office 2013 初体验
原文:VSTO学习笔记(十五)Office 2013 初体验 Office 2013 近期发布了首个面向消费者的预览版本,我也于第一时间进行了更新试用.从此开始VSTO系列全面转向Office 201 ...
随机推荐
- java集合系列——List集合之LinkedList介绍(三)
1. LinkedList的简介 JDK 1.7 LinkedList是基于链表实现的,从源码可以看出是一个双向链表.除了当做链表使用外,它也可以被当作堆栈.队列或双端队列进行操作.不是线程安全的,继 ...
- 洗礼灵魂,修炼python(3)--从一个简单的print代码揭露编码问题,运行原理和语法习惯
前期工作已经准备好后,可以打开IDE编辑器了,你可以选择python自带的IDLE,也可以选择第三方的,这里我使用pycharm--一个专门为python而生的IDE 按照惯例,第一个python代码 ...
- 【POJ】1067 取石子游戏(博弈论)
Description 有两堆石子,数量任意,可以不同.游戏开始由两个人轮流取石子.游戏规定,每次有两种不同的取法,一是可以在任意的一堆中取走任意多的石子:二是可以在两堆中同时取走相同数量的石子.最后 ...
- H5新手快速入门 简单布局
布局*{ margin: 0; padding: 0;}.quan{ width: 100%; height: 2000px; background: black url("../ima/b ...
- DevOps之服务手册
唠叨话 关于德语噢屁事的知识点,仅提供精华汇总,具体知识点细节,参考教程网址,如需帮助,请留言. <DevOps服务手册(Manual)> <IT资源目标化>1.设施和设备(I ...
- Masonry框架源码深度解析
Masonry是iOS在控件布局中经常使用的一个轻量级框架,Masonry让NSLayoutConstraint使用起来更为简洁.Masonry简化了NSLayoutConstraint的使用方式,让 ...
- 【转载】CSS3 Transitions, Transforms和Animation使用简介与应用展示
文章转载自 张鑫旭-鑫空间-鑫生活 http://www.zhangxinxu.com/wordpress/ 原文链接:http://www.zhangxinxu.com/wordpress/?p=1 ...
- 原生js反转字符串
//直接操作 var str='nama';var rts=str.split('').reverse().join(''); //String上拓展方法String.prototype.revers ...
- MySQL索引语法+使用场景
MySQL索引语法 建表时添加索引 建表同时建立单索引 CREATE TABLE t_user1(id INT , userName VARCHAR(20), PASSWORD VARCHAR(20) ...
- json生成方式
<script type="text/javascript"> //初始化需要json化的参数 var data = { No: No, Type: Type }; / ...