Document的常用属性

船_.

已于 2024-01-08 15:02:50 修改

阅读量1.2k

点赞数 36

文章标签：前端服务器运维 html javascript

于 2024-01-08 08:30:00 首次发布

本文链接：https://blog.csdn.net/weixin_69026046/article/details/135444618

版权

本文详细介绍了JavaScript中的document对象，包括其概念、属性分类、常用方法（如getElementById、getElementsByTagName等）、事件处理以及操作HTML元素对象的属性和样式。通过实例展示了如何使用这些方法来获取和修改HTML元素内容和样式。

摘要由CSDN通过智能技术生成

JavaScript的document对象

2、getElementsByName(name)

3、getElementsByTagName(tagname)

4，appendChild(node)

5，removeChild(childreference)

6，cloneNode(deepBoolean)

7，replaceChild(newChild, oldChild)

8，insertBefore(newElement, targetElement

JavaScript的`document`对象

一、`document`对象的概念

浏览器对外提供的支持js的用来操作HTML文档的一个对象，此对象封存的HTML文档的所有信息。

Document节点：DOM全称为Document Object Model，即文档对象模型，是一套管理控制HTML文档的规则，而Document节点则是一种具象化的表现形式

如果把整个HTML文档看成一个对象，那么这个对象就是Document节点，而如何操作控制这个对象的标准，就是DOM
DOM中规定HTML页面中所有的元素都是节点，可以通过Document点号运算符调用所有元素
Document节点又被称作Document对象，每个载入浏览器的HTML文档都会成为Document对象，document是HTML文档的根节点

二, `Document`属性分类：

第一类：
doctype，documentElement，body，head，用于返回文档内部的某个节点
第二类：
documentURI，URL，domain，lastModified，location，title，readyState，用于返回文档指定的信息
第三类：
anchors，forms，images，links，scripts，用于返回文档内部特定节点的集合

`Document`节点属性：

document.title//设置文档标题，与HTNL中的title标签等价
document.bgColor//设置页面背景颜色
document.fgColor//设置页面前景色
document.fileCreateDate//文件建立日期，只读属性
document.fileModifiedDate//文件修改日期，只读属性
document.URL//可返回当前文档的URL
document.linkColor//未点击过的链接颜色
doucment.alinkColor//鼠标在此链接上的颜色
document.vlinkColor//已点击过的链接颜色
document.charset//设置字符集，简体中文为gb2312
document.fileSize//文件大小，只读属性
document.cookies//设置和读出cookie

`document`的常用方法：

document.createElement(Tag)//创建HTML元素
document.getElementById(ID)//获得指定id值的对象
document.getElementByName(name)//获得name值的对象
document.write()//动态向页面写内容
document.body.appendChild(oTag)//向节点添加最后一个子节点

`常用对象`事件：

document.body.onclick=”func()” //鼠标指针单击对象是触发 
document.body.onmouseover=”func()” //鼠标指针移到对象时触发 
document.body.onmouseout=”func()” //鼠标指针移出对象时触发

`body`主体子对象：

document.body//指定文档主体的开始和结束,等价于body>/body>
document.body.bgColor//设置或获取对象的背景颜色
document.body.link//未点击过的连接颜色
document.body.alink//鼠标在链接上时的颜色
document.body.vlink//点击过的链接颜色
document.body.text//文本颜色
document.body.topMargin//页面上边距
document.body.leftMargin //页面左边距 
document.body.rightMargin //页面右边距 
document.body.bottomMargin //页面下边距 
documenr.body.background//背景图片
document.body.appendChild(oTag)//动态生成一个Html对象

三，举例应用

获取HTML元素对象

直接获取方式：通过id、通过name属性值、通过标签名、通过class属性值；
间接获取方式：父子关系、子父关系、兄弟关系；

1，`getElementById(id)`

<body> 
<div id=’divid’><p>h</p> 
Just for testing; 
</div> 
<div id=’divid’> 
Just for testing; 
</div> 
<script> 
var div=document.getElementById(‘divid’); 
alert(div.nodeName);
</script> 
</body>

2、`getElementsByName(name)`

<body> 
<div name="george">f</div> 
<div name="george">f</div> 
<script type="text/javascript"> 
var georges=document.getElementsByName("george"); 
alert(georges.length); 
</script> 
</body>

3、`getElementsByTagName(tagname)`

getElementByTagName可以用于DOCUMENT也可以用元素。getElementsByTagName返回具有指定tagname的子元素列表（数组）。你可以遍历这个数组获得每一个单独的子元素。当处理很大的`DOM结构，使用这种方法可以很容易的所有缩小范围。

<html> 
<head> 
<title></title> 
<script> 
    function start() { 
        // 获得所有tagName是body的元素（当然每个页面只有一个）          
       myDocumentElements=document.getElementsByTagName("body"); 
       myBody=myDocumentElements.item(0); 
        // 获得body子元素种的所有P元素 
        myBodyElements=myBody.getElementsByTagName("p");
        // 获得第二个P元素
        myP=myBodyElements.item(1); 
       //显示这个元素的文本 
        alert(myP.firstChild.nodeValue); 
    } 
</script> 
</head> 
<body onload="start()"> 
<p>hi</p> 
<p>hello</p> 
</body> 
</html>

4，`appendChild(node)`

向当前节点对象的追加节点。经常用于给页面动态的添加内容。
例如下面给div添加一个文本节点：

<div id="test"></div>
<script type="text/javascript">
var newdiv=document.createElement("div")
var newtext=document.createTextNode("A new div")
newdiv.appendChild(newtext)
document.getElementById("test").appendChild(newdiv)
</script>

上面的例子中给DIV添加文本，也可以用newdiv.innerHTML=”A new div”实现，不过innerHTML不属于DOM

5，`removeChild(childreference)`

移除当前节点的子节点，返回被移除的节点。这个被移除的节点可以被插入document树中别的地方

<div id="father"><div id="child">A child</div></div>
<script type="text/javascript">
var childnode=document.getElementById("child")
var removednode=document.getElementById("father").removeChild(childnode)
</script>

6，`cloneNode(deepBoolean)`

复制并返回当前节点的复制节点，这个复制得到的节点是一个孤立的节点，不在document树中。复制原来节点的属性值，包括ID属性，所以在把这个新节点加到document之前，一定要修改ID属性，以便使它保持唯一。当然如果ID的唯一性不重要可以不做处理。

这个方法支持一个布尔参数，当deepBoolean设置true时，复制当前节点的所有子节点，包括该节点内的文本。

<p id=”mypara”>11111</p>
p=document.getElementById("mypara")
pclone = p.cloneNode(true);
p.parentNode.appendChild(pclone);

7，`replaceChild(newChild, oldChild)`

把当前节点的一个子节点换成另一个节点
例如：

<div id="adiv"><span id="innerspan">span</span></div>
<script type="text/javascript">
var oldel=document.getElementById("innerspan");
var newel=document.createElement("p");
var text=document.createTextNode(“ppppp”);
newel.appendChild(text);
document.getElementById("adiv").replaceChild(newel, oldel);
</script>

8，`insertBefore(newElement, targetElement`

给当前节点插入一个新节点，如果targetElement被设置为null，那新节点被当作最后一个子节点插入，否则那新节点应该被插入targetElement之前的最近位置。

<body>
<span id="lovespan">熊掌我所欲也!</span>
</body>

<script type="text/javascript">
var lovespan=document.getElementById("lovespan")
var newspan=document.createElement("span")
var newspanref=document.body.insertBefore(newspan, lovespan)
newspanref.innerHTML="鱼与";
</script>

9，`click()`

执行元素的一次点击，可以用于通过脚本来触发onClick函数

<script>
function wow() {
alert("我好象没有点鼠标啊");
}
</script>

<div id="test" onclick='wow()'>hhh</div>
<script type="text/javascript">
var div = document.getElementById("test");
div.click();
</script>

操作`HTML`元素对象的属性

获取：
--元素对象名.属性名//返回当前属性的属性值。---------固有
--元素对象名.getAttribute("属性名");//返回自定义属性的值---------自定义
修改：
--元素对象名.属性名=属性值
--对象名.setAttribute("属性名","属性值");//修改自定义属性的值-------自定义
注意：
--尽量的不要去修改元素的id值和name属性值。
使用自定义方式获取固有属性内容，value的值获取的是默认值，不能够获取实时的用户数据。

操作`HTML`元素对象的内容和样式

获取元素对象
获取：
--元素对象名.innerHTML//返回当前元素的所有内容，包括HTML标签
--元素对象名.innerHTML//返回当前元素对象的文本内容，不包括HTML标签
修改：
--元素对象名.innerHTML="新的值"//会将原有内容覆盖，并HTML标签会解析
--元素对象名.innerHTML=元素对象名.innerHTML+"新的值"//追加效果
--元素对象名.innerText="新的值"//会将原有内容覆盖，但HTML标签不会被解析，会作为普通文本显示。

`js`操作元素样式

获取元素对象
-通过style属性
--元素对象名.style.样式名="样式值"//添加或者修改
--元素对象名.style.样式名=“”//删除样式
注意：以上操作的是HTML的style属性声明中的样式。而不是其他css代码域中的样式
-通过className
--元素对象名.className="新的值"--添加类选择器样式或者修改类选择器样式
--元素对象名.className=""//删除类样式

document.getElementById("test").style.backgroundColor="yellow"

firstChild 返回第一个子节点
lastChild 返回最后一个子节点
parentNode 返回父节点的对象。
nextSibling 返回下一个兄弟节点的对象
previousSibling 返回前一个兄弟节点的对象
nodeName 返回节点的HTML标记名称，使用英文的大写字母，如P, FONT

例如:

<div id='test'>ddd</div>

<script>

if (document.getElementById("test").nodeName=="DIV")

   alert("This is a DIV");

</script>

船_.

关注

36
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
Document的常用属性

浏览器对外提供的支持的用来操作文档的一个对象，此对象封存的文档的所有信息。Document节点：全称为，即文档对象模型，是一套管理控制文档的规则，而节点则是一种具象化的表现形式的常用方法：事件：主体子对象：三，举例应用获取元素对象 1， 2、3、可以用于也可以用元素。返回具有指定的子元素列表（数组）。你可以遍历这个数组获得每一个单独的子元素。当处理很大的`DOM结构，使用这种方法可以很容易的所有缩小范围。4，向当前节点对
复制链接

扫一扫