元素节点除了有所有的节点都有的属性比如:nodeName、nodeValue、nodeType
外,还有一些特有的属性,来方便操作标签元素。
一. tagName
属性
tagName
属性是nodeName
的另一中写法。注意区别是:tagName
只在标签节点中有,而nodeName
在所有类型的(12种)节点中都存在。
- 它的值表示的就是标签的名字。
<body>
<p id="p1">我是一个p标签</p>
<script type="text/javascript">
var p1 = document.getElementById("p1");
alert(p1.tagName); // p
</script>
</body>
二. innerHTML
属性
innerHTML
属性设置或返回标签的开始和结束标签之间的 HTML。
值为为文本
注意:这个属性的值是这个标签的开始和结束部分之间的所有内容.
设置的时候, 如果给的字符串中有标签会在页面中解析为标签
常用
<body>
<p id="p1"><a href="http://www.atguigu.com/">点我进入xyxyxy官网</a></p>
<P><button onclick="getHTML();">点我获取超级链接的所有内容</button></P>
<p><button onclick="setHTML();">点我更改整个超级链接</button></p>
<script type="text/javascript">
var p1 = document.getElementById("p1");
function getHTML () {
alert(p1.innerHTML);
}
function setHTML () {
p1.innerHTML = "<a href='https://www.baidu.com'>点我进入百度主页</a>"
}
</script>
</body>
三. innerText
属性
innerText
值获取标签中的文本内容,子标签本身不会获取到。
- 去修改的时候,即使带有标签也会把标签作为纯文本来对待,而不会解析为标签
<body>
<p id="p1"><a href="http://www.atguigu.com/">点我进入xyxyxy官网</a></p>
<P><button onclick="getHTML();">点我获取超级
链接的所有内容</button></P>
<p><button onclick="setHTML();">点我更改整个超级链接</button></p>
<script type="text/javascript">
var p1 = document.getElementById("p1");
function getHTML () {
alert(p1.innerText);
}
function setHTML () {
p1.innerText = "<a href='https://www.baidu.com'>点我进入百度主页</a>"
}
</script>
</body>
四. id
属性
就是指的元素节点的id属性的值,与getAttribute("id")
的值是一样的。
五. className
属性
className
属性设置或返回元素的 class
属性。(因为class
在js``中是关键字,所以这个地方把属性名字改成了className
)
<body>
<p class="p1">这是一个段落</p>
<script type="text/javascript">
var p1 = document.querySelector(".p1");
alert(p1.className);
</script>
</body>
七. value
属性
如果一个标签可以拥有value
值,则可以可以通过element.value
来获取。
- 一般表单数据才具有
vlaue:input、textarea、select
<body>
<input id="in1" type="text" value="abc" />
<p>
<button id="btn" onclick="getValue();" value="abc">获取上面输入框的value属性</button>
</p>
<script type="text/javascript">
var in1 = document.getElementById("in1");
function getValue () {
alert(in1.value); // 获取标签的value值
}
</script>
</body>
八. checked
属性
用于type
类型为radio
和checkbox
的input
,来获取或者设置他的checked
属性