javascript获取Document类型和Element类型属性
来源:互联网 发布:多台nginx 做负载均衡 编辑:程序博客网 时间:2024/06/04 19:41
DOM
节点层次:
Document类型
JavaScript 通过 Document 类型表示文档。在浏览器中, document 对象是 HTMLDocument(继承自 Document 类型)的一个实例,表示整个 HTML 页面。而且, document 对象是 window 对象的一个属性,因此可以将其作为全局对象来访问。
1、文档子节点
可以使用document.documentElement属性,该属性始终指向HTML页面中<html>元素。另一个就是通过 childNodes 列表访问文档元素,但通过 documentElement 属性则能更快捷、更直接地访问该元素
两种方法:
document.documentElement;
document.childNodes[0];
document.firstChild;
输出结果是获取所有页面所有元素
<html>
<head>
</head>
<body>
<form>
ssss
</form>
</body>
</html>
document还有一个body属性可以直接指向html中<body>元素
var body = document.body;//取得对<body>的引用
所有浏览器都是支持document.documentElement;和document.body;这两个属性的。
2、文档信息
document.title;获取文档标题信息,可以修改这个标题信息:document.title = "这是一个测试";
document.URL;//取得完整的 URL
document.domain;//取得域名
document.referrer;//取得来源页面的 URL
3、查找元素
document.getElementById("");接收一个参数:要取得的元素的 ID。如果找到相应的元素则返回该元素,如果不存在带有相应 ID 的元素,则返回 null。
document.getElementsByTagName("");这个方法接受一个参数,即要取得元素的标签名,而返回的是包含零或多个元素的 NodeList。
document.getElementsByName("");这个方法会返回带有给定 name 特性的所有元素。最常使用 getElementsByName()法的情况是取得单选按钮;为了确保发送给浏览器的值正确无误,所有单选按钮必须具有相同的 name 特性,
<html>
<head>
</head>
<script type="text/javascript">
function check(){
var color = document.getElementsByName("color");
for(var i = 0 ; i < color.length;i++){
if(color[i].checked){
console.log(color[i].value);
}
}
}
</script>
<body>
<form>
<fieldset>
<legend>Which color do you prefer?</legend>
<ul>
<li><input type="radio" value="red" name="color" id="colorRed" onclick="check();">
<label for="colorRed">Red</label></li>
<li><input type="radio" value="green" name="color" id="colorGreen" onclick="check();">
<label for="colorGreen">Green</label></li>
<li><input type="radio" value="blue" name="color" id="colorBlue" onclick="check();">
<label for="colorBlue">Blue</label></li>
</ul>
</fieldset>
</form>
</body>
</html>
4、特殊集合
除了属性和方法, document 对象还有一些特殊的集合。这些集合都是 HTMLCollection 对象,为访问文档常用的部分提供了快捷方式,包括:
document.anchors,包含文档中所有带 name 特性的<a>元素;
document.applets,包含文档中所有的<applet>元素,因为不再推荐使用<applet>元素,所以这个集合已经不建议使用了;
document.forms,包含文档中所有的<form>元素,与 document.getElementsByTagName("form")得到的结果相同;
document.images,包含文档中所有的<img>元素,与 document.getElementsByTagName("img")得到的结果相同;
document.links,包含文档中所有带 href 特性的<a>元素
5、文档写入
document将输出流写入到网页中。
write(),writeln(),open()和close();
write()和writeln()方法都接收一个字符串参数,即要写入到输出流中的文本。write()会原样写入,而writeln()则会在字符
串的末尾添加一个换行符(\n)。在页面被加载的过程中,可以使用这个两个方法向页面中动态地加入内容。
实例:
<html>
<head>
</head>
<script type="text/javascript">
</script>
<body>
<form>
<p>The current date and time is:
<script type="application/javascript">
document.write("<strong>"+(new Date()).toString()+"</strong>")
</script>
</p>
</form>
</body>
</html>
Element类型
Element 类型是使用 attributes 属性的唯一一个 DOM 节点类型。attributes 属性中包含一个NamedNodeMap,与 NodeList 类似,也是一个“动态”的集合。元素的每一个特性都由一个 Attr 节点表示,每个节点都保存在 NamedNodeMap 对象中。
getNamedItem(name):返回 nodeName 属性等于 name 的节点;
removeNamedItem(name):从列表中移除 nodeName 属性等于 name 的节点;
setNamedItem(node):向列表中添加节点,以节点的 nodeName 属性为索引;
item(pos):返回位于数字 pos 位置处的节点。
<html>
<head>
</head>
<script type="text/javascript">
</script>
<body>
<form>
<div id="myDiv" align="left" my_special_attribute="hello!"></div>
</form>
</body>
</html>
//获取div 元素
var div = document.getElementById("myDiv")
1、取得特性
div.getAttribute("id");
div.getAttribute("align");
div.getAttribute("my_special_attribute");
2、设置特性
div.setAttribute("id","test");
div.setAttribute("align","test");
div.setAttribute("my_special_attribute","test");
3、移除特性
div.removeAttribute("id");
4、attributes 属性
div.attributes.id.value;//myDiv
div.attributes.getNamedItem("id").nodeValue;//myDiv
div.attributes["id"].nodeValue;//myDiv
5、设置新的值
element.attributes["id"].nodeValue = "someOtherId";
6、删除特性
element.attributes.removeNamedItem("id");
7、创建元素
使用document.createElement()方法可以创建新元素
var userName = document.createElement("input");
添加属性
userName.setAttribute("id","userName");
userName.setAttribute("name","userName");
userName.setAttribute("value","liuwenlaing");
userName:<input id="userName" name="userName" value="liuwenlaing">
通过appendChild()、 insertBefore()或 replaceChild()把新元素添加到文档树中。
var div = document.getElementById("myDiv");
div.appendChild(userName);
div:
//<div id="myDiv" align="left" my_special_attribute="hello!"><input id="userName" name="userName" value="liuwenlaing"></div>
直接创建元素信息:
var div = document.createElement("<div id=\"myNewDiv\" class=\"box\"></div >");
8、元素的子节点
<html>
<head>
</head>
<body>
<form>
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</form>
</body>
</html>
for(var i = 0 ; i < items.length;i++){
console.log(items[i]);
}
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
这里<ul>的后代中只包含直接子元素。不过,如果它包含更多层次的后代元素,那么各个层次中包含的<li>元素也都会返回。
节点层次:
Document类型
JavaScript 通过 Document 类型表示文档。在浏览器中, document 对象是 HTMLDocument(继承自 Document 类型)的一个实例,表示整个 HTML 页面。而且, document 对象是 window 对象的一个属性,因此可以将其作为全局对象来访问。
1、文档子节点
可以使用document.documentElement属性,该属性始终指向HTML页面中<html>元素。另一个就是通过 childNodes 列表访问文档元素,但通过 documentElement 属性则能更快捷、更直接地访问该元素
两种方法:
document.documentElement;
document.childNodes[0];
document.firstChild;
输出结果是获取所有页面所有元素
<html>
<head>
</head>
<body>
<form>
ssss
</form>
</body>
</html>
document还有一个body属性可以直接指向html中<body>元素
var body = document.body;//取得对<body>的引用
所有浏览器都是支持document.documentElement;和document.body;这两个属性的。
2、文档信息
document.title;获取文档标题信息,可以修改这个标题信息:document.title = "这是一个测试";
document.URL;//取得完整的 URL
document.domain;//取得域名
document.referrer;//取得来源页面的 URL
3、查找元素
document.getElementById("");接收一个参数:要取得的元素的 ID。如果找到相应的元素则返回该元素,如果不存在带有相应 ID 的元素,则返回 null。
document.getElementsByTagName("");这个方法接受一个参数,即要取得元素的标签名,而返回的是包含零或多个元素的 NodeList。
document.getElementsByName("");这个方法会返回带有给定 name 特性的所有元素。最常使用 getElementsByName()法的情况是取得单选按钮;为了确保发送给浏览器的值正确无误,所有单选按钮必须具有相同的 name 特性,
<html>
<head>
</head>
<script type="text/javascript">
function check(){
var color = document.getElementsByName("color");
for(var i = 0 ; i < color.length;i++){
if(color[i].checked){
console.log(color[i].value);
}
}
}
</script>
<body>
<form>
<fieldset>
<legend>Which color do you prefer?</legend>
<ul>
<li><input type="radio" value="red" name="color" id="colorRed" onclick="check();">
<label for="colorRed">Red</label></li>
<li><input type="radio" value="green" name="color" id="colorGreen" onclick="check();">
<label for="colorGreen">Green</label></li>
<li><input type="radio" value="blue" name="color" id="colorBlue" onclick="check();">
<label for="colorBlue">Blue</label></li>
</ul>
</fieldset>
</form>
</body>
</html>
4、特殊集合
除了属性和方法, document 对象还有一些特殊的集合。这些集合都是 HTMLCollection 对象,为访问文档常用的部分提供了快捷方式,包括:
document.anchors,包含文档中所有带 name 特性的<a>元素;
document.applets,包含文档中所有的<applet>元素,因为不再推荐使用<applet>元素,所以这个集合已经不建议使用了;
document.forms,包含文档中所有的<form>元素,与 document.getElementsByTagName("form")得到的结果相同;
document.images,包含文档中所有的<img>元素,与 document.getElementsByTagName("img")得到的结果相同;
document.links,包含文档中所有带 href 特性的<a>元素
5、文档写入
document将输出流写入到网页中。
write(),writeln(),open()和close();
write()和writeln()方法都接收一个字符串参数,即要写入到输出流中的文本。write()会原样写入,而writeln()则会在字符
串的末尾添加一个换行符(\n)。在页面被加载的过程中,可以使用这个两个方法向页面中动态地加入内容。
实例:
<html>
<head>
</head>
<script type="text/javascript">
</script>
<body>
<form>
<p>The current date and time is:
<script type="application/javascript">
document.write("<strong>"+(new Date()).toString()+"</strong>")
</script>
</p>
</form>
</body>
</html>
Element类型
Element 类型是使用 attributes 属性的唯一一个 DOM 节点类型。attributes 属性中包含一个NamedNodeMap,与 NodeList 类似,也是一个“动态”的集合。元素的每一个特性都由一个 Attr 节点表示,每个节点都保存在 NamedNodeMap 对象中。
getNamedItem(name):返回 nodeName 属性等于 name 的节点;
removeNamedItem(name):从列表中移除 nodeName 属性等于 name 的节点;
setNamedItem(node):向列表中添加节点,以节点的 nodeName 属性为索引;
item(pos):返回位于数字 pos 位置处的节点。
<html>
<head>
</head>
<script type="text/javascript">
</script>
<body>
<form>
<div id="myDiv" align="left" my_special_attribute="hello!"></div>
</form>
</body>
</html>
//获取div 元素
var div = document.getElementById("myDiv")
1、取得特性
div.getAttribute("id");
div.getAttribute("align");
div.getAttribute("my_special_attribute");
2、设置特性
div.setAttribute("id","test");
div.setAttribute("align","test");
div.setAttribute("my_special_attribute","test");
3、移除特性
div.removeAttribute("id");
4、attributes 属性
div.attributes.id.value;//myDiv
div.attributes.getNamedItem("id").nodeValue;//myDiv
div.attributes["id"].nodeValue;//myDiv
5、设置新的值
element.attributes["id"].nodeValue = "someOtherId";
6、删除特性
element.attributes.removeNamedItem("id");
7、创建元素
使用document.createElement()方法可以创建新元素
var userName = document.createElement("input");
添加属性
userName.setAttribute("id","userName");
userName.setAttribute("name","userName");
userName.setAttribute("value","liuwenlaing");
userName:<input id="userName" name="userName" value="liuwenlaing">
通过appendChild()、 insertBefore()或 replaceChild()把新元素添加到文档树中。
var div = document.getElementById("myDiv");
div.appendChild(userName);
div:
//<div id="myDiv" align="left" my_special_attribute="hello!"><input id="userName" name="userName" value="liuwenlaing"></div>
直接创建元素信息:
var div = document.createElement("<div id=\"myNewDiv\" class=\"box\"></div >");
8、元素的子节点
<html>
<head>
</head>
<body>
<form>
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</form>
</body>
</html>
for(var i = 0 ; i < items.length;i++){
console.log(items[i]);
}
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
这里<ul>的后代中只包含直接子元素。不过,如果它包含更多层次的后代元素,那么各个层次中包含的<li>元素也都会返回。
阅读全文
0 0
- javascript获取Document类型和Element类型属性
- JavaScript HTML DOM节点类型之Document类型(Document对象属性和Document对象集合属性)
- JavaScript学习-Document类型
- JavaScript学习-Element类型
- Javascript之DOM(Document类型)
- 【JavaScript学习】DOM:Document类型
- JavaScript DOM(三) Element 类型
- 【JavaScript学习】DOM:Element类型
- javascript之error的属性和类型
- javascript属性类型
- Javascript中的属性类型
- 反射获取属性类型
- Javascript获取浏览器类型和版本
- javascript获取类型
- JavaScript Document属性和方法
- JavaScript获取对象所有属性,显示变量类型
- 通过反射获取匿名类型的属性和属性值
- 通过反射获取属性名和属性类型
- 【Python】python多进程,函数内print的内容没有打印出来
- 基于Token的WEB后台认证机制
- 该如何解除PDF文档的密码呢
- Struts2笔记
- 前端学记之CSS-引入方式、语法、浏览器私有属性等
- javascript获取Document类型和Element类型属性
- Ubuntu 软件安装和管理
- jquery展示今年与去年的月份
- laravel学习笔记(二)
- Django之PopUp的具体实现
- 如何从零开始搭建一个能够显示HelloWorld的网站
- 基于Socket和OpenCV的实时视频传输(On Windows ,Ubuntu,及Windows和Ubuntu之间) 总结
- gogs rpc failed;http 413 curl 22 request entity too large
- Python-------模块与包