js基础之DOM中元素对象的属性方法

在 HTML DOM （文档对象模型）中，每个部分都是节点。

节点是DOM结构中最基本的组成单元，每一个HTML标签都是DOM结构的节点。

　　文档是一个文档节点。

　　所有的HTML元素都是元素节点

　　所有 HTML 属性都是属性节点

　　文本插入到 HTML 元素是文本节点

　　注释是注释节点。

最基本的节点类型是Node类型，其他所有类型都继承自Node，DOM操作往往是js中开销最大的部分，因而NodeList导致的问题最多。要注意：NodeList是‘动态的’，也就是说，每次访问NodeList对象，都会运行一次查询，虽然这样增加了开销，但可以保证我们新添加的节点都能在NodeList中访问的到。

所有的元素节点都有共用的属性和方法，让我们来详细看一看：

先来看较为常用的通用属性

1 element.id 设置或返回元素的 id。

2 element.innerHTML 设置或者返回元素的内容，可包含节点中的子标签以及内容

3 element.innerText 设置或者返回元素的内容，不包含节点中的子标签以及内容

4 element.className 设置或者返回元素的类名

5 element.nodeName 返回该节点的大写字母标签名

6 element.nodeType 返回该结点的节点类型，1表示元素节点 2表示属性节点……

7 element.nodeValue 返回该节点的value值，元素节点的该值为null

8 element.childNodes 返回元素的子节点的nodeslist对象，nodelist类似于数组，有length属性，可以使用方括号 [index] 访问指定索引的值(也可　　以使用item(index)方法)。但nodelist并不是数组。

9 element.firstChild/element.lastChild 返回元素的第一个/最后一个子节点(包含注释节点和文本节点)

10 element.parentNode 返回该结点的父节点

11 element.previousSibling 返回与当前节点同级的上一个节点(包含注释节点和文本节点)

12 element.nextSibling 返回与当前节点同级的下一个节点(包含注释节点和文本节点)

13 element.chileElementCount : 返回子元素(不包括文本节点以及注释节点)的个数

14 element.firstElementChild /lastElementChild 返回第一个/最后一个子元素(不包括文本节点以及注释节点)

15 element.previousElementSibling/nextElementSibling 返回前一个/后一个兄弟元素(不包括文本节点以及注释节点)

16 element.clientHeight/clientWidth 返回内容的可视高度/宽度（不包括边框，边距或滚动条）

17 element.offsetHeight/offsetWidth /offsetLeft/offsetTop 返回元素的高度/宽度/相对于父元素的左偏移/右偏移(包括边框和填充,不包括边距)

18 element.scrollHeight/scrollWidth/scrollLeft/scrollTop返回整个元素的高度（包括带滚动条的隐蔽的地方）/宽度/返回当前视图中的实际元素的左边缘和左边缘之间的距离/上边缘的距离

19 element.style 设置或返回元素的样式属性,。示例：element.style.backgroundColor 注意，与CSS不同，style的属性要去掉横杠，第二个单词　　首字母要大写

20 element.tagName 返回元素的标签名(大写)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .form_style{

            color: #5b5b5b;

            font-size: large;

            border: 5px solid rebeccapurple;

            background-color: antiquewhite;

            width: 440px;

            height: 120px;

            position: relative;

            left: 20px;

            top:20px;

            margin:10px;

        }

        p {

            color: #5b5b5b;

            font-size: larger;

            text-indent: 40px;

        }

    </style>

</head>

<body>

    <form  id='first_form'  class="form_style" name="cangjingge" >

        请选择功法：<br/>

        <input type="radio" name="gongfa" value="jysg">九阳神功<br/>

        <input type="radio" name="gongfa" value="qkdny">乾坤大挪移<br/>

        <input type="radio" name="gongfa" value="khbd">葵花宝典<br/>

        <input type="radio" name="gongfa" value="xxdf">吸星大法<br/>

    </form>

    <p>少侠请三思！！！</p><!--注释标签-->

    <p>推荐功法--&gt;葵花宝典</p>

    <script>

        //js演示代码请添加至此

        var a=document.getElementById('first_form'),

            b = document.getElementsByTagName('p')[0];

        console.log(a.id);

        console.log(a.innerHTML);

        console.log(a.className);

        console.log(a.childNodes);

        console.log(a.firstChild);

        console.log(a.lastChild);

        console.log(a.nodeName);

        console.log(a.nodeType);

        console.log(a.nodeValue);

        console.log(a.parentNode);

        console.log(a.clientHeight);

        console.log(a.offsetHeight);

        console.log(b.nextSibling);

        console.log(b.nextElementSibling);

    </script>

</body>

</html>

html代码

浏览器显示结果：

