js_document

旧城等待， 2022-05-25 05:44 150阅读 0赞

1. document

我们常说的dom是指：document object model

1) Document的属性

document.title //设置文档标题等价于HTML的title标签

document.bgColor //设置页面背景色

document.fgColor //设置前景色(文本颜色)

document.linkColor //未点击过的链接颜色

document.alinkColor //激活链接(焦点在此链接上)的颜色

document.vlinkColor //已点击过的链接颜色

document.URL //设置URL属性从而在同一窗口打开另一网页

document.fileCreatedDate //文件建立日期，只读属性

document.fileModifiedDate //文件修改日期，只读属性

document.fileSize //文件大小，只读属性

document.cookie //设置和读出cookie

document.charset //设置字符集 简体中文:gb2312

2) 常用方法

//动态向页面写入内容

document.write()

//创建一个html标签对象

document.createElement(Tag)

//获得指定ID值的对象

document.getElementById(ID)

//获得指定name值的对象数组（标签需要有name属性，如input标签，div标签是没有name属性的

document.getElementsByName(name)

//获得标签为name的对象数组

document.getElementsByTagName(name)

// 创建一个dom元素

document.createElement(tagname)

// 添加一个孩子元素

document.body.appendChild(oTag)

getElementById方法返回id为参数的标签对象，如果页面中id相同的标签有多个，则取么一个。如:

// id如果重了，只取第一个

document.write(document.getElementById("username").value);

输出：

![20180509084728913][]

getElementsByName方法返回所有标签的name属性为参数的标签。如：

<div name="desc">name为desc的标签</div>

<div name="desc">name为desc的标签2</div>

<div name="type">name为type的标签</div>

var descList = document.getElementsByName("desc");

document.write("getElementsByName('desc') length:"+descList.length);

for (var i = 0; i < descList.length; ++i)

document.write("<br />");

document.write(descList\[i\].innerHTML);

![20180509084753767][]

getElementsByTagName方法返回所有标签名称为参数的对象

var divList = document.getElementsByTagName("div");

document.write("getElementsByTagName('div') length:"+divList.length);

for (var i = 0; i < divList.length; ++i)

document.write("<br />");

document.write(divList\[i\].innerHTML);

输出所有标签为div的对象：

![20180509084816722][]

**动态创建标签：**

//document.createElement(tagName):创建一个元素

//appendChild(dom)

var divObj = document.createElement("div");

divObj.innerHTML = "<strong>我是一个动态创建的div哦！</strong>";

divObj.style.width = "220px";

divObj.style.height = "100px";

divObj.style.background = "\#9F3";

divObj.style.border = "1px solid red";

divObj.style.marginTop = "100px";

document.body.appendChild(divObj);

![20180509084843448][]

3) 获取标签内容

①　非表单元素：

如div、p、a、span、label、table、tr、td、h2等：

innerHTML：获取带格式的文本（含子标签）

innerText：获取纯文本（只有内容，不含标签）

outerHTML：获取带格式的文本（含本标签和孩子标签）

outerText：获取纯文本

如：

div标签内容

<p>p标签内容</p>

</div>

alert("innerHTML:"+document.getElementById("isdiv").innerHTML);

alert("innerText:"+document.getElementById("isdiv").innerText);

alert("outerHTML:"+document.getElementById("isdiv").outerHTML);

alert("outerText:"+document.getElementById("isdiv").outerText);

![20180509084938587][]![20180509084945366][]

![20180509084955334][]![20180509085002848][]

②　表单元素

value：只有form元素才能使用value获取相应的值。

**文本框：**

var objDom = document.getElementById("XXXid");

var fieldValue = objDom.getAttribute("type");// 获取标签type

var tagName = objDom.tagName.toLowerCase();// 获取标签名称

