JS操作DOM的方法和实战

一、DOM的基本介绍（提纲）

1、DOM

(1). DOM : Document Object Model, 即文档对象模型;
(2). DOM : 指的是当前要操作的文档内容,准确的说,就是HTML文档,当然不仅限于HTML,通常还包括XML文档;
(3). html文档中的内容以"树形结构"呈现,即大家常说的: 文档树;
(4). 文档树中的每个组成部分,称为之"节点", 即 Node类型,文档中的每一个具体的节点,都是一个Node对象:节点对象;
(5). 文档树中,最重要的三类节点是: Document文档节点, Element元素节点, Text文本节点

2、选择页面元素的方法：

<h3 id="header" class="red" style="color:green;" title="php.cn">php中文网</h3>
(1). id.getElementById('header');
(2). class.getElementByClassName('red'); 通过class选择的元素是一组或数组
(3). tagname.getElementByTagName('h3');
<input type="" name="username">
(4). name： getElementByName('username'); 部分标签有name属性
(5). css选择器 js里也可以使用css选择器
querySelector(),返回第一个匹配元素
querySelectorAll(),返回所有匹配元素

<style type="text/css">
h3 {}
#header {}
.red {}
</style>

(6).元素的属性：添加，删除，更新

3.DOM元素的基本操作

(1).创建:createElement('p');
(2).插入:parentNode.appendChild('p');
(3).删除:removeChild)('p');
(4).更新:replaceChild('p',old);

4.DOM实战:模拟智能在线客服系统

二、DOM获取元素的方法有以下几种:

根据id选择元素 getElementById()
根据name属性来获取元素 getElementsByName()
根据标签名来获取元素 getElementsByTagName()
使用name属性和标签名获取元素的快捷方式，如：
images 图像 forms表单 links a连接 head头部 documentElement获取html

document.forms[0].style.backgroundColor = 'lightgreen'; //1.索引
document.forms['register'].style.backgroundColor = 'pink'; //name值
document.forms.register.style.backgroundColor = '#ccc'; //将nam作为forms的属性值
document.forms.item(0).style.backgroundColor = 'red'; //4.使用元素集合的item方法

5.通过class属性来获取元素 document.getElementsByClassName()
6、通过css选择器来获取元素两种
获取所有匹配元素 document.querySelectorAll()
获取第一个匹配元素 document.querySelector()
小结：1、获取可以使用数组下标[0]和item(0)
2、let 定义变量不允许重复，相对var跟严谨
新知识点：
1、throw new Error("没有这个元素") //throw new抛出异常
2、arguments 在函数代码中，使用特殊对象 arguments，开发者无需明确指出参数名，就能访问它们。还可以用 arguments 对象检测函数的参数个数，引用属性 arguments.length 即可。
3、熟悉for循环数据的语句

   for (let i = 0; i < li.length; i++) {
        li[i].style.backgroundColor = 'green';
    }

作业二

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>实战热身</title>
</head>
<body>
<input type="text" name="info">
<button>提交</button>
<br><br>
<ul></ul>
</body>
<script type="text/javascript">
//美化样式
    let a = document.getElementsByTagName('input')[0];
    let b = document.getElementsByTagName('button')[0];
    console.log(a)
    a.setAttribute('style','height: 8px;width: 258px;border: 1px solid #ccc;margin-top: 6px;font-size: 16px;padding: 20px;float: left;');
b.setAttribute('style','height: 50px;width: 100px;border: 1px solid #ccc;margin-top: 6px;font-size: 20px;background: #FF6A00;color: white;border: none;float: left;');

//获取元素
  let input = document.getElementsByName('info')[0];
  let button = document.getElementsByTagName('button')[0];
  let ul = document.getElementsByTagName('ul')[0];

  button.onclick = function(){
   let li = document.createElement('li');
   li.innerHTML = input.value; //文本框的内容
   ul.appendChild(li); //将用户信息显示到列表中
   input.value = ''; //将文本框内容清空
  }
</script>
</html>

QQ截图20181231214511.jpg

最后编辑于：2019.05.13 16:16:43