JS基础 DOM编程学习总结
1.JavaScript DOM 概述
每个在浏览器打开的HTML文档都会成为doucment对象。doucment对象可以对页面中所有的元素进行访问,doucment对象是window对象的一部分。
2.JavaScript节点与节点树
在加载html页面时,浏览器会生成一个与之对应的树形结构用来表示页面内部结构。
html标签为根标签,head为html的子标签,meta和title是兄弟关系。
3.JavaScript获取HTML标签元素
getElementById() 根据id获取元素,id唯一,不能同时给两个或两个以上的元素节点创建同一个命名id,如果不存在返回null;返回值Element。
getElementsByName() 根据name获取元素,name不唯一,相同的name可以多次出现。返回值NodeList/HTMLCollection。
getElementsByTagName() 根据标签名获取元素,返回值为元素的节点对象,NodeList/HTMLCollection。
getElementsByClassName() 根据类名获取元素, 返回值NodeList/HTMLCollection。
querySelector() 根据选择器获取元素,该方法只返回匹配到的第一个元素
querySelectorAll() 根据选择器获取元素,该方法返回所有的元素,
querySelector() 和querySelectorAll() 参数和css中参数类似,需要加上“#”和“.”。css中的选择器在这也可以使用。
总结:
1.可以将上述方法封装为函数,调用更方便,但编译器可能没提示。
2.getElementById() 和querySelector() 返回的都是元素节点,剩下的四种方法返回的NodeList/HTMLCollection,也就是集合,所以如果需要操作标签内容需要先遍历再调用方法。
4.JavaScript操作标签内容
element.innerHTML 设置或返回元素的内容。
element.innerText 设置或返回元素的文本内容
element.tagName 返回元素的标签名。返回的标签名为大写,课通过toLocaleLowerCase方法转换为小写输出。
innerText和innerHTML的区别:
- innerText只能获取到文本内容,标签不会被获取; innerHTML获取到所有的内容,包含标签;
- innerText设置的内容会被浏览器认为是纯文本;innerHTML设置的内容会被浏览器认为是HTML文本,如果存在标签会被解析;
5.JavaScript操作标签属性
1.HTML基本属性操作
element.属性名 ,设置或返回元素的指定属性。
注:
1.class属性操作必须使用className。
2.element只能调用html具有的属性。
2.HTML方法操作属性
element.getAttribute() ,返回元素节点的指定属性值。
element.setAttribute() ,把指定属性设置或更改为指定值。参数有两个,属性名和值。
element.removeAttribute() ,从元素中移除指定属性。
总结:
HTML方法操作属性可以操作html不存在的属性,还可以添加和移除属性,使用起来更加灵活。