还有某些专属属性

　　专属属性指那些专属于某种标签的属性。比如 <a> 标签，有href和target属性。<img> 有src属性; <form>有entype以及action属性……

　　a_element.href 返回当前节点指向的超链接

再来看看较为常用的通用方法：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .form_style{

            color: #5b5b5b;

            font-size: large;

        }

        p {

            color: #5b5b5b;

            font-size: larger;

        }

    </style>

</head>

<body>

    <form  id='first_form'  class="form_style" name="cangjingge" >

        请选择功法：<br/>

        <input type="radio" name="gongfa" value="jysg">九阳神功<br/>

        <input type="radio" name="gongfa" value="qkdny">乾坤大挪移<br/>

        <input type="radio" name="gongfa" value="khbd">葵花宝典<br/>

        <input type="radio" name="gongfa" value="xxdf">吸星大法<br/>

    </form>

    <p>少侠请三思！！！</p>

    <script>

        //js演示代码请添加至此

    </script>

</body>

</html>

示例html代码

(以下所有js演示代码都是以本文档中的 示例html代码 为实验对象)

1 element.appendChild(nodeName) 向元素添加新的子节点，作为最后一个子节点，并返回该子节点。如需向 HTML DOM 添加新元素，您首先必须创建该元素，然后把它追加到已有的元素上。

js演示代码：

var a=document.getElementById('first_form');

var textnode=document.createTextNode("慎重选择");

a.appendChild(textnode)

2 element.getAttribute(para) 返回元素节点的指定属性值。

js演示代码：

var a=document.getElementById('first_form');

console.log(a.getAttribute('name'))           //控制台输出name的值

3 element.getAttributeNode(para) 返回指定的属性节点。

js演示代码：

var a=document.getElementById('first_form');

console.log(a.getAttributeNode('name'))           //控制台输出name属性节点

4 element.getElementsByTagName(para) 返回拥有指定标签名的所有子元素的集合。

js演示代码：

var a=document.getElementById('first_form');

console.log(a.getElementsByTagName('input'))           //控制台输出

5 element.hasAttribute(para) 如果元素拥有指定属性，则返回true，否则返回 false。

js演示代码：

var a=document.getElementById('first_form');

console.log(a.hasAttribute('name'))           //控制台输出

6 element.insertBefore(insertNode,appointedNode) 在指定的已有的子节点之前插入新节点。

js演示代码：

        var a=document.getElementById('first_form');

        var inputList=document.getElementsByTagName('input');

        var newNode=document.createElement('input');

        var newNode2=document.createTextNode('天马流星拳');

        var br=document.createElement('br');

        newNode.type='radio';

        newNode.name='gongfa';

        newNode.value='tmlxq';

        a.insertBefore(newNode,inputList[2]);

        a.insertBefore(newNode2,inputList[3]);

        a.insertBefore(br,inputList[3]);

7 element.removeAttribute() 从元素中移除指定属性。

js示例代码：

var a=document.getElementById('first_form');

a.removeAttribute('name');

console.log(a.hasAttribute('name'))

8 element.removeChild() 从元素中移除子节点。移除的节点虽然不在文档树中了，但其实还在内存中，可以随时被引用。

js示例代码：

        var a=document.getElementById('first_form');

        a.removeChild(a.childNodes[3]);

9 element.replaceChild(newNode,replaceNode) 把指定节点替换为新节点。

10 element.setAttribute(attrName,attrValue) 把指定属性设置或更改为指定值。

js示例代码：

        var a=document.getElementById('first_form');

        a.setAttribute('name','shaolinsi');

        console.log(a.name)

11 element.setAttributeNode() 修改指定属性节点

js示例代码：

        var a=document.getElementById('first_form');

        var attr = document.createAttribute('id');

        attr.value='the_first';

        a.setAttributeNode(attr);
　　　　 console.log(a.id)

12 nodelist.item() 返回 NodeList 中位于指定下标的节点。

js示例代码：

var a=document.getElementsByTagName('input')

console.log(a.item(2))

js基础之DOM中元素对象的属性方法的更多相关文章