if((tagName=="input" &&

(fieldValue=="text" || fieldValue=="password")) || tagName=="textarea")\{

alert(objDom.value);

**下拉框：**

var objDom = document.getElementById("XXXid");

var fieldValue = objDom.getAttribute("type");// 获取标签type

var tagName = objDom.tagName.toLowerCase();// 获取标签名称

if(tagName=="select")\{

var value = objDom.value;

var selectedIndex = objDom.selectedIndex;

var text = objDom.options\[selectedIndex\].text;

alert("value:"+value+"text:"+text);

**单选/复选框：**

var objDom = document.getElementsByName("XXXName");

var fieldValue = objDom\[0\].getAttribute("type");// 获取标签type

var tagName = objDom\[0\].tagName.toLowerCase();// 获取标签名称

if(tagName=="input" &&(fieldValue=="radio" || fieldValue=="checkbox"))\{

var arr = \[\];

for(var i=0;i<objDom.length;i++)\{

if(objDom\[i\].checked)\{

arr.push(objDom\[i\].value);

alert(arr.toString());

4) 获取/修改属性值

dom.getAttribute(key);//获取标签元素属性对应属性值

dom.setAttribute(key,value);//为标签元素添加属性和属性值

Key：属性、value：属性值。

如:(id,"tm\_div") (type,"text") (name,"username")

var inputDom = document.getElementById("usernameid");

// 修改id值

inputDom.setAttribute("id","newid");

var newInputDom = document.getElementById("newid");

document.write("id为newid标签的age："+newInputDom.getAttribute("age"));

输出：

![2018050908503560][]

**又如**，修改其他属性：

inputDom.setAttribute("age",20);

document.write("age改为20后age:"+inputDom.getAttribute("age"));

![2018050908510160][]

如果是元素自身由w3c提供元素属性是可以直接通过当前dom对象本身获取

如:

document.getElementById("username").id

document.getElementById("username").type

document.getElementById("username").name

document.getElementById("username").style

如：

var newInputDom = document.getElementById("newid");

// 直接使用.id

document.write(".id:"+newInputDom.id);

document.write("<br/>");

newInputDom.id="otherid";// 修改id值

document.write(".id=otherid后id:"+newInputDom.id);

document.write("<br/>");

输出：

![20180509085312488][]

5) 获取来访页面

//获取来访页面

alert(document.referrer);

上面的代码没有调通，可能是单词拼错，没有跑通。

此方法最常用的用途就是用来记录页面是从哪里点进来的，进行一个监控。

6) 获取当前页面中的焦点标签

// 还没有去测试过

alert(document.selection);

7) 获取孩子标签

获取body节点：var bodydom = document.body;

取元素的直接孩子节点：var elements = bodydom.childNodes;

如：

![2018050908534791][]

加上script元素一共有6个直接元素（div中的span不是直接子元素），所以最后输出12.因为每个元素算两个，一个标签一个值。

nodeName 属性含有某个节点的名称。

l 元素节点的 nodeName 是标签名称

l 属性节点的 nodeName 是属性名称

l 文本节点的 nodeName 永远是 \#text

l 文档节点的 nodeName 永远是 \#document

注释：nodeName 所包含的 XML 元素的标签名称永远是大写的

<table> 
 <tbody> 
  <tr> 
   <td><p><strong><span style="color:rgb(51,51,51);">节点类型取值<span style="font-family:Arial;">(nodeType)</span></span></strong></p></td> 
   <td><p><strong><span style="color:rgb(51,51,51);">元素节点</span></strong></p></td> 
  </tr> 
  <tr> 
   <td><p>1</p></td> 
   <td><p><span style="color:rgb(51,51,51);">元素<span style="font-family:Arial;">element</span></span></p></td> 
  </tr> 
  <tr> 
   <td><p>2</p></td> 
   <td><p><span style="color:rgb(51,51,51);">属性<span style="font-family:Arial;">attr</span></span></p></td> 
  </tr> 
  <tr> 
   <td><p>3</p></td> 
   <td><p><span style="color:rgb(51,51,51);">文本<span style="font-family:Arial;">text</span></span></p></td> 
  </tr> 
  <tr> 
   <td><p>8</p></td> 
   <td><p><span style="color:rgb(51,51,51);">注释<span style="font-family:Arial;">comments</span></span></p></td> 
  </tr> 
  <tr> 
   <td><p>9</p></td> 
   <td><p><span style="color:rgb(51,51,51);">文档<span style="font-family:Arial;">document</span></span></p></td> 
  </tr> 
 </tbody> 
</table>

![20180509085638476][]

上面的方法是获取所有孩子，其中标签内容也是孩子之一，下面使用另一种方法只获取孩子标签。Dom.children。

![20180509085950513][]

![20180509090010376][]

结果如下：

![20180509090029959][]

8) 获取父标签

var dom = document.body.chileNodes\[0\];

dom.parentNode;// == document.body;

[20180509084728913]: /images/20220525/4f407c69497845d2bb3a68db5b9243d0.png
[20180509084753767]: /images/20220525/75b2a0acec54454b93a5496f7712f6cf.png
[20180509084816722]: /images/20220525/91a0f1ea8a1647e4b17280d0226e681d.png
[20180509084843448]: /images/20220525/11913e6eb6ff47959e4caaa619583efc.png
[20180509084938587]: https://img-blog.csdn.net/20180509084938587
[20180509084945366]: /images/20220525/40ffdd4281ea47ef909137d010811e96.png
[20180509084955334]: https://img-blog.csdn.net/20180509084955334
[20180509085002848]: /images/20220525/ecff284f6cb3448eb37f21eb8ae05fb0.png
[2018050908503560]: /images/20220525/bcaf59255f1a42dc8d556b9a1caf58af.png
[2018050908510160]: /images/20220525/339f41961737416aa0cafa6ec805fca6.png
[20180509085312488]: /images/20220525/b50a42148efc4a77bc9309bb6b45db09.png
[2018050908534791]: /images/20220525/d3bbc529ba864fb1bcb9dd5fe13d9696.png
[20180509085638476]: /images/20220525/c357a322dd194c499cc98facb64721dd.png
[20180509085950513]: /images/20220525/be08423cb8fd4a5081809b50c28f1182.png
[20180509090010376]: /images/20220525/070b09ad902741f092f907dab5d37e4b.png
[20180509090029959]: /images/20220525/a0422986bdfe4867b5f23b4f064e327e.png

js_document

发表评论取消回复

还没有评论，来说两句吧...

相关阅读