笔记
一简介
HTML文档中的每个元素都是一个节点 , 无论是标签 标签属性 文本 注释甚至空白都算是一个节点
整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点
二 查找元素
1通用方法
document.getElementById() 通过id属性来查找元素
document.getElementsByTagName() 通过标签名来查找元素
document.getElementsByClassName() 通过类名来查找元素
document.getElementsByName() 通过name属性查找元素
2父子关系节点属性 (需要先获取父级元素)
childNodes 获取所有的子节点(包括文本节点和注释节点) 比如说获取 一个大的images标签的子节点 包括空白
children 获取所有的子元素节点
firstChild 第一个节点
firstElementChild 获取第一个元素节点
lastChild 获取最后一个节点
lastElementChild 获取最后一个元素节点
previousSibling 获取上一个节点
previousElementSibling 获取上一个元素节点
nextSibling 获取下一个节点
nextElementSibling 获取下一个元素节点
parentNode 获取父级节点
parentElement 获取父级元素节点
父子关系节点如果想找下一个的下一个,可以写两遍.
3特殊关系节点
document.doctype 获取文档头
document.documentElement 获取html标签
document.head 获取head标签元素
document.title 获取页面的标题
设置标题的时候 只能document.title = 'html DOM'
document.body 获取body元素
4节点集合
document.forms 获取所有的表单元素 elements 获取input元素 name属性值 获取元素
document.links 获取所有的a标签
document.images 获取所有的img标签元素
三 操作元素
1修改元素
修改节点属性
setAttribute
getAttribute
removeAttribute
修改元素文本
innerHTML 不仅可以添加文本,还可以添加解析html标签
同样获取的是标签
textContent 只能是纯文本
同样获取的是文本
修改元素的样式
style className
设置form控件的值
输入框值的获取和设置
单选框值的获取和设置
复选框值的获取和设置
文本域值的获取和设置
下拉框值的获取和设置
事件绑定
2节点操作
创建节点
document.createElement() 创建标签
插入节点
appendChild() 从尾部插入
insertBefore() 从头部插入
删除节点
removeChild() 删除节点
替换节点
replaceChild() 节点替换
克隆节点
cloneNode(true) 克隆复制节点
四 扩展了解
Extensible Markup Language 可扩展的文本标记语言
整个文档是一个文档节点
每个 XML 标签是一个元素节点
包含在 XML 元素中的文本是文本节点
每一个 XML 属性是一个属性节点
注释属于注释节点
<?xml version='1.0' encoding='utf-8'?>
<movies>
<movie>
<name>战狼</name>
<country>中国</country>
</movie>
<movie>
<name>速度与激情8</name>
<country>美国</country>
</movie>
<movie>
<name>传奇</name>
<country>美国</country>
</movie>
</movies>XML的主要作用是为了信息传递
XML 文档必须有根元素
所有 XML 元素都须有关闭标签
XML 标签对大小写敏感
XML 必须正确地嵌套
XML 的属性值须加引号
js解析xml
文件
IE
var xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async=false;
xmlDoc.load("note.xml");
非IE
var xmlDoc=document.implementation.createDocument("","",null);
xmlDoc.async=false;
xmlDoc.load("note.xml");
字符串
if (window.DOMParser) { //非IE
var parser=new DOMParser();
var xmlDoc=parser.parseFromString(txt,"text/xml");
} else { //
var xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async=false;
xmlDoc.loadXML(txt);
}
五特效
网站标题闪烁
放大镜
二级菜单
跟随广告
延时按钮
滚动广告