DOM基础知识

1.DOM介绍

DOM= Document Object Model,文档对象模型,DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说,这是表示和处理一个HTML或XML文档的常用方法。DOM的设计是以对象管理组织(OMG)的规约为基础的,因此可以用于任何编程语言。

(注意:IE中的DOM和其他浏览器有区别,IE中用的是COM)

2.节点分类:

元素节点,文本节点,属性节点

比如:<span id=myid>文本内容</span>

那么元素结点就是span,文本节点就是:文本内容,属性节点就是:id=myid

3.节点操作

注意事项:获取元素需要文档加在完毕才能获取,所以js要在文档加在之后执行,可以将js放在文档最后或者使用window.onload=function(){js代码}

3.1getElementById()获取指定ID元素的节点,比如document.getElementById(‘divid’)这样就可以获取到id为divid的节点对象(注意id唯一性)

由于我们获取到的是对象,所以可以使用该对象下面的属性tagName获取元素节点的标签名,innerHTML获取元素节点里面的内容

完整例子:

<div id=”divid” title=”标题” class=”myclass” style=”color:red;”>这是内容部分1</div>

<script type=”text/javascript”>

//获取div元素

var val=document.getElementById(‘divid’);//获取id=divid的元素

var tag=val.tagName;

document.write(tag);//DIV

document.write(‘<br>’);

var  content=val.innerHTML;

document.write(content);//输出:这是内容部分1

document.write(‘<br>’);

document.write(val.id);//输出id的值

document.write(‘<br>’);

val.id=’test’;//设置id的值为test

document.write(val.id);

document.write(‘<br>’);

val.title=’新的标题’;

document.write(val.title);

document.write(‘<br>’);

document.write(val.style.color);//获取color的值

val.style.color=’blue’;//设置新的颜色

document.write(‘<br>’);

document.write(val.className);//获取class的值,修改同上

3.2getElementsByTagName()获取相同元素的节点列表

<ul>

<li>第一个li标签</li>

<li>第二个li标签</li>

<li>第三个li标签</li>

</ul>

<script type=”text/javascript”>

var tag=document.getElementsByTagName(‘li’);

//tag[0]和tag.item(0)都可以获取到第一个li标签元素

document.write(tag.item(0).innerHTML);//这样就会获取到第一个li的内容

document.write(tag.length);//获取到li的总个数

</script>

结果就是

第一个li标签3

3.3getElementsByTagName()获取相同名称的元素(注意是根据name的值来获取)

<input name=”addin” value=”为空”  type=”text” />

<input name=”addin” value=”” type=”text” />

<input name=”addin” value=”” type=”text” />

<script type=”text/javascript”>

var tag=document.getElementsByName(‘addin’);

//tag[0]和tag.item(0)都可以获取到第一个li标签元素

document.write(tag.item(0).value);//这样就会获取到第一个name=addin的input标签的value的值

</script>

这样就会输出为空

3.4getAttribute()获取元素中某一个属性的值

上面讲到getElementById中用.id获取id的值是有区别的(使用getAttribute兼容性更高一些)

3.5setAttribute()需要两个参数,一个是属性名,一个是属性值

3.6removeAttribute()一个参数,会移除该对象对应属性

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏技术博文

mysql中int长度的意义

疑问: mysql的字段,unsigned int(4), 和unsinged int(5), 能存储的数值范围是否相同。如果不同,分别是多大? 答: 无论是i...

34140
来自专栏抠抠空间

JavaScript之事件及动画

一、事件 常用事件 click(function(){...}) //单击事件 hover(function(){...}) //鼠标经过事件 b...

30850
来自专栏liulun

riot.js教程【四】Mixins、HTML内嵌表达式

前文回顾 riot.js教程【三】访问DOM元素、使用jquery、mount输入参数、riotjs标签的生命周期; riot.js教程【二】组件撰写准则...

29670
来自专栏lgp20151222

jquery的html,text,val

    1.html()用为读取和修改元素的HTML标签     2.text()用来读取或修改元素的纯文本内容     3.val()用来读取或修改表单元素的...

11020
来自专栏开源优测

使用CSS选择器进行元素定位

在selenium webdriver中,支持使用CSS选择器来进行元素定位,事实在真的投入工作,大量编辑用例和元素定位的时候,使用css 和 xpath才...

29350
来自专栏Golang语言社区

Go-defer,panic,recover

defer 语法: defer function_name() 简单来讲,在defer所在函数执行完所有的代码之后,会自动执行defer的这个函数。 示例一(...

380130
来自专栏前端小叙

vue父组件向子组件动态传值的两种方法

在一些项目需求中需要父组件向子组件动态传值,比如我这里的需求是,父组件动态通过axios获取返回的图片url数组然后传给子组件,上传图片的子组件拿到该数组后进行...

792100
来自专栏web前端

JavaScript基础学习--10 return、定时器基础

Demos:   https://github.com/jiangheyan/JavaScriptBase 一、return      1、返回值:数字、字...

20460
来自专栏Golang语言社区

Go-defer,panic,recover

defer 语法: defer function_name() 简单来讲,在defer所在函数执行完所有的代码之后,会自动执行defer的这个函数。 示例一(...

30680
来自专栏数据结构笔记

JavaScript中 appendChild追加子节点无效的解决办法

这其实是因为一个元素只能有一个父元素,上面这段代码试图将 btn添加到多个元素中。

14220

扫码关注云+社区

领取腾讯云代金券