发表于： 2022-11-30 19:47:55
0 343
1.常见Dom操作有哪些？
DOM（文档对象模型）是针对HTML 和XML 文档的一个API（应用程序编程接口）。
DOM描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。
DOM是什么？
DOM 是 Document Object Model（文档对象模型）的缩写。DOM就是一个编程接口，就是一套API，是针对HTML文档、XML等文档的一套API。
DOM用来访问或操作HTML文档、XHTML文档、XML文档中的节点元素。JavaScript 可以通过 DOM 来访问和操作HTML文档所有的元素。
JavaScript是一种脚本语言，DOM是用来获得和操作HTML文档的节点属性。JavaScript通常是通过DOM来获得和操作HTML属性的。
常用的查找节点的方法有：
document.getElementById('id属性值');返回拥有指定id的对象的引用
document.getElementsByClassName('class属性值');返回拥有指定class的对象集合
document.getElementsByTagName('标签名');返回拥有指定标签名的对象集合
document.getElementsByName('name属性值'); 返回拥有指定名称的对象结合
document/element.querySelector('CSS选择器'); 仅返回第一个匹配的元素
document/element.querySelectorAll('CSS选择器'); 返回所有匹配的元素
document.documentElement; 获取页面中的HTML标签
document.body; 获取页面中的BODY标签
document.all['']; 获取页面中的所有元素节点的对象集合型
常用的新建节点的方法有：
document.createElement('元素名');创建新的元素节点
document.createAttribute('属性名');创建新的属性节点
document.createTextNode('文本内容');创建新的文本节点
document.createComment('注释节点'); 创建新的注释节点
document.createDocumentFragment( ); 创建文档片段节点
常用的添加新节点的方法有：
1.element.setAttribute( attributeName, attributeValue );给元素增加指定属性，并设定属性值
2.element.setAttributeNode( attributeName );给元素增加属性节点
3.如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。
1、document.createTextNode('新增文本内容');创建新的文本节点
2、parent.appendChild( 创建的新节点 );向父节点的最后一个子节点后追加新节点 或 parent.insertBefore( newChild, existingChild );
向父节点的某个特定子节点之前插入新节点
常用的删除节点的方法有：
parentNode.removeChild( existingChild );删除已有的子节点，返回值为删除节点
DOM 需要清楚你需要删除的元素，以及它的父元素。常用的解决方案：找到你希望删除的子元素，然后使用其 parentNode 属性来找到父元素：
var child=document.getElementById("p1");
child.parentNode.removeChild(child);
2.洗牌算法具体指的是什么？
洗牌算法是我们常见的随机问题，在玩游戏、随机排序时经常会碰到，本质是让一个数组内的元素随机排列。
js练习代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>对象练习1</title>
<script>
//利用对象字面量创建对象{}
// var obj = {}; //创建了一个空的对象
var obj = {
uname : '张三丰',
age : 18,
sex : '男',
sayHi : function () {
console.log('你好');
}
}
// 调用对象的属实 对象名.属性名
console.log(obj.uname);
// 另外一种方法 对象名【'属性名'】
console.log(obj['age']);
//调用对象的方法 sayHi 对象名.方法名();
obj.sayHi();
console.log('-----------------------------------------------------');
//创建一个对象练习
var dog = {
uname : '可可',
type : '阿拉斯加犬',
age : 5,
color : '棕红色',
skill : function() {
console.log('汪汪汪');
console.log('演电影');
}
}
console.log(dog.uname);
dog.skill();
//利用 new objet 创建对象
var obj = Object();
obj.uname = '张三';
obj.age = 18;
obj.sex = '男';
obj.sayHi = function() {
console.log('你好');
}
console.log(obj.uname);
console.log(obj['age']);
obj.sayHi();
console.log('-----------------------------------------------------');
var obj = Object();
obj.uname = '鸣人';
obj.age = 19;
obj.sex = '男';
obj.skill = function() {
console.log('影分身');
}
console.log(obj.uname);
console.log(obj.age);
console.log(obj.sex);
obj.skill();
//构造函数格式
// function 构造函数() {
// this.属性 = 值;
// this.方法 = function () {}
// }
//1、构造函数名字首字母要大写
//2、构造函数不需要 return 就可以返回结果
//3、调用构造函数必须 使用 new
//4、只要new Star() 调用函数就创建一个 ldh{}
//5、属性和方法前面必须添加 this
// function Star(uname, age, sex) {
// this.name = uname;
// this.age = age;
// this.sex = sex;
// this.sing = function (sang) {
// console.log(sang);
// }
// }
// var ldh = new Star('刘德华', 18, '男'); //调用函数返回一个对象
// console.log(ldh.name);
// console.log(ldh.age);
// console.log(ldh['sex']);
// ldh.sing('冰雨');
function Star(uname, type, blood) {
this.name = uname;
this.type = type;
this.blood = blood;
this.attack = function (attack) {
console.log(attack);
}
}
var lp = new Star('廉颇', '力量型', '500血量');
console.log(lp.name);
console.log(lp.type);
console.log(lp.blood);
lp.attack('近战');
console.log('--------------------------------------------------');
var lp = new Star('后羿', '射手型', '100血量');
console.log(lp.name);
console.log(lp.type);
console.log(lp.blood);
lp.attack('远程');
//遍历对象
var obj = {
name: '张三',
age: 18,
sex: '男',
}
//for(变量 in 对象){}
for (var k in obj) {
console.log(k); //k 变量 输出的是 属性名
console.log(obj[k]);// obj[k]
}
</script>
</head>
<body>
</body>
</html>
明天计划：完成接下来的任务
返回列表
评论