dom对象常用的属性和方法有哪些?

dom对象常用的属性和方法有哪些?

一、总结

一句话总结:

1、document属性和方法:document的属性有head,body之类,方法有各种获取element的方法

2、element的属性和方法:属性比如style,innerHTML和固有属性,方法比如各种动态操作元素,比如createElement,还有操作属性的set、get、remove、create解Attribute

3、attribute的属性和方法:有点包含在element里面的感觉

 

1、我们熟知location是window的属性或者说对象,那么document对象有location属性么?

解答:window有location对象,document同样有location对象,

2、如何获取一个html的文档声明?

解答:document.doctype;//可以知道文档声明,如果没有return null;这里是<!DOCTYPE html>

3、一个有如下 <!DOCTYPE html>文档声明的html文档,它的文档声明的名字是什么?

解答:html  

4、如何获取一个html的head部分?

解答:document.head//很明显选取head节点.就是<head></head>这段  

5、如何获取一个html的body部分?

解答:document.body//选取body节点.  

6、如何获取一个文档的文档声明的名字?

解答:document.doctype.name//知道文档声明的名字.  

7、document的location属性是来干嘛的?

解答:ocation一般主要是用来获取地址。  

8、如何获取一个文档当前的地址?

解答:document.location.href//获取当前地址  

9、给文档重新分配地址的三种方法是哪三种?

