标签：lang fonts add pen margin 父节点 isp 文档 大小
1、Dom作用
1. 通过 tag, name, id 等方式来查找html标签中的内容
2. 文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口
3. 它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式
4. DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。
2、四种Dom直接选择器作用
1. document.getElementById 根据ID获取一个标签（字符串）
2. document.getElementsByClassName 根据class属性获取标签集合（数组）
3. document.getElementsByName 根据name属性获取标签集合（数组）
4. document.getElementsByTagName 根据标签名获取标签集合（数组）
# 1. 根据ID获取一个标签（字符串） document.getElementById(‘i1‘); # 通过标签id获取标签 document.getElementById(‘i1‘).innerText = ‘新内容‘; # 获取标签中的内容并附新值 # 2. 根据class属性获取标签集合（数组） document.getElementsByClassName(‘c1‘) # 获取所有class=’c1’的标签，以数组返回 document.getElementsByClassName(‘c1‘)[0] # 得到所有匹配标签中的一个 document.getElementsByClassName(‘c1‘)[0].innerText # 获取标签中的内容 # 3. 根据name属性获取标签集合（数组） document.getElementsByName(‘i1name‘) # 获取所有name=’i1name’的标签并以数组形式返回 document.getElementsByName(‘i1name‘)[0] # 获取第一个匹配的标签 document.getElementsByName(‘i1name‘)[0].innerText # 获取第一个匹配标签的值 # 4. 根据标签名获取标签集合（数组） document.getElementsByTagName(‘a‘); # 获取所有a标签（以列表形式返回） document.getElementsByTagName(‘a‘)[1]; # 获取a标签列表中的第二个元素 document.getElementsByTagName(‘a‘)[1].innerText = ‘sb‘; # 将第二个a标签内容改成sb
3、DOM间接选择器作用
1. parentElement // 父节点标签元素
2. children // 所有子标签
3. firstElementChild // 第一个子标签元素
4. lastElementChild // 最后一个子标签元素
5. nextElementtSibling // 下一个兄弟标签元素
6. previousElementSibling // 上一个兄弟标签元素
# parentNode // 父节点 # childNodes // 所有子节点 # firstChild // 第一个子节点 # lastChild // 最后一个子节点 # nextSibling // 下一个兄弟节点 # previousSibling // 上一个兄弟节点 # parentElement // 父节点标签元素 # children // 所有子标签 # firstElementChild // 第一个子标签元素 # lastElementChild // 最后一个子标签元素 # nextElementtSibling // 下一个兄弟标签元素 # previousElementSibling // 上一个兄弟标签元素
# 1. tag = document.getElementById(‘i1‘); //首先找到id=i1的标签 # 2. tag.parentElement //找到id=‘i1‘父级div标签（也就是外层标签） # 3. tag.parentElement.children //通过父级标签找到所有子标签
1、 对标签内容操作
tag = document.getElementById(‘i1‘); //首先找到id=i1的标签并赋值给tag
1. tag.innerText
作用： 只能获取指定标签的文本内容，如果标签中有其他子标签，自动忽略
tag.innerText="<a href=‘https://www.baidu.com‘>百度</a>" //将内容当字符串，替换对应的文本内容
2. tag. innerHTML
作用： 可以获取指定标签中所有内容，如果里面有很多子标签也能获取
tag.innerHTML = "<a href=‘https://www.baidu.com‘>百度</a>" //将内容当做a标签添加到模块中
3. tag.value
1、 用来获取input框中输入的内容的值
2、 可以用来获取select中选中对象对应的value值
3、 可以获取textarea 多行文本中的值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="width: 600px;margin: 0 auto;"> <!--onfocus 事件在对象获得焦点时发生自动执行Focus函数--> <!--onblur当焦点移出时自动执行Blur函数--> <input id="i1" onfocus="Focus();" onblur="Blur();" type="text" value="请输入关键字"/> </div> <script> //1 当鼠标移到输入框，将输入框中内容清空 function Focus(){ var tag = document.getElementById(‘i1‘); //获取输入框标签 var val = tag.value; //获取输入框标签中的值 if(val == "请输入关键字"){ //将输入框中内容清空 tag.value = ""; } } //2 如果没有在输入框中写任何东西就移走，那么就重新写上“请输入关键字” function Blur(){ var tag = document.getElementById(‘i1‘); var val = tag.value; if(val.length ==0){ tag.value = "请输入关键字"; } } </script> <!--<input type="text" placeholder="请输入关键字" /> 这个是新html内容，这句话就可以实现搜索框--> </body> </html>
2、对class标签样式操作
1. tag.className = ‘c1‘; //将tag中标签修改成class标签c1
2. tag.classList.add(‘c2‘); //将tag中标签添加一个class标签c2
3. tag.classList.remove(‘c2‘) //将tag中刚添加的class标签c2删除
4. tag.classList //查看tag标签中所有class标签，以列表形式返回
3、修改某个style属性的值
说明： 在JavaScript中修改style样式与html中区别是将横杠省略变成大小写（如：font-size在JavaScript中是： fontSize）
tag = document.getElementById(‘i1‘);
tag.style.color = ‘red‘; //利用style将字体颜色修改成红色
tag.style.backgroundColor = ‘red’;
标签：lang fonts add pen margin 父节点 isp 文档 大小
原文地址：http://www.cnblogs.com/xiaonq/p/7953682.html
