html--深入理解4种dom对象
这四个对象是从HTML结构中逐层深入的,分别代表了HTML结构中所有的内容;
1、Document对象
每个载入浏览器的 HTML 文档都会成为 Document 对象。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
提示:Document 对象是 Window 对象的一部分,可通过 window.document 属性对其进行访问。
Document对象集合有forms[],images[],links[],anchors[],all[],applets.
document对象的方法:
write() 方法值得注意,在文档载入和解析的时候,它允许一个脚本向文档中插入动态生成的内容。
2、Element对象
element对象表示的是HTML元素。
element(也可以说这是HTML元素)常用的属性和方法:
1、appendChild() 方法向节点添加最后一个子节点。
<body> <ul id="myList"><li>Coffee</li><li>Tea</li></ul> <p id="demo">请点击按钮向列表中添加项目。</p> <button onclick="myFunction()">亲自试一试</button> <script>
function myFunction()
{
var node=document.createElement("LI");
var textnode=document.createTextNode("Water");
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);
}
</script> <p><b>注释:</b>首先创建 LI 节点,然后创建文本节点,然后把这个文本节点追加到 LI 节点。最后把 LI 节点添加到列表中。</p> </body>
2、childNodes 属性返回节点的子节点集合,以 NodeList 对象。
<body><p id="demo">请点击按钮来获得 body 元素子节点的相关信息。</p> <button onclick="myFunction()">试一下</button> <script>
function myFunction()
{
var txt="";
var c=document.body.childNodes;
for (i=0; i<c.length; i++)
{
txt=txt + c[i].nodeName + "<br>";
};
var x=document.getElementById("demo");
x.innerHTML=txt;
}
</script> <p><b>注释:</b>元素中的空格被视为文本,而文本被视为节点。</p> </body>
3、className 属性设置或返回元素的 class 属性。
<html>
<body id="myid" class="mystyle"> <script>
var x=document.getElementsByTagName('body')[0];
document.write("Body CSS 类:" + x.className);
document.write("<br>");
document.write("另一个替代方法:");
document.write(document.getElementById('myid').className);
</script> </body>
</html>
4、getAttribute() 方法返回指定属性名的属性值。
<html>
<body> 请阅读 <a href="/jsref/dom_obj_attributes.asp" target="_blank">Attr 对象</a>, <p id="demo">请点击按钮来显示上面这个链接的 target 属性值。</p> <button onclick="myFunction()">试一下</button> <script>
function myFunction()
{
var a=document.getElementsByTagName("a")[0];
document.getElementById("demo").innerHTML=a.getAttribute("target");
}
</script> </body>
</html>
5、innerHTML 属性设置或返回元素的 inner HTML。
<html>
<head>
<script>
function changeLink()
{
document.getElementById('myAnchor').innerHTML="W3School";
document.getElementById('myAnchor').href="http://www.w3school.com.cn";
document.getElementById('myAnchor').target="_blank";
}
</script>
</head>
<body> <a id="myAnchor" href="http://www.microsoft.com">微软</a>
<input type="button" onclick="changeLink()" value="更改链接"> </body>
</html>
6、element.removeAttribute()从元素中移除指定属性。/element.removeAttributeNode()移除指定的属性节点,并返回被移除的节点。
element.removeChild()从元素中移除子节点。/element.replaceChild()替换元素中的子节点;
<html>
<body> <ul id="myList" style="color:red"><li>Coffee</li><li>Tea</li><li>Milk</li></ul> <p id="demo" style="color:red" >点击按钮来删除列表中的首个项目。</p> <button onclick="myFunction1()">替换节点</button>
<button onclick="myFunction()">删除节点</button>
<button onclick="myFunction2()">移除P的style属性</button>
<script>
function myFunction()
{
var list=document.getElementById("myList");
list.removeChild(list.childNodes[0]);
}
function myFunction1()
{
//创建新文本节点
var newnode = document.createTextNode('water');
var list=document.getElementById("myList"); list.replaceChild(newnode,list.childNodes[0]);
} function myFunction2(){
document.getElementsByTagName("P")[0].removeAttribute("style");
//必须指定第几个标签,如[0]表示第一个p标签;
alert("移除成功!");
}
</script> </body>
</html>
7、textContent 属性设置或返回指定节点的文本内容,以及它的所有后代。
<html>
<body> <p id="demo">点击按钮来获得 button 元素的文本内容。</p> <button onclick="myFunction()">试一下</button> <script>
function myFunction()
{
var c=document.getElementsByTagName("BUTTON")[0];
var x=document.getElementById("demo");
x.innerHTML=c.textContent;
}
</script> <p><b>注释:</b>Internet Explorer 8 以及更早的版本不支持此属性。</p> </body>
</html>
3、Attribute对象
在 HTML DOM 中,Attr 对象表示 HTML 属性。attribute属性是属于element对象(即HTML元素的属性)。
4、Event对象
Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
HTML 标签定义的事件行为:
鼠标 / 键盘属性:
html--深入理解4种dom对象的更多相关文章
- WebKit JavaScript Binding添加新DOM对象的三种方式
一.基础知识 首先WebKit IDL并非完全遵循Web IDL,只是借鉴使用.WebKit官网提供了一份说明(WebKitIDL),比如Web IDL称"operation”(操作), 而 ...
- 锋利的jQuery--jQuery与DOM对象的互相转换,DOM的三种操作(读书笔记一)
1.jQuery对象就是通过jQuery包装DOM对象后产生的对象. 2.jQuery对象和DOM对象的相互转换. 良好的书写风格: var $input=$("input" ...
- 深入理解DOM节点类型第一篇——12种DOM节点类型概述
× 目录 [1]元素 [2]特性 [3]文本[4]CDATA[5]实体引用[6]实体名称[7]处理指令[8]注释[9]文档[10]文档类型[11]文档片段[12]DTD 前面的话 DOM是javasc ...
- 谈谈Delph中的类和对象2---类可以理解成一种特殊的数据结构、类型转换
三.类可以理解成一种特殊的数据结构 我们知道数据类型可以进行强制类型转换,类既然可以理解成一种数据类型,那么它也应该可以进行类型转换.比如下面代码为一个按钮(Button1)的单击事件 procedu ...
- jQuery对象与dom对象的转换
一直以来对于通过jQuery方式获取的对象使不能直接使用JavaScript的一些方法的,开始的时候不理解,现在此案知道,原来jQuery获得的对象并不和我们平时使用getElementById获得的 ...
- JavaScript 对象、DOM对象、jquery对象的区别、转换详解
一.JavaScript 对象 JavaScript 提供多个内建对象,比如 String.Date.Array 等等. 对象只是带有属性和方法的特殊数据类型. 访问对象的属性: [javascrip ...
- 转:jQuery对象与dom对象的转换
jQuery对象与dom对象的转换 发布时间:September 20, 2007 分类:JavaScript <新站上线的手记> <Discuz!多附件上传选择框之jQuery版& ...
- JQuery对象与DOM对象分析
一.定义: DOM对象(文档对象模型):暂时这么理解:通过JavaScript获取的HTML元素,称为DOM对象.如:var domID=document.getElementById("i ...
- 关于jquery对象和DOM对象的区别
这个问题的出现是因为自己对jquery不够了解,只会获取简单的Demo,做简单的操作,将jquery的很多方法和js中的混淆,以为js中的很多方法,在jquery中也可以使用,这是完全错误的理解! 所 ...
随机推荐
- [Maven实战-许晓斌]-[第二章]-2.6 NetBeans上面安装Maven插件
NetBeans上面安装Maven插件
- jquery之链式调用,层级菜单
一. 链式调用的含义 jquery对象的方法会在执行完后返回这个jquery对象,所有jquery对象的方法可以连起来写: $('#div1') // id为div1的元素 .children('ul ...
- linux修改用户名
貌似只需要改红色的就行了,要保险就都改,比如阿里云服务器就要2个都改 ubuntu:修改 /etc/hostname 修改 /etc/hosts 比如:127.0 ...
- css 清楚浮动三种方法
我们可以看到这样一个布局: <style> .left{ width: 200px; height: 200px; background-color: #00ee00; float: le ...
- 手把手教你在CentOS 7.4下搭建Zabbix监控(转)
Linux系统版本:CentOS 7.4 1.安装前需要先关闭selinux和firewall. 1.1 [root@zabbix ~]# vi /etc/selinux/config 将SELINU ...
- Redis中算法之——Raft算法
Sentinel系统选举领头的方法是对Raft算法的领头选举方法的实现. 在分布式系统中一致性是很重要的.1990年Leslie Lamport提出基于消息传递的一致性算法Paxos算法,解决分布式系 ...
- 差分ADC到单端ADC
单片机可以处理单端ADC(不在电压范围内要进行分压),也可以处理差分ADC(但需要双路输入).差分信号在传输过程中抗共模干扰能力很强,所以传输中都用差分传输,到ADC时可以差分也可以单端(需要放大器处 ...
- 在ionic3自定义组件中使用官方组件
先创建组件: ionic g component xxx 在components里面如下图引入
- PC端政务云产品的一些的看法
第一部分:网站整体问题 1. 在hover或click时,没有明确的色彩等样式变化,如腾讯采取的是背景和颜色同时变化,搜狐和知乎采取的是颜色字体颜色的改变,无论时哪种,我觉得都是必要的. 2. 与上一 ...
- springboot实现服务器端消息推送(H5原生支持)
随着互联网的发展,传统的HTTP协议已经很难满足Web应用日益复杂的需求了.近年来,随着HTML5的诞生,WebSocket协议被提出,它实现了浏览器与服务器的全双工通信,扩展了浏览器与服务端的通信功 ...