非表单元素的属性
1、利用DOM中的元素访问属性，一般DOM对象属性的名称和html中的属性名称相同，但是有些个别的不一样，比如class属性
DOM对象的对应的标签的class属性的名字叫做className ，因为class 在js中是关键字。
2、取消a标签的默认行为
return false; //在事件函数中增加这行代码，可以取消a的默认行为
3、innerHTML和innerText属性获取标签内的内容
<body>
<div id="box">
<span>我是span</span>
<a href="http://www.baidu.com" target="_blank">百度一下</a>
<img src="../images/animal2.png">
</div>
<script type="text/javascript">
1、我们有时会有个需求，就是获取标签内的内容,这里我们获取div标签的内容
//获取元素
var box = document.getElementById('box');
使用innerHTML属性来获取
var content = box.innerHTML;
console.log(content);//他会把div里面的内容原封不动的打印出来，包括标签，空格和换行，如下
/*
<span>我是span</span>
<a href="http://www.baidu.com" target="_blank">百度一下</a>
<img src="../images/animal2.png">
*/
使用innerText属性来获取
content = box.innerText;
console.log(content);//这个只会获取文本内容，会把标签过滤掉，并且换行和空格都会去掉，如下
/*我是span 百度一下*/
//------------------------------------------------------------------------------------------------
2、有时我们需要清空div标签内的内容，再重新设置
（1）清空内容
box.innerHTML = '';
// box.innerText = '';//这两个方式都可以
console.log(box.innerText);
（2）设置内容，通过innerText和innerHTML设置有不同的结果
//通过innerHTML设置，如果有标签他以html的方式解析标签
box.innerHTML = '<a href="http://www.baidu.com" target="_blank" title="点击我跳转">百度一下</a>';
// 页面上显示的结果为：百度一下。
//通过innerText设置，不会解析标签，将设置的内容原封不动的设置进去
box.innerText = '<a href="http://www.baidu.com" target="_blank" title="点击我跳转">百度一下</a>'
//页面上显示的结果为：<a href="http://www.baidu.com" target="_blank" title="点击我跳转">百度一下</a>
//-------------------------------------------------------------------------
还有一个 textContent属性，和innerText属性相类似
他们的区别在哪里呢？浏览器兼容问题，有的支持textContent,有的支持innerText，有的两个都支持
所以这里我们处理他们的兼容问题，不过以后一般不需要处理，因为别人已经帮我们处理好了
我们怎么知道浏览器支不支持哪个属性呢?
我们可以使用typeof来查看返回的类型，当属性不存在时，返回的类型是undefined,存在的话会返回string(是字符串形式哦).
//现在我们写一个函数，可以接受一个元素，然后获取元素的内容文本并输出
function getContent(element) {
if((typeof element.innerText) === 'string') { //判断传入的元素是否支持innerText属性
console.log(element.innerText); //支持的话打印内容
}else { //不支持的话就使用element.textContent
console.log(element.textContent);
}
}
</script>
</body>
表单元素的属性
注意点：下面这三个属性有一个共同点，就是他们只有一个属性值
disabled
checked
selected
当html的标签的属性只有一个值的时候，DOM对应的元素属性值是一个布尔类型。
<form action="http://www.baidu.com" method="post">
<input type="text" name="" placeholder="我是文本框的提示" id="textbox">
</form>
<script type="text/javascript">
// 获取文本框元素
var textbox = document.getElementById('textbox');
console.log(textbox.disabled); //打印false,表示还没有设置该属性
</script>
自定义属性的操作
访问：元素.getAttribute(属性名);
设置属性：元素.setAttribute(属性名, 属性值);
移除属性：元素.removeAttribute(属性名);
判断是否含有某属性：元素.hasAttribute(属性名);
<body>
我们可以个标签添加自定义属性
<div id="box" class="d" age="23" ></div>
<script type="text/javascript">
//获取元素
var box = document.getElementById('box');
1、访问自定义属性,不能使用console.log(box.age);//输出undefined，访问自定义属性有其他的方式
console.log(box.getAttribute('age'));//输出23，正常访问
2、设置自定义属性,通过setAttribute(属性名, 属性值);
//如果该属性没有存在，则会添加属性
box.setAttribute('age', '92'); //更改了age属性的值
box.setAttribute('personId', '1'); //增加了personId属性
3、移除元素
box.removeAttribute('age');
console.log(box); //输出：<div id="box" class="d" personid="1"></div>
</script>
</body>
网友评论