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/offset/Top 返回元素的高度/宽度/相对于父元素的左偏移/右偏移(包括边框和填充,不包括边距)

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

19  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>推荐功法-->葵花宝典</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>

浏览器显示结果:

还有某些专属属性

专属属性指那些专属于某种标签的属性。比如 <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>

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

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

js演示代码:

var a=document.getElementById('first_form');
var textnode=document.createTextNode("慎重选择");
a.appendChild(textnode)

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

js演示代码:

var a=document.getElementById('first_form');
console.log(a.getAttribute('name'))      //控制台输出name的值

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

js演示代码:

var a=document.getElementById('first_form');
console.log(a.getAttributeNode('name'))      //控制台输出name属性节点

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

js演示代码:

var a=document.getElementById('first_form');
console.log(a.getElementsByTagName('input'))      //控制台输出

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

js演示代码:

var a=document.getElementById('first_form');
console.log(a.hasAttribute('name'))      //控制台输出

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]);

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

js示例代码:

var a=document.getElementById('first_form');
a.removeAttribute('name');
console.log(a.hasAttribute('name'))

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

js示例代码:

var a=document.getElementById('first_form');
    a.removeChild(a.childNodes[3]);

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中元素对象的属性方法详解全部内容了,希望大家多多支持我们~

时间: 2016-10-25

JavaScript基础知识点归纳(推荐)

