JavaScript 10 DOM

Posted 2021-06-05 筱宇衡

获取标签属性和内容

DOM对象将标签的属性和内容封装成了对象的属性

<div id = "div">我是一个div
　　<span>我是span</span>
</div>
<script>
var box = document.getElementById(\'div\');
console.dir(box);
//内部包含标签的属性和内容，内容也被封装成div对象的一个属性。通过innerhtml和innerText两个属性可获取标签之间的内容。innerHTML会取到div中所有内容，包括内部的span标签，换行等原封不动获取到，而innerText只会获取的标签的内容，不获取标签

console.log(box.innerHTML);
console.log(box.innerText);
</script>

 innerHTML:因为innerHTML是包含标签的，所以可以通过inner HTML对想要改变的内容加入标签

innerText:在其内容中有标签的话，会直接在网页上打印出来

//b标签使内容加粗
box.innerHTML = \'<b>我爱学习</b>,学习使我快乐！\';

 HTML转义符：

"　　"

,　　'

&　　&

<　　&lt;

>　　&gt;

空格　　&nbsp;

 

判断一个属性是否存在：

console.log(typeof box.a)　　//存在返回该属性的类型，不存在返回undefined

 

HTML标签属性只有一个值的属性，DOM中对应的元素的属性值是布尔类型的，比如表单元素属性： disabled(禁用属性)，checked(复选框选中属性)，selected(下拉菜单选中属性)

 

获取焦点事件：onfocus

失去焦点事件：onblur

 

自定义属性：

HTML标签自定义属性，前提是标签不具备这个属性。<div age=12></div>

获取自定义属性：自定义属性用正常的DOM方法无法获取到，需要object.getAttribute(\'自定义属性名\')来获取

<div age=12 id=\'ww\'></div>
<script>
    ww = document..getElementById(\'ww\');
    console.log(ww.getAttribute(\'age\'));　　//获取到自定义属性age的值
</script>

 设置添加自定义属性：一般不这么用，都在标签中自行添加

box.setAttribute(\'name\', \'zhangsan\');

移除自定义属性：

box.removeAttribute(\'age\');