解答:分别是location,location的assign方法和href属性。 document.location.assign(http://www.baidu.com)//分配一个地址 document.location="http://www.baidu.com" document.location.href="http://www.baidu.com"  

10、innerText和innerHTML的区别是什么(两点区别)?

解答:一个是获取文本,一个是获取标签。 innerText是IE特有,innerHTML则是符合W3C协议的。  

11、innerText里面的标签还是标签么?

解答:不是,已经转义为了文本。  

12、element常用的几个属性是哪几个?

解答:id、nodeName、className、child、lastchild、firstchild、nextSibing、previousSibing  

13、如何通过DOM2方法获取一个标签?

解答:var d=document.querySelector("#p1");  

14、DOM2获取一个标签的两个常见方法是哪两个?

解答:querySelector和querySelectorAll  

15、querySelector和querySelectorAll和区别是什么?

解答:前者获取一个,后者获取所有对应标签的。  

16、如何在body中把b标签插入到a标签之前?

解答:document.body.insertBefore(b,a);//把b插在a前面- -   17、

17、insertBefore除了成为普通元素的方法,可否成为body的方法?

解答:肯定可以啊  

18、在body中用c标签替换b标签怎么实现?

解答:document.body.replaceChild(c,b);//(new,old)  

19、属性操作的四个方法是哪四个?

解答:set,get,create,remove,后面分别接Attribute  

20、DOM0点击事件怎么写?

解答:a.onclick=function(){}  

21、DOM2点击事件怎么写?

解答:btn.addEventListener("click",fun,false)  

22、DOM2中主要操作事件的两个方法是哪两个?

解答:add和remove接EventListener  

23、btn.addEventListener("click",fun,false)中的第三个参数是什么意思?

解答:如果是true 就是在事件捕获阶段调用,如果是false则是在事件冒泡阶段调用。  

24、这样用removeEventListener("click",function(){})有效果么?

  解答:这样是没有效果的。虽然是一个函数,但是JS会认为传入了一个另外一个函数,虽然和之前一个一模一样。  

25、IE事件调用的方法是什么?

解答:IE用的是attach的方式,a.attachEvent("onclick",function(){}        

 

 

 

二、dom对象常用的属性和方法有哪些?

 

1、DOM对象的一些常用方法:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Z-one</title>
 6 </head>
 7 <body>
 8     <p id="p1" class="p">测试</p>
 9     <p id="p2" class="p">测试</p>
10     <p id="p3" class="p">测试</p>
11 </body>
12 </html>

以上面code为例子

(1)、document 对象

a、document对象属性

document.doctype;//可以知道文档声明,如果没有return null;这里是<!DOCTYPE html>
document.doctype.name//知道文档声明的名字.
document.head//很明显选取head节点.就是<head></head>这段
document.body//选取body节点.

 

b、location

我记得location一般主要是用来获取地址。
常用方法:

1 document.location.href//获取当前地址
2 document.location.assign(http://www.baidu.com)//分配一个地址
3 另外如果href 是获取当前地址,如果给他赋值,把一个地址给他,也能达到assign的效果;
4 document.location="http://www.baidu.com"
5 或者
6 document.location.href="http://www.baidu.com"

 

innerText,innerHTML;

这二个放一起说,主要是都挺像的,这两个的作用都是往文档中写出内容,但是区别主要是:

document.body.innerText("Z-ONE") 主要是写入一个纯文本内容,此时<span>并不是标签。而是一个文本"<span>".(其实这样也显得innerText的安全性高一点)

document.body.innerHTML("z-one")也是写入一个纯文本内容,但是不会将HTML标签进行转义。

另外innerHTML是符合W3C协议的,而innerText只适用于IE浏览器。

 

c、Element元素

Element的几个必要重要的属性 感觉常用的就是:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Z-one</title>
 6 </head>
 7 <body>
 8     <p id="p1" class="p">测试</p>
 9     <p id="p2" class="p">测试</p>
10     <p id="p3" class="p">测试</p>
11   <script>
12         var a=document.getElementById("p1")//获取上面那个例子的p1元素.
13           a.id// 获取该元素的id... "p1" (貌似就是通过p1找到的他- -)
14           a.nodeName//获取到节点的名字(就是标签名字) 这里是"p"
15           a.className//获取节点的class名字,这里因为关键字的原因,只能用className;
16            另外还有一些
17             child//获取子元素  这里没有
18            lastchild//最后一个子元素.
19            firstchild//第一个子元素.
20            nextSibling//下一个兄弟元素.
21            previousSibing//上一个兄弟元素.
22 </script>
23 </body>
24 </html>

获取元素的方法
获取元素的方法主要有三种:

  • 通过ID
  • 通过类名
  • 通过元素种类
    *(针对于input元素 通过分组名字)
  • 通过DOM2的方法
    下面这个例子很好表示了获取元素的几种方法
 1   <p id="p1" class="p">测试</p>
 2     <p id="p2" class="p">测试</p>
 3     <p id="p3" class="p">测试</p>
 4 </body>
 5 <script>
 6     window.onload=function(){
 7         //用id获取第二个p标签的元素
 8         var a=document.getElementById("p2");
 9         a.style.color="red";
10         //用标签名字来获取第一个p标签;
11         var b=document.getElementsByTagName("p")[0]//获取的是一个集合,
12         b.style.fontSize="30px";//这里font-size,会报错,就用fontSize;
13         //用类名来获取第三个标签.
14         var c=document.getElementsByClassName("p")[2]//和上面一个道理
15         c.style.fontWeight="bold";
16         //通过DOM2的方法获取第1个标签;
17         var d=document.querySelector("#p1");
18         //如果是queryselectorAll() 就是获取一个集合,操作方式和上面类似。
19         //这里是通过类名,如果是ID就用#p1 标签就用p,一般是获取第一个元素.这点和Tag和Class都不一样
20         d.style.color="green";
21     }

然后就是Element的创建和添加元素。用一个例子表示吧:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>创建元素</title>
 6 </head>
 7 <script>
 8     window.onload=function(){
 9         var a=document.createElement("div");
10         a.className="p1"
11         a.innerHTML=("<span>测试下</span>");
12         //添加到文档中
13         document.body.appendChild(a);//这下子元素就写进去了
14         //如果还要添加 可以照着上面来,我们现在就添加一个元素进去
15         var b=document.createElement("div");
16         b.innerHTML="<p>测试第二弹</p>";
17         //这次我们添加在上一个元素前面
18         document.body.insertBefore(b,a);//把b插在a前面- -
19         //这时候不想要b了,想替换掉,可以这么做!
20         var c=document.createElement("div");
21         c.innerHTML="我就是来替换的";
22         document.body.replaceChild(c,b);//(new,old)
23     }
24 </script>
25 <body>
26     
27 </body>
28 </html>

 

属性操作

Element的属性操作一般就下面四种:

  • getAttribute 获取一个属性。
  • setAttribute 设置一个属性。
  • removeAttribute 删除一个属性。
  • createAttribute 新建一个属性。
    举个例子吧
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>获取属性</title>
 6 </head>
 7 <body>
 8     <div id="x1" class="p1"></div>
 9 </body>
10 <script>
11     var a=document.getElementById("x1");
12     a.getAttribute("id");//获取该阶段的属性:id
13     a.setAttribute("id","Z-one");//设置一个属性。
14     a.removeAttribute("id")//删除ID节点
15 </script>

 

2、事件处理

(1)、DOM0级事件处理

还是用一个例子说明:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     <input type="button" id="a" value="按钮">
 9 </body>
10 <script>
11     var a=document.getElementById("a");
12     a.onclick=function(){
13         console.log("测试一下");
14     }
15     //这样点击按钮就会在控制台输出测试一下
16 </script>

这一种应该算是比较常见的一种操作方式。没什么好说的。我们看下面

(2)、DOM2级事件处理程序

这里前面区别开来,就是我是你的升级版!。出了这两个方法
addEventListener();//添加
removeEventListener();//去除

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>DOM2级</title>
 6 </head>
 7 <body>
 8     <input type="button" value="按钮">
 9 </body>
10 <script>
11      var fun=function(){
12         console.log("测试一下");
13     }
14     var btn=document.querySelector("input");
15     btn.addEventListener("click",fun,false)
16     btn.removeEventListener("click",fun,false)
17         //如果是true 就是在事件捕获阶段调用,如果是false则是在事件冒泡阶段调用。
18     //另外如果这里要用removeEventListener("click",function(){})//这样是没有效果的。虽然是一个函数,但是JS会认为传入了一个另外一个函数,虽然和之前一个一模一样。
19 </script>
20 </html>

 

(3)、IE事件调用

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>IE事件调用</title>
 6 </head>
 7 <body>
 8     <input type="button" id="p1" value="按钮">
 9 </body>
10 <script>
11     var a=document.getElementById("p1");
12     a.attachEvent("onclick",function(){
13         console.log("测试一下");
14     })
15     a.attachEvent("onclick",function(){
16         console.log("猜猜我在第一还是在第二");
17     })
18 //这里有一点。如果是如果是调用了两次attachEvent(),后面的会在前面出现。和DOM2是相反的.
19 另外IE下 事件处理会在全局作用下运行。
20 </script>
21 </html>

 

 

三、测试题-简答题

1、我们熟知location是window的属性或者说对象,那么document对象有location属性么?

解答:window有location对象,document同样有location对象,

2、如何获取一个html的文档声明?

解答:document.doctype;//可以知道文档声明,如果没有return null;这里是<!DOCTYPE html>

3、一个有如下 <!DOCTYPE html>文档声明的html文档,它的文档声明的名字是什么?

解答:html  

4、如何获取一个html的head部分?

解答:document.head//很明显选取head节点.就是<head></head>这段  

5、如何获取一个html的body部分?

解答:document.body//选取body节点.  

6、如何获取一个文档的文档声明的名字?

解答:document.doctype.name//知道文档声明的名字.  

7、document的location属性是来干嘛的?

解答:ocation一般主要是用来获取地址。  

8、如何获取一个文档当前的地址?

解答:document.location.href//获取当前地址  

9、给文档重新分配地址的三种方法是哪三种?

解答:分别是location,location的assign方法和href属性。 document.location.assign(http://www.baidu.com)//分配一个地址 document.location="http://www.baidu.com" document.location.href="http://www.baidu.com"  

10、innerText和innerHTML的区别是什么(两点区别)?

解答:一个是获取文本,一个是获取标签。 innerText是IE特有,innerHTML则是符合W3C协议的。  

11、innerText里面的标签还是标签么?

解答:不是,已经转义为了文本。  

12、element常用的几个属性是哪几个?

解答:id、nodeName、className、child、lastchild、firstchild、nextSibing、previousSibing  

13、如何通过DOM2方法获取一个标签?

解答:var d=document.querySelector("#p1");  

14、DOM2获取一个标签的两个常见方法是哪两个?

解答:querySelector和querySelectorAll  

15、querySelector和querySelectorAll和区别是什么?

解答:前者获取一个,后者获取所有对应标签的。  

16、如何在body中把b标签插入到a标签之前?

解答:document.body.insertBefore(b,a);//把b插在a前面- -   17、

17、insertBefore除了成为普通元素的方法,可否成为body的方法?

解答:肯定可以啊  

18、在body中用c标签替换b标签怎么实现?

解答:document.body.replaceChild(c,b);//(new,old)  

19、属性操作的四个方法是哪四个?

解答:set,get,create,remove,后面分别接Attribute  

20、DOM0点击事件怎么写?

解答:a.onclick=function(){}  

21、DOM2点击事件怎么写?

解答:btn.addEventListener("click",fun,false)  

22、DOM2中主要操作事件的两个方法是哪两个?

解答:add和remove接EventListener  

23、btn.addEventListener("click",fun,false)中的第三个参数是什么意思?

解答:如果是true 就是在事件捕获阶段调用,如果是false则是在事件冒泡阶段调用。  

24、这样用removeEventListener("click",function(){})有效果么?

  解答:这样是没有效果的。虽然是一个函数,但是JS会认为传入了一个另外一个函数,虽然和之前一个一模一样。  

25、IE事件调用的方法是什么?

解答:IE用的是attach的方式,a.attachEvent("onclick",function(){}        

 

转载于:https://www.cnblogs.com/Renyi-Fan/p/9105002.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/397793.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

html左中右自适应布局,CSS左中右自适应布局六种方案与原理

css虽简单,但细节多,技巧性高,易学难精。如何实现左右固定300px , 中间宽度自适应&#xff1f;有如下结构左右中公有样式, 设置高,设置左右宽度固定300px,左右为红色&#xff0c;中间为黄色。.item {height: 400px;}.left,.right {width: 300px;background: #f00;}.center {bac…

cacti 忘记密码的方法

忘记密码的方法如果是admin 的密码丢失&#xff0c;id 1&#xff1b;其他用户以此类推。进入mysqlmysql> show databases; mysql> use cacti;mysql> show tables; mysql> update user_auth set passwordmd5("newpassword") where id1;新的cacti密码就是…

cr3格式是什么意思_佳能rp的cr3如何打开?修图为什么要用raw格式?转码又是什么?...

佳能rp的cr3如何打开&#xff1f;修图为什么要用raw格式&#xff1f;转码又是什么&#xff1f;这是我个人整理的广大网友的一些答案&#xff0c;不想浪费大家太多时间就在这里分享给大家希望大家可以快速理解。(搜集的广大网友的回答&#xff0c;方便大家理解&#xff0c;希望他…

SGU traffic light

占位置。。转载于:https://www.cnblogs.com/usedrosee/p/4669358.html

计算机基础应用的培养活动记录,计算机应用基础综合实训

摘要&#xff1a;《计算机应用基础综合实训(Windows7Office 2010 第3版)》是中等职业教育课程改革国家规划新教材,根据教育部2009年颁布的"中等职业学校计算机应用基础教学大纲"中职业模块的要求编写,在第2版的基础上修订而成,经全国中等职业教育教材审定委员会审定通…

cronschedulebuilder 到时还没运行完_为什么我的软件编译时没问题,运行时却出错?...

首先有件事要和大家说一下&#xff1a;我的公众号现在可以留言了&#xff01;出于种种不可抗力的原因&#xff08;你们懂的&#xff09;&#xff0c;2018 年 3 月 12 号之后注册的公众号将不带有留言功能&#xff0c;并且前三个月内注册但并未使用的公众号的留言功能也会被一并…

Canvas createImageData

createImageData() 方法创建新的空白 ImageData 对象。新对象的默认像素值 transparent black。 对于 ImageData 对象中的每个像素&#xff0c;都存在着四方面的信息&#xff0c;即 RGBA 值&#xff1a; R - 红色 (0-255)G - 绿色 (0-255)B - 蓝色 (0-255)A - alpha 通道 (0-25…

青岛计算机类职业中学,青岛最好的职业学校有哪些?

青岛海洋职业学校是一所由青岛市教育局批准&#xff0c;国家承认学历的重点中等职业学校。学校占地200余亩&#xff0c;建筑面积5万平方米&#xff0c;在籍学生3975人。学校拥有雄厚的师资力量&#xff0c;以专职教师为主&#xff0c;是一支政治素质好&#xff0c;师德水平高、…

测试1

2018/06/03 测试我的随笔转载于:https://www.cnblogs.com/xixirui/p/9129252.html

使用Javascript正则表达式来格式化XML内容

2019独角兽企业重金招聘Python工程师标准>>> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head><meta http-equivcontent-type content"text/html; charsetUTF-8"><title>Xml格式化…

mysql vfp_vfp+mysql问题|交流区 - 梅子Visual FoxPro 编程 - Powered by phpwind

感谢楼上,请现场指导,拜谢c_pzwhfiellist""c_pzwhbglist""For i1 To Fcount()-1c_pzwhfiellistc_pzwhfiellistField(i)","c_pzwhbglistc_pzwhbglistField(i)Space(1)"pzwhk."Field(i)","Chr(10)Endforc_pzwhfiellistc_pzwhf…

Nginx 笔记与总结(3)配置虚拟主机

Nginx 重启的另外一种方式&#xff0c;相当于 kill -HUP cat /usr/local/nginx/logs/nginx.pid&#xff1a; /usr/local/nginx/sbin/nginx -s reload停止 Nginx 的另外一种方式&#xff1a; /usr/local/nginx/sbin/nginx -s stop重读日志文件的另一种方式&#xff0c;相当于 …

计算机如何查找目标,如何使用命令行查找计算机地理位置? | MOS86

有多种方法可以从IP地址中了解计算机的位置&#xff0c;但如果您决定使用命令行查找信息&#xff0c;那么您如何处理&#xff1f;今天今天的问题Screenshot由Paul Fenwick(Flickr)提供。问题SuperUser阅读器AlikElzin-kilaka想知道如何找到一台电脑首先&#xff0c;AlikElzin-k…

Nmap命令的常用实例

一、Nmap简介 nmap是一个网络连接端扫描软件&#xff0c;用来扫描网上电脑开放的网络连接端。确定哪些服务运行在哪些连接端&#xff0c;并且推断计算机运行哪个操作系统&#xff08;这是亦称 fingerprinting&#xff09;。它是网络管理员必用的软件之一&#xff0c;以及用以评…

mysql sqlexception_c-很奇怪-mysql的sql :: SQLException未被其类型捕...

我正在使用带有此(稍微简化)代码的mysql c连接器.try{statement->setString(1, word);statement->executeUpdate();}catch( sql::SQLException& e ){// I dont get herereturn sqlerrno_to_error_code( e.getErrorCode() );}catch( std::exception& e ){// I do …

Linux Kernel系列 - 黄牛X内核代码凝视

Hanks.Wang - 专注于操作系统与移动安全研究。Linux-Kernel/SELinux/SEAndroid/TrustZone/Encription/MDM Mail - byhankswanggmail.com 牛X的内核代码凝视 大牛的代码质量高稳定性好&#xff0c;并且逻辑清晰易读性比較强&#xff0c;今天看到Linux Kernel红黑树的代码时&a…

电子商务计算机网络安全技术教案,网络安全技术教案.pdf

名师精编 优秀教案《网络安全技术》教案2011-2012 第 2 学期适用班级&#xff1a; 2010 级计算机网络技术专业编写&#xff1a;徐英武名师精编 优秀教案第 1~2 课时周次 &#xff11; 日期 2012 年 02 月 14 日 授课班级 2010 级计算机网络技术课题 网络安全概述 课 型 理论课教…

技术文章汇总

点击以下链接&#xff0c;可以查看相关技术文章&#xff1a;包括APP软件开发、手机软件开发、嵌入式开发、Java和C/C编程&#xff0c;同时涉及原型设计、效果图设计、切图、网络、多媒体、加密、字符编码、通信原理、测试和项目管理等各方面的知识。APP开发实战手机开发实战技术…

咋样查mysql的url_eclipse用jdbc连接mysql数据库时,url是填什么?怎样找出地址?

展开全部 jdbc连接mysql数据62616964757a686964616fe78988e69d8331333337623535库的url为: jdbc:mysql://主机名或IP抵制:端口号/数据库名?useUnicode=true&characterEncoding=UTF-8 jdbc连接其他数据库的连接字符串写法为:1、Oracle8/8i/9i数据库(thin模式) Class.for…

HP服务器ile进系统,HP GEN10服务器UEFI安装Windows Sverver 2012 R2教程

1.操作系统&#xff1a;Windows Server 2012 R2 VL with Update (x64) – DVD (Chinese-Simplified)&#xff0c;MSDN下载地址&#xff1a;ed2k://|file|cn_windows_server_2012_r2_vl_with_update_x64_dvd_6052729.iso|5545527296|BD499EBCABF406AB82293DD8A5803493|/2.镜像写…