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 ...
随机推荐
- TCP/IP(四)网络层
前言 前面给大家介绍了计算机网络的基本概述,物理层和数据链路层.这一篇给大家介绍面试中经常会被问到的网络层.在介绍之前我们回顾一下之前学习的知识! CP/IP协议栈:物理层.链路层.网络层.传输层.应 ...
- MySQL锁和事务(一):InnoDB锁(MySQL 官方文档粗翻)
// 写在前面,实际上,数据库加锁的类型和范围受到多种因素的影响,例如数据库隔离等级,SQL语句,是否使用主键.索引等等.可以查看博文: http://www.cnblogs.com/zhaoyl/p ...
- Cow Exhibition 变种背包
Cow Exhibition Time Limit:1000MS Memory Limit:65536KB 64bit IO Format:%I64d & %I64u Subm ...
- 我从.net转别的语言的遭遇,现在貌似又要回头(一)
从2016年开始,作为公司最后的一个.net部门,被迫转向了php. php里面装得一手什么逼呢? 首先,你要来几本入门的书,linux,mysql,php基础语法,nginx或apache.哥那时候 ...
- linux RPM软件包管理
linux RPM软件包管理 目录 1.软件包的介绍 2.rpm包管理 3.rpm包管理前端工具 1.软件包的介绍 在我们在对软件包管理前,先对软件包有个很好的了解,这样更方便我们来对其进行管理. 软 ...
- PHP-FPM进程池探秘
PHP 支持多进程而不支持多线程:PHP-FPM 在进程池中运行多个子进程并发处理所有连接请求.通过 ps 查看PHP-FPM进程池(pm.start_servers = 2)状态如下: root@d ...
- swiper 初始化的两个小坑
1.当swiper loop设为true时,同时你又改变了sliderPerview的值,这时候轮播,按prev按钮到第一个时,会出现空白页: 解决办法:sliderPerview设置为auto,lo ...
- Arrays.asList () 不可添加或删除元素的原因
Java中奖数组转换为List<T>容器有一个很方便的方法 Arrays.asList(T ... a),我通过此方法给容器进行了赋值操作,接着对其进行 添加元素,却发现会抛出一个(jav ...
- Pycharm小技巧--使用正则进行查找和批量替换
分享一个Pycharm中使用正则的分组匹配来进行批量替换的小技巧 例如,我现在需要把HTML文件中的静态文件得到路径全部替换为django模板引用路径的格式 修改为类似这样的格式: {% static ...
- win10 uwp 保存用户选择文件夹
如果我们每次把临时处理的文件保存,都要让用户选择一次,用户会不会觉得uwp垃圾?如果我们每次打开应用,都从某个文件读取,而这个文件不在应用目录和已知的目录,那么每次都需要用户选择,用户会不会觉得uwp ...