元素节点除了有所有的节点都有的属性比如: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 属性。(因为classjs``中是关键字,所以这个地方把属性名字改成了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类型为radiocheckboxinput,来获取或者设置他的checked属性

Copyright © 李振超 2018 all right reserved,powered by Gitbook
该文件最后修订时间: 2018-10-18 03:19:29

results matching ""

    No results matching ""