DOM对象操作html元素1
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
#div{
width:200px;
height:200px;
background-color:green;
}
</style>
</head>
<body>
<p name="pn">哈哈</p>
<p name="pn">呵呵</p>
<p name="pn">嘿嘿</p>
<p name="pn">嘻嘻</p>
<a id="aid" title="a标签的title属性">超链接</a><br/>
<!-- 列表 -->
<ul>
<li>Hello</li>
<li>Java</li>
<li>Script</li>
</ul> <div id="div">
我是一个div。
<p id="pid">div中的p节点</p>
</div> <hr/> <script type="text/javascript">
function demo() {
var pn = document.getElementsByName("pn"); // 通过元素的name属性获取到该元素；
var p = document.getElementsByTagName("p"); // 通过元素的标签名获取到该元素；
document.write("pn.length = " + pn.length + "<br/>"); // 获取到的是满足条件的所有元素的集合；
document.write("p.length = " + p.length + "<br/>");
document.write(pn[0].innerHTML + "<br/>");
document.write(pn[1].innerHTML + "<br/>");
document.write(pn[2].innerHTML + "<br/>");
document.write(pn[3].innerHTML + "<br/>");
document.write(p[4].innerHTML + "<br/>");
document.write("<hr/>");
}
demo(); function getAttr() {
var aNode = document.getElementById("aid"); // 根据id获取元素；
var attr = aNode.getAttribute("title"); // 根据元素的属性名称获取属性的值；
var aid = aNode.getAttribute("id");
document.write("attr = " + attr + "<br/>");
document.write("aid = " + aid + "<br/>");
document.write("<hr/>");
}
getAttr(); function setAttr() {
var aNode = document.getElementById("aid");
aNode.setAttribute("title", "a标签的新属性"); // 设置元素的属性(元素的名称，元素的属性)
var attr = aNode.getAttribute("title");
document.write("attr = " + attr + "<br/>");
document.write("<hr/>");
}
setAttr(); function getChild() {
var node = document.getElementsByTagName("ul");
var nodeChild = node[0].childNodes; // 获取子节点一定要写父节点的下标，一个父节点可以有多个子节点。
// nodeChiled的长度为7，是因为<ul>和<li>标签后面的空格也算。
document.write("nodeChild的长度 = " + nodeChild.length + "<br/>");
// nodeType：节点类型；(1：元素节点；2：属性节点；3：文本内容；等等)
document.write("节点类型：" + nodeChild[5].nodeType + "<br/>");
document.write("标签中的内容：" + nodeChild[5].innerHTML + "<br/>");
document.write("<hr/>");
}
getChild(); function getParent() {
var node = document.getElementById("pid"); // 根据id获取到元素；
var nodeParent = node.parentNode; // 获取元素的父节点；
document.write("父节点名称：" + nodeParent.nodeName + "<br/>");
document.write("父节点的id：" + nodeParent.id + "<br/>");
document.write("<hr/>");
}
getParent(); function createElement() {
var body = document.body; // 获取需要添加子节点的父节点；
var input = document.createElement("input"); // 创建新的节点；
input.type = "button"; // 设置新节点的属性；
input.value = "按钮";
body.appendChild(input); // 在指定的父节点下添加子节点；
document.write("<hr/>");
}
createElement(); function insertNode() {
var div = document.getElementById("div");
var pid = document.getElementById("pid");
var node = document.createElement("p"); // 创建一个p节点；
node.innerHTML = "我是新创建的p节点";
div.insertBefore(node, pid);
}
insertNode(); function removeNode() {
var div = document.getElementById("div");
div.removeChild(div.childNodes[1]); // 移除div的第一个子元素；
}
removeNode(); function getSize() {
var width = document.documentElement.offsetWidth; // 获取网页宽度；offsetWidth：不包括滚动条；
var height = document.body.offsetHeight; // 获取网页高度；scrollWidth：包括滚动条；
document.write("网页宽度：" + width + "<br/>");
document.write("网页高度：" + height + "<br/>");
document.write("<hr/>");
// 为了兼容浏览器，可以写成：
var width2 = document.documentElement.offsetWidth || document.body.offsetHeight;
document.write("网页宽度：" + width2 + "<br/>");
}
getSize();
</script>
</body>
</html>
DOM对象操作html元素1的更多相关文章
- JS DOM对象控制HTML元素详解
JS DOM对象控制HTML元素详解 方法: getElementsByName() 获取name getElementsByTagName() 获取元素 getAttribute() 获取元素 ...
- 使用 jQuery对象设置页面中 ＜ul＞ 元素的标记类型，并使用 DOM 对象设置 ＜li＞ 元素的浮动属性和右边距。使用jQuery 对象和 DOM 对象设置页面元素属性
查看本章节 查看作业目录 需求说明: 使用 jQuery对象设置页面中 <ul> 元素的标记类型,并使用 DOM 对象设置 <li> 元素的浮动属性和右边距.使用jQuery ...
- 第30天：DOM对象操作
JS包括三部分:ECMAscript.DOM(文档对象).BOM(浏览器对象) 一.DOM(文档对象)DOM树节点(元素.属性.标签.标记等都是节点) 二.访问节点 documment.getElem ...
- 原生JS中常用的Window和DOM对象操作汇总
一.常用的Window对象操作 Window对象中又包含了document.history.location.Navigator和screen几个对象,每个对象又有自己的属性方法,这里window可以 ...
- dom对象操作Html,Css
HTML: 1.不要再文档加载完使用document.write,这样会创建新的dom对象,原来的元素将被覆盖. 2.获取元素,通过getElementbyID; getElementbyTag(&q ...
- PHP原生DOM对象操作XML'代码'
对于操作XML类型文件,PHP内置有一套DOM对象可以进行处理.对XML的操作,从创建.添加到修改.删除都可以使用DOM对象中的函数来进行. 创建 创建一个新的XML文件,并且写入一些数据到这个XML ...
- 二、JavaScript语言--JS基础--JavaScript进阶篇--DOM对象 控制HTML元素
1.认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面 ...
- PHP原生DOM对象操作XML的方法解答
创建一个新的XML文件,并且写入一些数据到这个XML文件中. /** 创建xml文件*/ $info = array(array('obj' => 'power','info' => 'p ...
- jQuery Dom对象操作 增、删、改、复制、包裹
1. 增(插入) 内部插入 //向每个匹配的元素内部追加内容,为最后一个子元素$('.violet').append('<div></div>'); //把所有匹配的元素追加到 ...
随机推荐
- Using an LPC-Link2 as an LPC4370 evaluation board
https://www.lpcware.com/content/faq/lpcxpresso/using-lpclink2-as-lpc4370-eval As well as being a sta ...
- RPM软件包管理的查询功能 转
RPM软件包管理的查询功能: 命令格式 rpm {-q|--query} [select-options] [query-options] RPM的查询功能是极为强大,是极为重要的功能之一:举几个常用 ...
- unlocked_ioctl和compat_ioctl
参考: https://www.cnblogs.com/super119/archive/2012/12/03/2799967.html https://lwn.net/Articles/119652 ...
- AngularJS的增删改查、state嵌套案例，不涉及服务端
本篇实践一个案例,大致是:左边有导航菜单,右边显示列表,并可对列表项编辑或删除,也可添加新的列表项.借此,可体会到:如何组织可扩展的AngualrJS文件结构,如何点击左侧菜单项右侧显示相应内容,an ...
- 项目从.NET 4.5迁移到.NET 4.0遇到的问题
当把项目从.NET 4.5迁移到.NET 4.0时,遇到的问题和解决如下: 在"属性--应用程序--目标框架"设置成.NET 4.0版本. 重新生成项目,报有关EF的错: 卸载掉项 ...
- Wireshark基本用法 && 过滤规则 && 协议详解
基本使用: https://www.cnblogs.com/dragonir/p/6219541.html 协议解析: https://www.jianshu.com/p/a384b8e32b67 ( ...
- Logcat多tag过滤
当Android设备通过usb连接成功后,在logcat中能看到很多log信息,但太多了很容易将我们关注的日志给淹没掉,所以我们需要过滤.如果接入了不同的SDK,那么log的tag可能会不同,所以有时 ...
- Android Activity启动流程源码全解析（1）
前言 Activity是Android四大组件的老大,我们对它的生命周期方法调用顺序都烂熟于心了,可是这些生命周期方法到底是怎么调用的呢?在启动它的时候会用到startActivty这个方法,但是这个 ...
- 图片通过Base64Coder编码、解码
通过这个编码类我们可以将图片转换为这个编码的字符串,上传到服务器. 这个编码是来自小马的一个范例,我看了下挺有用的.所以就放上来以备不时之需. 先说下用法: /** * 下面注释的方法是将裁剪之后的图 ...
- ［转］PHP中替换换行符
FROM :http://www.cnblogs.com/siqi/archive/2012/10/12/2720713.html //php 有三种方法来解决 //1.使用str_replace 来 ...