作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
<html>
</head>
<body>
<div class="class1">
<p>text to change1</p>
<p>text to change2</p>
<p> </p>
</div>
<div class="class2">
<p>text to change1</p>
<p>text to change2</p>
<p> </p>
</div>
<button onclick="obj1.changehtml()">changehtml</button>
<script type="text/javascript">
var change= function()
{
}
change.prototype.changehtml=function()
{
// targeting specific elements positions
var paragraph=document.getElementsByClassName("class1");
paragraph[0].innerHTML="hello";
paragraph[1].innerHTML="hell1";
var addthem = paragraph[2].innerHTML = second;
}
var obj1= new change;
</script>
</body>
在上面的程序中我遇到了错误
Uncaught TypeError: Cannot set property 'innerHTML' of undefined
当尝试使用属性更改第一类(Class1)中的第二段[1].innerHTML元素时。我该如何继续?
最佳答案
在您的代码中,在获取“.class1”元素后,您缺少[0].children
。您还应该注意,这会返回匹配元素的 NodeList,而不是单个元素。
如果您之前使用过 jQuery,您可能会觉得这是原生 javascript 功能,允许您将 dom 方法链接到 NodeList,但不幸的是事实并非如此。
var change = function(){}
change.prototype.changehtml = function(){
// targeting specific elements positions
// okay selector
// var paragraphs = document.getElementsByClassName("class1")[0].children;
// okayer selector
// var paragraphs = document.getElementsByClassName('class1')[0].getElementsByTagName('p')
// better more explicit selector
var paragraphs = document.querySelectorAll('.class1 > p');
console.log( paragraphs )
paragraphs[0].innerHTML="hello";
paragraphs[1].innerHTML="hello1";
// second is not defined
var addthem = (paragraphs[2].innerHTML = second);
}
var obj1= new change;
<script src="http://codepen.io/synthet1c/pen/WrQapG.js"></script>
<div class="class1">
<p>text to change1</p>
<p>text to change2</p>
<p> </p>
</div>
<div class="class2">
<p>text to change1</p>
<p>text to change2</p>
<p> </p>
</div>
<button onclick="obj1.changehtml()">changehtml</button>
关于javascript - 如何在 DOM 中专门定位元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34646724/
我是一名优秀的程序员,十分优秀!