HTML DOM属性

HTML DOM属性

 

属性是节点(HTML元素)的值,您可以获取和设置。

 

属性的使用是不需要有括号的,直接:ele.innerHTML   获取属性值    ele.innerHTML="<h1></h1>"    设置属性值

 

下面列出常用的一些属性:

 

innerHTML属性:

 

innerHTML 属性可用于获取或改变任意 HTML 元素,包括 <html> 和 <body>。

 

<div id="mydiv1">hello,<b>mydiv1</b></div>
<script>
	var mydiv1=document.getElementById("mydiv1");
	var html=mydiv1.innerHTML;//获取mydiv1中的html代码
	document.write(html);//输出到页面上
</script>

 

nodeName 属性:

 

nodeName 属性规定节点的名称。

  • nodeName 是只读的
  • 元素节点的 nodeName 与标签名相同
  • 属性节点的 nodeName 与属性名相同
  • 文本节点的 nodeName 始终是 #text
  • 文档节点的 nodeName 始终是 #document

 

注释:nodeName 始终包含 HTML 元素的大写字母标签名。

 

 

<div id="mydiv1">hello,<b>mydiv1</b></div>
<script>
	var mydiv1=document.getElementById("mydiv1");
	var nodeName1=mydiv1.nodeName;//DIV
	var nodeName2=mydiv1.firstChild.nodeName;//#text
	var nodeName3=mydiv1.getAttributeNode("id").nodeName;//id
	var nodeName4=document.nodeName;//#document
	document.write(nodeName1+"<br>"+nodeName2+"<br>"+nodeName3+"<br>"+nodeName4);//输出到页面上
</script>
 

 

nodeValue 属性

 

nodeValue 属性规定节点的值。

  • 元素节点的 nodeValue 是 undefined 或 null
  • 文本节点的 nodeValue 是文本本身
  • 属性节点的 nodeValue 是属性值

 

 

<div id="mydiv1">hello,<b>mydiv1</b></div>
<script>
	var mydiv1=document.getElementById("mydiv1");
	var nodeName1=mydiv1.nodeValue;//null
	var nodeName2=mydiv1.firstChild.nodeValue;//hello,
	var nodeName3=mydiv1.getAttributeNode("id").nodeValue;//mydiv1
	var nodeName4=document.nodeValue;//null
	document.write(nodeName1+"<br>"+nodeName2+"<br>"+nodeName3+"<br>"+nodeName4);//输出到页面上
</script>
 

 

nodeType 属性

 

nodeType 属性返回节点的类型。nodeType 是只读的。

比较重要的节点类型有:

 

元素类型NodeType
元素1
属性2
文本3
注释8
文档9

 

<div id="mydiv1">hello,<!--注释--><b>mydiv1</b></div>
<script>
	var mydiv1=document.getElementById("mydiv1");
	var nodeName1=mydiv1.nodeType;//1
	var nodeName2=mydiv1.firstChild.nodeType;//3
	var nodeName3=mydiv1.getAttributeNode("id").nodeType;//2
	var nodeName4=document.nodeType;//9
	var nodeName5=mydiv1.firstChild.nextSibling.nodeType;//8
	document.write(nodeName1+"<br>"+nodeName2+"<br>"+nodeName3+"<br>"+nodeName4+"<br>"+nodeName5);//输出到页面上
</script>

 

 

 

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值