定义在函数外的变量一定是全局变量:定义在函数内的变量,如果声明了var,那该变量就是局部变量,如果不声明var,那么该变量就是全局变量. 1.全局变量与局部变量 JavaScript var global = "Global"; test(); function test(){ var local = "Local"; document.writeln(global); document.writeln(local); } document.writeln(glob

js基础之DOM中document对象的常用属性方法详解

-----引入 每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. 属性 1  document.anchors  返回对文档中所有 Anchor 对象的引用.还有document.links/document.forms/document.images等 2  document.URL       返回当前文档的url 3  document.title       返回当前文档的标题 4  do

javascript基础知识讲解

本篇适合javascript新手或者学了前端一段时间,对js概念不清晰的同学~~. 学习目的 本文针对javascript基础薄弱的同学,可以加深对javascript的理解. 本文将讲述以下几点对于初学者开说javascript(有的是大部分语言都有的)的坑 讲解内容如下: 1. 连等 2. i++ 3. 包装对象 4. 引用类型 5. && 与 || 讲解部分 1. 连等 小试牛刀 连等是常见的表达式,但是并不是所有情况都适合连等,连等只适用于字面量并不适用于引用类型. // 字面量连

Three.js基础部分学习

一.关于使用Three.js几点理论说明 1.请参考官网地址 https://threejs.org/ 2.使用three.js必备条件  <场景 A scene.相机a camera.渲染器 a renderer  三者缺一不可> To actually be able to display anything with Three.js, we need three things: A scene, a camera, and a renderer so we can render the

js 基础篇必看(点击事件轮播图的简单实现)

轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现.但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法: 1.利用位移的方法来实现 首先,我们可以在body中添加一个div并且将宽度设置成百分比(自适应页面),比例具体是相对谁的百分比的话按需求来做,在这里不多说.将图片放入到div 中. 其次,样式部分将img标签全部设置成absolute:以方便定位 最后,js部分说说逻辑,定义两个空数组,第一个数组用来保存初始的显示在页面的图

JavaScript基础重点(必看)

接触JavaScript这门语言也就很长的时间了,但从来没有系统的去了解这么语言.趁现在刚刚毕业以及某些原因无心工作的情况下去系统的了解一下这么语言,也想通过这么语言养成写博客的习惯,因为我认为这是一件对程序员来说很神圣又很光荣的事情. 1.1背景 相信很多初学者都遗忘或混淆的就是JavaScript的官方命名:ECMAScript.2015年6月17日,ECMAScript 6发布正式版本,即ECMAScript 2015. 1.2语法 常规语法省略 重点强调: 1.原始值和对象:原始值包括布

JS基础随笔(菜鸟必看篇)

在学习的过程中总会一次次的冒出以前囫囵吞枣的地方,下面将今天学到的一下知识点记录下来方便以后查看. JavaScript中的数据类型 简单(基本)数据类型:Number.String.Boolean.Undefined.Null 复杂(引用)数据类型: Object.Array.Date.function等 下面介绍一下简单(基本)数据类型和复杂(引用)数据类型的区别: 简单数据类型:在栈内直接存储值,如下图所示 复杂数据类型:在栈内存储引用,如下图 在了解以上两种数据类型的存储方式之后可以区分

Javascript基础学习笔记(菜鸟必看篇)

什么是变量? 变量是用于存储信息的容器 变量的声明 语法: var 变量名 变量名 = 值; 变量要先声明再赋值 变量可以重复赋值 变量的命名规则 变量必须以字母开头: 变量也能以$和_符号开头(不过我们不推荐这么做): 变量名称对大小写敏感(a和A是不同的变量). 语句 语句以一个分号结尾:如果省略分号,则由解析器确定语句的结尾. 有个好的编码习惯,都要以 ; 结尾 数据类型 在JavaScript中,一段信息就是一个值(value).值有不同的类型,大家最熟悉的类型是数字.字符串(strin

javaScript基础详解

首先讲javaScript的摆放位置:<script> 与 </script> 可以放在head和body之间,也可以body中或者head中 JavaScript的六大作用: 1直接在script输出 document.write("<h1>This is a heading</h1>");//document.write表输出,括号中h1标签同样有效 2对事件作出反应 <button type="button"

JavaScript基础教程——入门必看篇

JavaScript他是一种描述性语言,其实他并不难学,只要用心学,一定会学好,我相信大家在看这篇文章的时候,一定也学过HTML吧,使用JavaScript就是为了能和网页有更好的交互,下面切入主题. 一. JavaScript 1.什么是JavaScript JavaScript是一种描述性语言,也是一种基于对象(Object)和事件驱动(Event Driven)的,并具有安全性的脚本语言. 2.JavaScript的特点 JavaScript主要用来向HTML页面添加交互行为. JavaS

浅析JS中对函数function的理解(基础篇)

正文:我们知道,在js中,函数实际上是一个对象,每个函数都是Function类型的实例,并且都与其他引用类型一样具有属性和方法.因此,函数名实际上是指向函数对象的指针,不与某个函数绑定.在常见的两种定义方式(见下文)之外,还有一种定义的方式能更直观的体现出这个概念: var sum = new Function("num1", "num2", "return num1 + num2"); //不推荐 Function的构造函数可以接收任意数量的参

浅析JS中回调函数及用法

回调函数,什么是回调函数呢?很多初学者都不是很明白,感觉懵懵的,不理解,更不会用! 其实简单理解的话就是在一个函数执行完毕后,得到想要的特定数据后在去执行的函数,并没有性药中的那么高深! function getdata(callback){ //这里我们假设是从后端获取数据 setTimeout(function(){ //假设我们获取到数据info var info = { "id":1, "name":'张三' } //得到数据以后执行函数方法 callbac

深入理解js 中async 函数的含义和用法

一.终极解决 异步操作是 JavaScript 编程的麻烦事,麻烦到一直有人提出各种各样的方案,试图解决这个问题. 从最早的回调函数,到 Promise 对象,再到 Generator 函数,每次都有所改进,但又让人觉得不彻底.它们都有额外的复杂性,都需要理解抽象的底层运行机制. 异步I/O不就是读取一个文件吗,干嘛要搞得这么复杂?异步编程的最高境界,就是根本不用关心它是不是异步. async 函数就是隧道尽头的亮光,很多人认为它是异步操作的终极解决方案. 二.async 函数是什么? 一句话,

JS中注入eval, Function等系统函数截获动态代码

现在很多网站都上了各种前端反爬手段,无论手段如何,最重要的是要把包含反爬手段的前端javascript代码加密隐藏起来,然后在运行时实时解密动态执行. 动态执行js代码无非两种方法,即eval和Function.那么,不管网站加密代码写的多牛,我们只要将这两个方法hook住,即可获取到解密后的可执行js代码. 注意,有些网站会检测eval和Function这两个方法是否原生,因此需要一些小花招来忽悠过去. 挂钩代码 首先是eval的挂钩代码: (function() { if (window._

js中匿名函数的创建与调用方法分析

本文实例分析了js中匿名函数的创建与调用方法.分享给大家供大家参考.具体实现方法如下: 匿名函数就是没有名字的函数了,也叫闭包函数(closures),允许 临时创建一个没有指定名称的函数.最经常用作回调函数(callback)参数的值,很多新手朋友对于匿名函数不了解.这里就来分析一下. function 函数名(参数列表){函数体;} 如果是创建匿名函数,那就应该是: function(){函数体;} 因为是匿名函数,所以一般也不会有参数传给他. 为什么要创建匿名函数呢?在什么情况下会使用到匿

对js中回调函数的一些看法

最近在忙公司android的项目,所以也就很少抽时间来写些东西了.刚闲下来,我就翻了翻之前看的东西.做了android之后更加感觉到手机端开发的重要性,现在做native App  和Web App是主流,也就是说现在各种基于浏览器的web app框架也会越来越火爆了,做js的也越来越有前途.我也决定从后端开发渐渐向前端开发和手机端开发靠拢,废话不说了,我们来切入正题"js的回调函数"相关的东西. 说起回调函数,好多人虽然知道意思,但是还是一知半解.至于怎么用,还是有点糊涂.网上的一些

关于原生js中bind函数的简单实现

今天继续研究了bind函数的实现,也知道了shim和polyfill的说法,现在总结一下, if (!Function.prototype.bind) { Function.prototype.bind = function (oThis) { if (typeof this !== "function") { // closest thing possible to the ECMAScript 5 internal IsCallable function throw new Typ

js中eval()函数和trim()去掉字符串左右空格应用

对于js中eval()函数的理解和写一个函数trim()去掉字符串左右空格. trim()是参照了jquery的源码,你可以放心使用. 对于js中eval()函数的理解是本人心得不一定正确. 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <he

对vue.js中this.$emit的深入理解

对于vue.js中的this.emit的理解:this.emit('increment1',"这个位子是可以加参数的"):其实它的作用就是触发自定义函数. 看例子: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <script src="vue.js"

node.js中module模块的功能理解与用法实例分析

本文实例讲述了node.js中module模块的功能理解与用法.分享给大家供大家参考,具体如下: node.js中使用CommonJS规范实现模块功能,一个单独的文件就是一个单独的模块.通过require方法实现模块间的依赖管理. 通过require加载模块,是同步操作. 加载流程如下: 1.找到需要加载的模块文件. 2.判断是否缓存过,如果没有,则读取模块文件的内容. 3.把读取到的内容,封装在一个函数里运行. (function (exports, require, module, __fi