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…

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

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

使用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格式化…

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…

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

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

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.镜像写…

py文件的操作

文件操作基本流程。 计算机系统分为&#xff1a;计算机硬件&#xff0c;操作系统&#xff0c;应用程序三部分。 我们用python或其他语言编写的应用程序若想要把数据永久保存下来&#xff0c;必须要保存于硬盘中&#xff0c;这就涉及到应用程序要操作硬件&#xff0c;众所周知&a…

CentOS系统启动流程你懂否

一、Linux内核的组成相关概念&#xff1a;Linux系统的组成部分&#xff1a;内核根文件系统内核&#xff1a;进程管理、内存管理、网络协议栈、文件系统、驱动程序。IPC(Inter-Process Communication进程间通信):就是指多个进程之间相互通信&#xff0c;交换信息的方法。Linux I…

debian 访问 windows 共享_【续】windows环境redis未授权利用方式梳理

01Redis未授权产生原因1.redis绑定在0.0.0.0:6379默认端口&#xff0c;直接暴露在公网&#xff0c;无防火墙进行来源信任防护。2.没有设置密码认证&#xff0c;可以免密远程登录redis服务02漏洞危害1.信息泄露&#xff0c;攻击者可以恶意执行flushall清空数据2.可以通过eval执行…

mysql 列数据显示转成行数据显示_Mysql的列修改成行并显示数据的简单实现

创建测试表&#xff1a;DROP TABLE IF EXISTS test;CREATE TABLE test (year int(11) DEFAULT NULL,month int(11) DEFAULT NULL,amount double DEFAULT NULL) ENGINEInnoDB DEFAULT CHARSETutf8;插入数据&#xff1a;INSERT INTO test VALUES (1991, 1, 1.1);INSERT INTO test…

sql获取某列出现频次最多的值_业务硬核SQL集锦

戳上方蓝字关注我 这两年学会了跑sql&#xff0c;当时有很多同学帮助我精进了这个技能&#xff0c;现在也写成一个小教程&#xff0c;反馈给大家。适用对象&#xff1a;工作中能接触到sql查询平台的业务同学(例如有数据查询权限的产品与运营同学)适用场景&#xff1a;查询hive&…

nginx编译安装与配置使用

第一部分----nginx基本应用源码编译安装nginx1、安装pcre软件包&#xff08;使nginx支持http rewrite模块&#xff09;yum install -y pcre yum install -y pcre-devel2、安装openssl-devel&#xff08;使nginx支持ssl&#xff09;yum install -y openssl-devel3、创建用户ngin…

修复 Xcode 错误 “The identity used to sign the executable is no longer valid”

如图&#xff1a; 解决方法来自&#xff1a;http://stackoverflow.com/questions/7088441/the-identity-used-to-sign-the-executable-is-no-longer-valid/14275197 Restarting Xcode didnt work for me. What fixed it for me was going to Accounts in Xcode (in preferences…

centos设置ip

这里是centos7.vmware安装centos后需要设置ip 1.首先查看虚拟机的网络适配器信息 2.根据信息修改配置文件 vi /etc/sysconfig/network-scripts/ifcfg-ens33 图为修改后的,最初的配置为 BOOTPROTOdhcp ONBOOTno IPADDR,GATEWAY,NETMASK没有进行配置需要根据网络适配器配置手动维…

解决Failed to connect session for conifg 故障

服务器升级openssh之后jenkins构建报错了&#xff0c;报错信息如下&#xff1a; Failed to connet or change directory jenkins.plugins.publish_over.BapPublisherException:Failed to connect session for config.....Message [Algorithm negotiation fail] 升级前ssh版本&a…

78oa mysql_78oa系统版本升级方法

可升级版本预览升级方法&#xff1a;1、备份数据库、附件目录、二次开发程序打开开始菜单——控制面板——管理工具——服务&#xff0c;右键点击停止 78oa mysql service 服务&#xff0c;完整复制【D:\78OA\server\modules\storage\data\78oa】(数据库)文件夹至备份区域。完整…

列表、元组、字典、集合的定义、操作与综合练习

l[A,B,C] t{A,B,C}l.append(B)print(l)scores[66,77,88]d{A:66,B:77,C:88} d[B]99 d[D]111 d.pop(C) print(d)s1{A,B,C} s2{A,C,D} print(s1&s2) print(s1|s2) 转载于:https://www.cnblogs.com/chenjunyu666/p/9147417.html

export mysql home_mysql的Linux下安装笔记

注&#xff1a;在5.7之后MySQL不在生成my-default.cnf配置。tar -xzvf mysql-5.7.28-linux-glibc2.12-x86_64.tar.gzmv mysql-5.7.28-linux-glibc2.12-x86_64.tar.gz/ /usr/local/mysql新建 useradd mysql新建文件夹mkdir /usr/local/mysql/data生成配置&#xff1a;./mysqld -…

[转]DevExpress GridControl 关于使用CardView的一点小结

最近项目里需要显示商品的一系列图片&#xff0c;打算用CardView来显示&#xff0c;由于第一次使用&#xff0c;遇到许多问题&#xff0c;发现网上这方面的资源很少&#xff0c;所以把自己的一点点实际经验小结一下&#xff0c;供自己和大家以后参考。 1、选择CardView&#xf…