DOM中元素对象的属性方法
在 HTML DOM (文档对象模型)中,每个部分都是节点. 节点是DOM结构中最基本的组成单元,每一个HTML标签都是DOM结构的节点. 文档是一个文档节点 . 所有的HTML元素都是 ...
js基础之DOM中document对象的常用属性方法
-----引入每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. 属性 1 document.an ...
DOM中元素节点、属性节点、文本节点的理解
DOM中元素节点.属性节点.文本节点的理解节点信息每个节点都拥有包含着关于节点某些信息的属性.这些属性是:nodeName(节点名称) nodeValue(节点值) nodeType(节点类型) ...
GSAP JS基础教程--TweenLite操作元素的相关属性
今天来学习用TweenLite操作元素的各种属性,以Div为例,其他元素的操作也是一样的,只是可能一些元素有它们的特殊属性,就可能不同罢了. 代码里用详细注释,我就不再重复啦,大家看代码就可以啦! ...
DOM中元素节点、属性节点、文本节点
DOM中有12中节点,但最常用到的是元素节点,属性节点,文本节点. 元素节点的节点类型(nodeType)是1: 属性节点的节点类型(nodeType)是2: 文本节点的节点类型(nodeType)是 ...
DOM中元素节点、属性节点、文本节点的理解13.3
节点信息每个节点都拥有包含着关于节点某些信息的属性.这些属性是:nodeName(节点名称) nodeValue(节点值) nodeType(节点类型) nodeType nodeType 属性可返 ...
DOM中元素节点，属性节点，文本节点的理解
节点信息每个节点都拥有包含着关于节点某些信息的属性.这些属性是: nodeName(节点名称) nodeValue(节点值) nodeType(节点类型) nodeType nodeType 属性可 ...
js中__proto__, property, prototype, 对象自身属性方法和原型中的属性方法的区别
__proto__: 这个属性是实例对象的属性,每个实例对象都有一个__proto__属性,这个属性指向实例化该实例的构造函数的原型对象(prototype). proterty:这个方法是对象的属性 ...
DOM中Event 对象如何使用
DOM中Event 对象如何使用一.总结一句话总结: 1.将event作为参数传递进来,然后就可以调用event对象的各种属性和方法了. <body onmousedown="wh ...

随机推荐

DataRow对象的RowState和DataRowVersion属性特点
DataRow对象有两个比较重要的属性,分别是行状态(RowState)和行版本(DataRowVersion),通过这两个属性能够有效的管理表中的行.下面简要的介绍一下行状态和行版本的特点和关系. ...
2017秋软工 - 本周PSP
1. PSP 2. PSP饼状图 3. 进度条 4. 累计进度图
奔跑吧DKY——团队Scrum冲刺阶段-Day 4
今日完成任务谭鑫:主要解决之前存在的控件不灵敏问题,导致界面跳转不顺利. 黄宇塘:制作新的游戏背景图,对主界面图进行调整. 赵晓海:主要解决之前存在的控件不灵敏问题,导致界面跳转不顺利. 方艺雯:制 ...
beat冲刺（4/7）
目录摘要团队部分个人部分摘要队名:小白吃组长博客:hjj 作业博客:beta冲刺(4/7) 团队部分后敬甲(组长) 过去两天完成了哪些任务整理博客 ppt模板接下来的计划做好机动. ...
（2016.2.2）1001.A+B Format (20)解题思路
https://github.com/UNWILL2LOSE/object-oriented 解题思路目标: *首先运算要求实现输入2个数后,输出类似于银行的支票上的带分隔符规则的数字. 代码实现思 ...
批量梯度下降(BGD)、随机梯度下降(SGD)以及小批量梯度下降(MBGD)的理解
梯度下降法作为机器学习中较常使用的优化算法,其有着三种不同的形式:批量梯度下降(Batch Gradient Descent).随机梯度下降(Stochastic Gradient Descent ...
获取ios设备的udid
今天get的第二个技能~~~ UDID指的是设备的唯一设备识别符,ipa包未上架之前如果不添加udid是无法安装成功的.那么如何快速获取ios设备的udid呢? 今天get的方法是用蒲公英,网址:ht ...
Beta阶段DAY5
一.提供当天站立式会议照片一张二.每个人的工作 1.讨论项目每个成员的昨天进展刘阳航:改进UI,美化界面. 林庭亦:优化代码结构郑子熙:改进UI,美化界面. 陈文俊:优化代码结构 2.讨论项目每 ...
10.13课堂Scrum站立会议
项目名称:C#实现的连连看游戏小组名称:计信F4 开会时间 :2016年10月11日 20:20~20:40 组长:张政成员:张金生,武志远,李泉内容: 昨日已完成: 张政:构建基础逻辑,实现游 ...
二叉树 Java 实现前序遍历中序遍历后序遍历层级遍历获取叶节点宽度，高度，队列实现二叉树遍历求二叉树的最大距离
数据结构中一直对二叉树不是很了解,今天趁着这个时间整理一下许多实际问题抽象出来的数据结构往往是二叉树的形式,即使是一般的树也能简单地转换为二叉树,而且二叉树的存储结构及其算法都较为简单,因此二叉树显 ...

js基础之DOM中元素对象的属性方法

js基础之DOM中元素对象的属性方法的更多相关文章

随机推荐

热门专题