javascript之DOM(三Element类型)
Element类型用于表现XML和HTML的元素,提供了对元素标签名、子节点及特性的访问。
要访问标签名可以使用nodeName和tagName属性,其返回值是一样的。
<p id="pd" name="test">no.1</p> <script type="text/javascript"> var p=document.getElementById("pd");
alert(p.nodeName==p.tagName);//true
</script>
元素标签名输出为大写P。
1、HTML元素
所有HTML元素都是有HTMLElement类型表示。HTMLElement为Element类型添加了一些属性。id,title,lang,dir(语言的方向,值为ltr或rtl,”left-to-right“或”right-to-left”),classname(与元素class属性对应)
<div id="myDiv" class="pd" title="example" dir="ltr" lang="en"> <script type="text/javascript">
var d=document.getElementById("myDiv");
alert(d.id);//myDiv
alert(d.className);//pd
alert(d.title);//example
alert(d.dir);//ltr
alert(d.lang);//en
</script>
2、编辑属性
操作特性的DOM方法有3个getAttribute(),setAttribute()和removeAttribute(),这3个方法可以对任何属性使用,包括自定义的属性。
传递个getAttribute()的属性名和实际的属性名相同。element.getAttribute(“class”);
setAttribute()接收两个参数,属性名和属性值,如果属性已存在则修改当前的属性值,不存在则创建一个再赋值。element.setAttribute(“class”,”ft”);
removeAttribute(),用于彻底删除元素的特性。
3、attributes属性
Element类型是使用attributes属性的唯一DOM节点类型。attributes属性包含一个NamedNodeMap,与NodeList类似,为一个“动态”的集合。元素的每一个特性都由Attr节点表示,每个节点都保存在NamedNodeMap类型中。
NamedNodeMap对象有以下方法:
getNamedItem(name)//返回NodeName属性等于name的节点
removeNamedItem(name)//移除NodeName属性等于name的节点
item(pos)
4、创建元素
document.createElement();
var div=document.createElement("div");
div.id="mydiv";
div.class="myClass";
要想将元素插入到特定位置,可以使用appendChild(),insertBefore(),replaceChild()。
5、元素的子节点
元素有任意数目的节点和子节点。
元素的childNodes中包含了其所有节点,其中可以有元素,文本节点,注释,或处理指令。
<ul id=”myList”>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
在IE中ul元素下有3个节点,都为li
在其他浏览器中则有7个节点,3个<li>元素和4个文本节点。
javascript之DOM(三Element类型)的更多相关文章
- javascript之DOM(四其他类型)
一.Text类型 文本节点由Text类型表示,指的是可以以字面意思解释的纯文本内容,其中包含HTML代码. nodeType=3 nodeName=#text nodeValue=文本内容 paren ...
- dom的element类型
1)getElementById 后面的nodeName和tagName都一样 var a=document.getElementById("my_div"); console.l ...
- web前端----JavaScript的DOM(三)
一.JS中for循环遍历测试 for循环遍历有两种 第一种:是有条件的那种,例如 for(var i = 0;i<ele.length;i++){} 第二种:for (var i in l ...
- javascript系列之DOM(三)---事件
原文:javascript系列之DOM(三)---事件 事件是javascript跳动的心脏,是DOM所有成分结合的万金油.当我们在WEB 上进行某些交互时,事件也就发生了.点击某些内容,鼠标经过特定 ...
- 从原型链看DOM--Element类型
Element类型用于表现XML或HTML元素,提供对元素标签名,子节点及特性的访问.原型链的继承关系为 某节点元素.__proto__->(HTML某元素Element.prototype)- ...
- JQuery制作网页—— 第三章 JavaScript操作DOM对象
1. DOM:Document Object Model(文档对象模型): DOM操作: ●DOM是Document Object Model的缩 ...
- 第10章 文档对象模型DOM 10.3 Element类型
Element 类型用于表现 XML或 HTML元素,提供了对元素标签名.子节点及特性的访问. 要访问元素的标签名,可以使用 nodeName 属性,也可以使用 tagName 属性:这两个属性会返回 ...
- javascript之DOM(一节点类型Node)
DOM(Document Object Model)是针对HTML和XML文档的一个API.DOM描述的是一个层次化的节点树,允许开发人员添加.移除和修改页面的某一部分.起源于DHML,现为W3C的推 ...
- Javascript权威指南——第二章词法结构,第三章类型、值和变量,第四章表达式和运算符,第五章语句
第二章 词法结构 一.HTML并不区分大小写(尽管XHTML区分大小写),而javascript区分大小写:在HTML中,这些标签和属性名可以使用大写也可以使用小写,而在javascript中必须小写 ...
随机推荐
- 【oracle】update select语句
- IAR环境搭建
工具下载:https://pan.baidu.com/s/1nwv0RVz 第一步:右键点击EW8051-EV-8103-Web.exe,使用管理员权限运行. 第二步:我们运行之后只要一直Next下去 ...
- [LeetCode] 1028. Recover a Tree From Preorder Traversal 从先序遍历还原二叉树
We run a preorder depth first search on the rootof a binary tree. At each node in this traversal, we ...
- [LeetCode] 147. Insertion Sort List 链表插入排序
Sort a linked list using insertion sort. A graphical example of insertion sort. The partial sorted l ...
- 申请Github学生包(用学生证就行,免教育邮箱)
GitHub教育包的福利: 大名鼎鼎的JetBrains给学生教师的免费个人许可 https://education.github.com/pack/redeem/jetbrains 有Github学 ...
- 可以在shell脚本中使用哪些类型的变量?
在shell脚本,我们可以使用两种类型的变量: 系统定义变量 用户定义变量 系统变量是由系统系统自己创建的.这些变量通常由大写字母组成,可以通过“set”命令查看. 用户变量由系统用户来生成和定义,变 ...
- python运维开发常用模块(四)文件对比模块difflib
1.difflib介绍 difflib作为 Python的标准库模块,无需安装,作用是对比文本之间的差异,且支持 输出可读性比较强的HTML文档,与Linux下的diff命令相似.我们可以 使用dif ...
- 使用docker安装gitlab,两台电脑gitlab库相互迁移
原文来自合伙呀 https://hehuoya.com/2019/09/30/gitlab-docker/ Docker for gitlab brew cask install docker do ...
- Redis(序)应用场景
前言 在阅读了<大型网站技术架构:核心原理与案例分析>书后,稍微了解了Redis在大型网站架构中的应用场景和目的. 大型网站都是从小用户量,小流量的网站演变过来的,在小型网站的架构之初,L ...
- hadoop格式化:java.io.IOException: Incompatible clusterIDs in /home/lxh/hadoop/hdfs/data: namenode clusterID
1 概述 解决hadoop启动hdfs时,datanode无法启动的问题.错误为: java.io.IOException: Incompatible clusterIDs in /home/lxh ...