<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
/*
document.getElementById(id);
【功能】通过当前元素节点的id，获取对应元素节点
元素节点属性
通过这个节点对象，访问它的一系列属性。
tagName 获取元素节点的标签名
innerHTML 获取元素节点标签间的内容 解析标签
HTML属性的属性
id
title
style
className 在获取class时，不能直接使用class，必须使用className
访问这些属性：
元素节点.属性名
元素节点[属性名]
*/
window.onload = function(){ //在页面加载完成以后执行的函数
var oDiv = document.getElementById
("div1")
alert(oDiv)
alert(oDiv.tagName) //DIV
alert(oDiv.innerHTML) //协议
oDiv.innerHTML = "<h1>我<h1/>" //赋值的时候会直接解析标签
alert(oDiv.id) //div1
alert(oDiv.title) //hello
alert(oDiv.className) //box
oDiv.title = "word"
oDiv.className = "oxd"
alert(oDiv.style) //[object CSSStyleDeclaration] 样式对象
alert(oDiv.style.width) //300px
oDiv.style.width = "100px"
/*
在style样式中
background-color 使用-链接的属性
访问的时候，需要将-去掉，然后将后续单词的首字母大写。
*/
alert(oDiv.style.backgroundColor) //red
oDiv.style.backgroundColor = "yellow"
}
</script>
</head>
<body>
<div id="div1" title="hello" class="box" style="width: 300px; height: 300px; background-color: red;">协议</div>
</body>
</html>
57 byid元素节点属性
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 直接上代码 javascript DOM节点有多种类型，我们常用的有(对应上述html片段)： 元素节点 [div...
- 节点信息 每个节点都拥有包含着关于节点某些信息的属性。这些属性是： nodeName（节点名称） nodeValu...
- 关于基础的元素选择器，元素的关系选择器，其他节点选择器，以及关于属性的操作的总结 1 2 3 4 5 6 二级标题...
- 获取DOM元素 part1 1.通过id获取指定元素由于id不可以重复,所以找到了就会将找到的标签包装成一个对象返...
- 一、DOM文档对象模型 二、获取元素方法 1、根据ID获取 2、根据标签名获取 3、通过H5新增方法获取 4、获取...
